Labo 3 - CSS 2

Doel van de opgave

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, 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

In deze opdracht was het de bedoeling om een website op te bouwen met HTML en CSS. De focus lag op het correct structureren van de pagina en het toepassen van verschillende CSS-technieken, zoals het instellen van een eigen lettertype, het positioneren van elementen en het werken met flexbox. Daarnaast werd aandacht besteed aan toegankelijkheid, animaties met CSS-transitions en het overzichtelijk organiseren van stylesheets met CSS nesting en variabelen.

Gebruikte links

Reflectie

Het opbouwen van het HTML-gedeelte begint steeds vlotter te verlopen en is ondertussen snel gedaan. Het CSS-gedeelte vond ik echter een stuk moeilijker. De basis, zoals het aanpassen van kleuren en het instellen van een nieuw lettertype, lukte nog goed, maar het werken met display: flex en CSS transitions was uitdagender. Vooral het maken en correct uitlijnen van de cards vond ik moeilijk. Hiervoor heb ik regelmatig de theorie moeten raadplegen om tot een goed resultaat te komen.