Samenvatting Labo 03 - CSS

Doelstellingen

  • Een font downloaden, converteren en lokaal hosten.
  • Elementen correct positioneren met CSS.
  • De basisprincipes van flexbox toepassen.
  • Het verschil begrijppen tussen hidden, display: none, visibility-hidden en .visually-hidden
  • Elementen visueel verbergen terwijl ze toegankelijk blijven voor hulpsoftware.
  • CSS transitions toepassen voor vloeiende interacties.
  • Werken met CSS logical properties.
  • CSS Custom Properties (variabelen) aanmaken, gebruiken en overschrijven.
  • Een overlay link aanmaken en het nut ervan kunnen uitleggen.

Beschrijving van de oefening

In dit labo lag de focus op geavanceerde CSS-technieken die nodig zijn voor moderne, toegankelijke en onderhoudbare websites. Ik leerde werken met flexbox voor layout, CSS variabelen voor herbruikbare stijlen en logical properties om layouts toekomstgericht te maken. Daarnaast moesten we ook aandacht besteden aan toegankelijkheid, animaties en structuur in CSS.

Wat was belangrijk?

  • Correct toepassen van flexbox voor navigatie en layout.
  • begrijpen wanneer elementen verborgen mogen worden zonder toegankelijkheid te breken.
  • Gebruik van .visually-hiddeb voor screenreaders.
  • Overzichtelijke CSS dankzij nesting.
  • Herbruikbare styling via CSS Custom Properties.
  • Overlay links gebruiken om klikbare zones te vergroten.

Wat had ik nodig?

  • HTML-bestanden (index.html)
  • HTML semantische elementen
  • CSS flexbox
  • CSS Custom Properties
  • CSS transitions
  • CSS logical properties
  • Browser DevTools
  • aXe DevTools

Gerelateerde Links

Reflectie

Beschrijf wat je goed gedaan hebt:

  • De flexbox correct toepassen

    CSS nesting

Beschrijf wat moeilijk was:

  • Het verbergen van een tekst.

    Specificity en inheritance correct toepassen.