Stap 1: HTML

Schrijf alle HTML die nodig is om het resultaat uit 'Figuur 1: stap 1' te bekomen

1. Vergeet je landmark regions niet! (header, main, footer…)
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-validatoren met de aXe 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!
   • 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

Voeg in het HTML-document een extra stap toe: ‘Stap 4: vragen’. Noteer het antwoord op deze drie vragen.

1. Wat doet normalize.css?
   • Zorgt ervoor dat de CSS cross-browser compatible is.
2. Wat is een fallback font, wat doet het, welk heb je gekozen en waarom?
   • Zorgt ervoor dat de gebruiker toch een font te zien zal krijgen, moest de eerdere gekozen fonts misslukken om te installeren.
   • Ik heb Sans-Serif gekozen, omdat het normaal op iedereen zijn toestellen geinstallerd is
3. Hoe heb je het font toegevoegd en waarom doe je dat beter niet op die manier?
   • Gewoon via een link tag
   • Omdat het niet GDPR compliant is