Labo 03 - Verderbouwen met CSS

Doelen van de opdracht:

  • Je kunt een font downloaden, converteren en zelf hosten.
  • Je kunt elementen correct positioneren.
  • Je past de basisprincipes van flexbox toe.
  • Je begrijpt het verschil tussen hidden, display: none, visibility: hidden en .visually-hidden.
  • Je kunt elementen visueel verbergen, terwijl ze toegankelijk blijven voor hulpsoftware.
  • Je kunt vloeiende CSS-transitions toepassen.
  • Je gebruikt CSS-nesting voor gestructureerde en overzichtelijke stylesheets.
  • Je werkt met CSS logical properties voor betere lay-outcontrole.
  • Je maakt en beheert CSS Custom Properties (variabelen).
  • Je kunt een overlaylink aanmaken en het nut ervan toelichten.

Ga naar de oplossing

foto van labo03

Beschrijving

In dit labo leer je meer over CSS.
Wat je er nog zoal mee kunt doen, zoals fonts leren gebruiken tot het gebruiken van flexbox.
Ook leer je gebruik maken van CSS nesting en logical properties.

Gerelateerde links

De websites die geholpen hebben bij het maken van deze oefening: Mozilla, W3C-validator.

Reflectie

  • Wat ging goed?
    • Een font downloaden
    • De basisprincipes van flexbox
  • Waar twijfel je aan?
    • Elementen correct positioneren
    • De verschillen van hidden, display: none, visibility: hidden en .visually-hidden
    • Elementen visueel verbergen
    • Vloeiende CSS-transitions toepassen
    • CSS-nesting toepassen
  • Wat was moeilijk?
    • CSS logical properties
    • Overlaylink aanmaken en het nut ervan toelichten