Labo 03 - CSS2

Doel van het labo

• Je kunt een font downloaden, converteren en zelf hosten met @font-face.
• Je kunt elementen positioneren met position (zoals relative, absolute, fixed, en sticky).
• Je kunt de basisprincipes van Flexbox toepassen om layouts te maken.
• Je begrijpt het verschil tussen:hidden attribuut, display: none, visibility: hidden, .visually-hidden
• Je kunt elementen visueel verbergen op een manier waarbij ze beschikbaar blijven voor hulpsoftware.
• Je kunt CSS transitions toepassen voor vloeiende overgangen.
• Je maakt gebruik van CSS nesting om meer gestructureerde en overzichtelijke stylesheets te creëren.
• Je kunt werken met CSS logical properties (zoals margin-inline en padding-block).
• Je kunt CSS Custom Properties (variabelen) aanmaken, gebruiken en overschrijven.
• Je kunt een overlay link aanmaken en het nut ervan uitleggen (bijv. een volledige kaart klikbaar maken).

Beschrijving

In dit labo komt het gebruik van de flexbox duidelijk aan bod. Ook positionering, trasitions en het gebruik van variabelen worden veel gebruikt in dit labo. Dit merendeels door het gebruik van lijsten in HTML.

Gerelateerde links

• MDN
• picsum.photo