Labo 03 – CSS 2
Doelen van de oefening
- Een font downloaden, converten en zelf hosten.
- Elementen positioneren.
- Flexbox toepassen.
- Het verschil begrijpen tussen hidden, display: none, visibility:hidden en visually-hidden.
- Elementen visueel verbergen terwijl ze beschikbaar blijven voor hulpsoftware.
- CSS transitions toepassen.
- CSS nesting gebruiken voor overzichtelijke stylesheets.
- CSS logical properties gebruiken.
- CSS custom properties (variabelen) aanmaken, gebruiken en overschrijven.
- Overlay link aanmaken en uitleggen.
Beschrijving
In dit labo oefenden we met CSS door een font zelf te hosten, elementen te positioneren en flexbox toe te passen. Ook leerden we werken met logical properties, transitions en custom properties. We maakten overlays en verborgen elementen toegankelijk voor hulpsoftware.
De oefeningen werden stap voor stap opgebouwd, beginnend met de introductieoefening en vervolgens met kolommen en layout via flexbox.
Geraadpleegde links
Reflectie
Wauw!
Ik heb geleerd hoe ik een self-hosted font kan gebruiken en hoe flexbox layouts efficiënt kan toepassen. CSS variabelen en logical properties maken styling overzichtelijker.
Aauw!
Het positioneren van elementen en het correct gebruiken van flex-grow/flex-basis was soms lastig.
Niet zeker?
Ik twijfel nog hoe ik overlay links het best inzet en wanneer ik visibility:hidden versus display:none gebruik.