Labo 03 - layout met CSS 2
Ik was afwezig tijdens de week waarin dit labo plaatsvond en heb het daardoor niet zelf kunnen uitwerken.
Om mijn website volledig af te werken, maak ik uitsluitend gebruik van de code van Mohammed als referentie.
Doel van de opdracht
- Een Google Font downloaden, converteren naar
.woff2en zelf hosten. - Elementen positioneren en de basisprincipes van Flexbox toepassen.
- Verschil begrijpen tussen
hidden,display: none,visibility:hiddenen.visually-hidden. - Toegankelijk visueel verbergen (content beschikbaar voor hulpsoftware).
- CSS transitions toepassen op kleur en achtergrond.
- CSS nesting gebruiken voor gestructureerde stylesheets.
- Werken met CSS logical properties (bv.
margin-inline,padding-block). - CSS Custom Properties (variabelen) aanmaken, gebruiken en overschrijven.
- Een overlay-link aanmaken en het nut ervan uitleggen.
Beschrijving
In dit labo heb ik een self-hosted font opgezet (conversie van .ttf naar
.woff2),
de basis van Flexbox gebruikt voor navigatie en kolom-layout, en
CSS variabelen toegepast voor kleurbeheer (OKLCH). Ik heb
logical properties gebruikt om spacing taal-onafhankelijk te maken
en CSS nesting toegepast om gerelateerde regels overzichtelijk te groeperen.
Verder heb ik een .visually-hidden klasse gebruikt voor toegankelijke koppen
en transitions toegevoegd aan link-states (:hover, :focus-visible).
Tot slot heb ik bij de cards een overlay-link geïmplementeerd om het volledige card-oppervlak
klikbaar te maken.
Gerelateerde links
Reflectie
Wow!
NVT
Aauw!
NVT
Niet zeker?
NVT