Labo 03

Voorbereiding

Stap 1

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

Stap 2

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

Stap 3:css

  1. "corrigeer" de box-sizing property van alle elementen en van alle ::before en ::after pseudo-elementen.
  2. Maak een :root selector
    • Pas de font-family aan naar Fredoka en vergeet je fallback font niet
    • Pas de line-height aan naar 1.6
    • Pas de scroll behavoir aan naar 'smooth'
    • Maak variabelen --bg: oklch(0.99 0.003 325) en --primaire: 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 een .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

Oefening1: Kolommen

Oefening3: Kaarten