Labo 03 - CSS 2

Doelstellingen van de oefeningen

• Font downloaden, converten en zelf hosten.
• Elementen positioneren.
• Basisprincipes van flexbox toepassen.
• Verschil kennen tussen hidden, display: none, visibibility:hidden en .visually-hidden
• Elementen visueel verbergen op een manier waarbij ze beschikbaar blijven voor hulpsoftware
• CSS transitions toepassen
• CSS nesting om meer gestructureerde en overzichtelijke stylesheets te creëren.
• Werken met CSS logical properties.
• CSS Custom Properties (variabelen) aanmaken, gebruiken en overschrijven.
• overlay link aanmaken en het nut ervan uitleggen.

Omschrijving van de oefening

Deze labo-oefening draait rond complexere CSS-technieken en het bouwen van een gestructureerde, visueel aantrekkelijke webpagina. Je download je eigen font van google en host het lokaal. En je probeert gebruik te maken van css nesting.

Gebruikte websites/Tools

• axe DevTools - Web Accessibility Testing
• MDN Web Docs
• W3C HTML-validator.

Reflectie

• Wat ging goed?

  • De basis css-structuur
  • Basis css zoals .container
  • Het font zelf hosten
  • Variabelen toevoegen en gebruiken

• Wat was lastig?

  • CSS-nesting want dar resulteerde in vaditatie fouten
  • oefening 3 cards

• Wat laat je twijfelen?

  • Transition op oefening 2 (nav)