Labo 03

Voorbereiding

Stap 1

  1. Maak een nieuw project.
    Zorg voor een index.html en een styles.css
  2. Schrijf alle HTML, vergeet lang en title niet!

Stap 2

  1. Voeg normalize.css toe via een link-tag in de head.
    rel="stylesheet", href="https://unpkg.com/@csstools/normalize.css"
  2. Voeg een google font toe in de head (Fredoka)
  3. Koppel je eigen styles.css aan je HTML

Stap 3

  1. 'corrigeer' de box-sizing property van alle elementen e van alle ::before en ::after pseudo-elementen.
  2. Maak een :root selector
    • Pas de font-family aan naar Fredoka en vergeet je fallback niet!
    • Pas de line-height aan naar 1.6
    • Pas de scroll behavior aan naar 'smooth'
    • Maak variabelen --bg: oklch(0.99 0.003 325) en --primary: oklch(0.25 0.01 325)
    • Gebruik die variabelen voor de achtergrondkleur en de tekstkleur
  3. Maak een body selector, zet de margin op 0
  4. maak .container
    • max-width: 80rem
    • linker en rechter margin is auto, gebruik logical properties en values
    • Linker en rechter padding is 1rem, gebruik logical properties en values

Oefening 1: Columns

bagger
2de bagger

Oefening 2: Nav

  • visibility: hidden
    • Niet zichtbaar voor ziende gebruikers.
    • Niet zicht/leesbaar door screenreaders.
    • Neemt nog steeds dezelfde ruimte in.
    • Kan gebruikt worden om tijdelijk iets te verbergen zonder dat je hele layout verandert.
  • display: none
    • Niet zichtbaar voor ziende gebruikers.
    • Niet zicht/leesbaar door screenreaders.
    • Neemt geen ruimte in.
    • Kan gebruikt worden om permanent iets te verbergen. De layout gaat wel veranderen omdat er geen plaats meer word ingenomen door het niet gedisplayed element.
  • .visually-hidden
    • Niet zichtbaar voor ziende gebruikers.
    • Wel zicht/leesbaar door screenreaders.
    • Neemt geen nuttige ruimte in/neemt heel beperkte ruimte in.
    • Kan gebruikt worden in beide van bovenstaande gevallen maar heeft het voordeel dat het veel toegankelijker is.

De extra toegankelijkheid van de .visually-hidden class maakt het veel aangenamer of gewoon bruikbaar voor mensen die afhankelijk zijn van screenreaders.

Je gebruikt .visually-hidden best voor content dat belangerijk is semantisch gezien maar juist niet belangerijk is visueel gezien. bv. je moet ergen een h3 gebruiken om door de validatie te geraken maar niemand moet die h3 kunnen zien op de pagina.

Oefening 3: Cards