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
    href="https://unpkg.com/@csstools/normalize.css" rel="stylesheet"
  2. Voeg een google font toe in de head (Fredoka).
  3. Koppel je eigen styles.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 na Fredoka en vergeet je fallback font niet!
    • Pas de line height aan naar 1.6.
    • Pas het scroll behavior can naar smooth
    • Mank variabelen-hg: okich(0.79 0.00 175) en-primary: oklch (0.25 0.01 175)
    • Gebruik die variabelen vout de achtergrondkleur en de tekstkeur
  3. Maak een body selector, zet de margin op O
  4. Maak een .container
    • max width: 80rem
    • linker en rechter margin is auto, gebruik logical propertica en values
    • linker en rechter padding is 1rem, gebruik logical properties en values

Oefening 1: Columns

Oefening 3: Cards