Labo 03 - CSS layout en positioning leren gebruiken.
Doelen van de oefening:
- 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.
Beschrijving van het labo:
In labo 3 heb ik geleerd hoe ik een zelfgehost lettertype kan toevoegen en werken met CSS-variabelen en logical properties. Ik heb flexbox gebruikt om lay-outs met kolommen en navigaties te maken. Daarnaast leerde ik het verschil tussen display: none, visibility: hidden en .visually-hidden.
Link's:
Hier is een lijste met al de websites die ik heb gebruikt tijdens het schrijven van mijn code
Reflectie:
Dit labo vond ik veel moeilijker dan de vorige labos. Ik ben meerdere keren opnieuw moeten beginnen met mijn CSS omdat het niet werkte zoals ik wou. Het positioneren van elementen en het juist toepassen van flexbox en variabelen was soms echt lastig. Toch ben ik uiteindelijk tot een mooi en goed werkend resultaat gekomen.
Oplossing Labo 03