Labo 02

Introductieoefening

Start een nieuw project in de IDE naar keuze

1. Zorg voor een index.html en een styles.css.
2. Pas je HTML lang attribuut aan.
3. Geef je document de title “Labo 02”.

Stap 1: HTML

1. Vergeet je landmark regions niet!
2. Deel je hoofdinhoud (main) op in sections. Pas alles toe wat je geleerd hebt in week 1.
3. Tip: de links in de navigatie zijn same page links
4. Valideer je code regelmatig met de W3C-validator en met deaXe devtools.

Stap 2: link-tags

1. Voeg normalize.css toe in de head van je HTML-document.
2. Voeg een google font (Montserrat) toe in de head van je HTML-document
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 alle ::after pseudo-elementen. Zie theorie!
2. Maak een selector voor het root element → :root { … }
   • Pas de background-color aan naar #FFFDFF in oklch, niet RGB! Gebruik de online omzettool oklch.com
   • Pas de font-family aan naar Montserrat, vergeet het fallback font niet!
   • Zet de line-height op 1.6
   • Zet scroll-behavior op smooth
3. Maak een selector voor het body element → body { … }

   zet de margin op 0

Stap 4: vragen

1. "Normalize.css is a CSS library that provides consistent, cross-browser default styling of HTML elements."
2. Een font dat gaat gebruikt worden als het lettertype niet geladen/gebruikt kan worden
3. Toegevoegd via link, maar als de google website plat ligt zal het niet meer werken, dus het is beter dat je het download en lokaal linkt

Container