Labo 03

Voorbereiding

Indtroductieoefening

Start een nieuwe project in je IDE naar keuze

1. Zorg voor index.html en styles.css.
2. Pas je HTML lang attribuut aan.
3. Geef je document de titel 'Labo 02'

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
   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: start 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 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

Oefening 1: Columns

Oefening 2: Nav