Labo 03 – CSS 2
Doelstellingen
- Je kan een font downloaden, converten en zelf hosten.
- Je kunt elementen positioneren.
- Je kunt de basisprincipes van flexbox toepassen.
- Je begrijpt het verschil tussen
hidden,display: none,visibility: hiddenen.visually-hidden. - Je kan elementen visueel verbergen op een manier waarbij ze beschikbaar blijven voor hulpsoftware.
- Je kan CSS transitions toepassen.
- Je maakt gebruik van CSS nesting om meer gestructureerde en overzichtelijke stylesheets te creëren.
- Je kan werken met CSS logical properties.
- Je kan CSS Custom Properties (variabelen) aanmaken, gebruiken en overschrijven.
- Je kan een overlay link aanmaken en het nut ervan uitleggen.
Omschrijving
In dit labo leer je werken met geavanceerde CSS-technieken. Je downloadt, converteert en host zelf een font. Je oefent met CSS Flexbox om elementen te positioneren en layouts te maken. Je leert het verschil tussen hidden, display: none, visibility: hidden en .visually-hidden, en wanneer je welke techniek gebruikt voor toegankelijkheid.
Daarnaast werk je met CSS transitions voor animaties, CSS nesting voor overzichtelijke stylesheets, logical properties voor internationalisering, en CSS Custom Properties (variabelen) voor herbruikbare waarden. Tot slot leer je overlay links maken voor betere klikbare gebieden.
Reflectie
Wat ging goed?
- Font downloaden en hosten met @font-face.
- Flexbox gebruiken voor navigatie en columns.
- CSS variabelen aanmaken en gebruiken.
Wat was moeilijk?
- Het verschil begrijpen tussen de verschillende manieren om elementen te verbergen.
- Overlay links implementeren.