Labo 03

Voorbereiding

Stap 1

  1. Maak een nieuw project.
    Zorg woor 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: css

  1. 'corrigeer' de box-sizing property van alle elementen van alle ::before en ::after pseudo-elementen.
  2. Maak een :root selector
    • Stel de font-family in op Fredoka, inclusief fallback/default font.
    • Stel de line-height in 1.6
    • Stel scroll-behavior in op 'smooth'
    • Maak CSS variabelen --bg: oklch(0.99 0.003 325); --primary: oklch(0.25 0.01 325);
    • Gebruik die variabelen voor de achtergrondkleur en 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, grbruik logical properties en values

Oefening 1: Columns

Oefeningen 3: Cards