Labo 02 - layout met CSS
Doel van de opdracht
- Gebruik van tag-, class-, id- en pseudo-selectoren.
- Toepassen van tekst- en achtergrondkleuren.
- Herbruikbare classes maken.
- Normalize.css toevoegen en begrijpen.
- Inzicht in het box-model en box-sizing.
- Externe lettertypen toevoegen met fallback.
- Stylesheet koppelen en optimaliseren.
- CSS analyseren en debuggen met devtools.
- Geavanceerde selectoren en prioriteitsregels toepassen.
Beschrijving
In dit labo heb ik een HTML-pagina uitgebreid met CSS. Ik heb
normalize.css en een Google Font toegevoegd, het box-model toegepast
en containers gebruikt om de layout te centreren. De navigatie is
gestyled met padding en hover-effecten. Ik heb gewerkt met
geavanceerde selectoren zoals :nth-child, combinators en
attribute selectors. Daarnaast heb ik herbruikbare classes gemaakt
zoals .highlight en utility classes voor marges en
padding. Tot slot heb ik responsiveness getest met viewport units en
pseudo-classes zoals :hover en
:focus-visible.
Gerelateerde links
Reflectie
Wow!
De OKLCH converten, ik wende er snel aan.
Aauw!
Het correct toepassen van geavanceerde selectoren kostte wat tijd.
Niet zeker?
Ik twijfel nog over de beste manier om utility classes efficiënt te gebruiken zonder dat mijn CSS onoverzichtelijk wordt.