Labo 3 - CSS

In dit labo focussen we op geavanceerde CSS-technieken. De nadruk ligt op het zelf hosten van fonts, het gebruik van Flexbox voor layouts, en het toepassen van moderne CSS-features zoals logical properties en variabelen.

Beschrijving

Voorbereiding & Fonts

Voor dit project is het Google Font "Fredoka" gedownload en geoptimaliseerd (van .ttf naar .woff2). Dit font wordt lokaal ingeladen via @font-face. Daarnaast is normalize.css toegevoegd voor een consistente browser-basis.

CSS Variabelen & Reset

Er is gebruik gemaakt van CSS Custom Properties (variabelen) voor de kleuren, gedefinieerd in de :root. De kleuren maken gebruik van de moderne oklch kleurruimte. Ook is de box-sizing voor alle elementen correct ingesteld.

Layout met Flexbox

De navigatiebalk is opgebouwd met Flexbox, waarbij links en rechts padding is toegepast via logical properties. Voor de oefening "Columns" is een row-layout gemaakt waarbij de eerste kolom twee keer zoveel ruimte inneemt als de tweede.

Doelstellingen

  • Een font downloaden, converteren en zelf hosten (@font-face).
  • Elementen positioneren en basisprincipes van Flexbox toepassen.
  • Het verschil begrijpen tussen hidden, display: none en visually-hidden.
  • Werken met CSS logical properties (zoals padding-inline).
  • CSS Custom Properties (variabelen) aanmaken en gebruiken.
  • CSS nesting gebruiken voor gestructureerde stylesheets.
  • Een overlay link aanmaken.
Ga naar de oplossing

Reflectie

  • Wauw!

    Het gebruik van oklch kleuren en logical properties voelt erg modern aan. Flexbox maakt het uitlijnen van de navigatie veel makkelijker.

  • Au!

    Het was even zoeken om het @font-face pad correct te krijgen en de padding-top/bottom werkend te krijgen op inline links (display block/flex nodig).

Gerelateerde links

Hulpmiddelen gebruikt tijdens dit labo:

You can also find me on