Lab 3 - Layout met CSS

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

Ga naar de oplossing

Beschrijving

We hebben leren werken met css. We leerden met visually-hidden gebruiken en we leerden variabelen aanmaken en overschrijven. Ook hebben we leren werken met overlay werken.

Belangrijke links

de HTML-validator

axe browser extension.

Leren werken met flexbox

Fonts gebruikt

Reflectie

  • Wat ging goed?

    Ik kon vlot HTML schrijven. De lettertype in het bestand zetten lukt ook vlot. De stappen waren ook duidelijk uitgelegd waardoor je makkelijk en snel kon werken.

  • Wat ging minder goed?

    Ik vond het moeilijk om aan de juiste structuur te volgen. Ook vond ik het moeilijk om met nesting te werken. Er werden veel dingen verwacht en wist niet waar ik alles moest schrijven.

  • Waar twijfel je nog over

    Ik twijfel nog over hoe je een nesting moet maken. Ik weet nooit goed hoe je een nesting maakt.