Doel van het labo
- Elementen positioneren met flexbox voor een betere layout.
- Werken met lettertypes, inclusief zelf gehoste fonts.
- CSS-transitions en eenvoudige visuele effecten toepassen.
- CSS-variabelen en logical properties gebruiken voor overzichtelijkere stylesheets.
Reflectie
Wat ging goed
- Flexbox maakte het eenvoudiger om elementen netjes uit te lijnen.
- Het toevoegen en gebruiken van eigen lettertypes lukte goed.
- Met CSS-variabelen kreeg ik meer overzicht in mijn stylesheet.
Wat ging minder
- Soms moest ik even experimenteren met flexbox-eigenschappen om het juiste resultaat te krijgen.
- Het verschil tussen visibility, display en hidden was niet meteen duidelijk.
Wat ging niet goed
- Ik vergat af en toe een flex-container correct in te stellen, waardoor de layout niet werkte zoals verwacht.
Bronnen
Uiteraard maakte ik voor dit labo weer gebrik van de powerpoints, dit keer in combinatie met een ai en mijn VScode "zandbak" om de geziene leerstof op te delen en stap voor stap te leren. Verder maakte ik gebruik van https://css-tricks.com/snippets/css/a-guide-to-flexbox/ om te verdiepen in flexbox samen met deze youtube video:https://youtu.be/wsTv9y931o8?si=ksJSY5P_Nrs369CL