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 toe via een link-tag in de head.
    rel="stylesheet", href="https://unpkg.com/@csstools/normalize.css"
  2. Voeg een google font (Fredoka) toe in de head van je HTML-document
  3. Koppel je eigen styles.css aan je HTML

Stap 3

  1. Corrigeer de box-sizing property van alle elementen en van alle ::before en alle ::after pseudo-elementen.

  2. Maak een :root selector

    • Pas de font-family aan naar Fredoka, vergeet het fallback font niet!
    • Zet de line-height op 1.6
    • Zet scroll-behavior op smooth
    • Maak variablen --bg: oklch(o.99 0.003 325) en --primary: oklch(0.25 0.01 325)
    • Gebruik die variablen 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

Oefening 1: Columns

Oefening 2: Nav

Oefening 3: Cards