Labo 3 - Advanced CSS
Doel
- Download een font.
- converteer je gedownload font.
- host je gedownload font.
- Elementen kunnen positioneren.
- Basisprincipes van flexbox toepassen.
- Je begrijpt het verschil tussen hidden, display: none, visibibility:hidden en .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.
Beschrijving
Dit labo leerde ons de juiste manier om een extern font te gebruiken, flexbox en het positioneren van elementen kwam ook voor het eerst aan bod. We hebben ook geleerd wat de verschillende manieren zijn om iets te verbergen zoals .visually -hidden. Voor de css werdt het een stapje moeilijker en gebruikte we transitions, logical properties, nesting en custom properties dit maakt dat we een pak meer kunnen met onze huidige css kennis. Ten slotte moesten we cards maken en leerden we een overlay link gebruiken.
Relevante links | Same Page Links
Reflectie
- Goed
-
- fonts downloaden, converten & hosten.
- Elementen positioneren.
- Flexbox gebruiken [basis]
- .visually-hidden gebruiken.
- css nesting.
- logical properties maken en gebruiken.
- Slecht
-
- .visually-hidden begrijpen.
- css transitions. [wegens nog niet af]
- overlay-link gebruiken. [wegens nog niet af]
- css logical properties.
Status
🔄️ in progress