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 titel niet.

Stap 2

  1. Voeg normalize.css toe vie een link-tag in de head.
    rel="stylseheet", 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 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 het scroll behavior aan naar 'smooth'.
    • Maak variabelen --bg: oklch(0.99 0.003 325) en --primary: oklch(0.25 0.01 325).
    • Gebruik de 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.

Oefening 1: Columns

Oefening 3: Cards