Labo 03 – CSS Positionering & Flexbox

Doelen van de oefening

• Een lettertype downloaden, omzetten en zelf hosten
• Elementen juist positioneren met CSS
• De basis van flexbox leren gebruiken
• Het verschil begrijpen tussen display: none, visibility: hidden en .visually-hidden
• Elementen kunnen verbergen zonder dat ze verdwijnen voor hulpsoftware
• CSS-transitions toepassen voor mooie overgangen
• CSS-nesting gebruiken om nettere stylesheets te maken
• Werken met CSS logical properties
• CSS-variabelen aanmaken en gebruiken
• Een overlay-link maken en weten waarom die handig is

Ga naar de oplossing

Beschrijving

In deze oefening leerde ik heel wat nieuwe dingen over CSS. Ik begon met het downloaden en zelf hosten van een lettertype. Daarna oefende ik met het positioneren van elementen en het werken met flexbox om kolommen en navigaties te maken. Ik ontdekte ook het verschil tussen display: none en .visually-hidden zodat ik dingen kan verbergen zonder dat ze verdwijnen voor schermlezers. We gebruikten CSS-transitions om zachte overgangen te maken en CSS-nesting om de code mooier en overzichtelijker te houden. Ook maakten we gebruik van CSS-logical properties en variabelen om stijlen slimmer te organiseren. Uiteindelijk maakten we zelfs een overlay-link die het hele kaartje klikbaar maakt. Dit labo was een beetje moeilijker dan de vorige, maar ik heb er veel uit geleerd!

Gerelateerde links