Labo 02
Introductieoefening
Start een nieuw project in je IDE naar keuze.
- Zorg voor een index.html en een styles.css.
- Pas je HTML lang attribuut aan.
- Geef je document de title 'Labo 02'.
Stap 1: HTML
- Vergeet je landmark regions niet!
- Deel je hoofdinhoud (main) op in sections.
Pas alles toe wat je geleerd hebt in week 1. - Tip: de links in de navigatie zijn same page links.
- Valideer je code regelmatig met de W3C-validator en met de aXe devtools
Stap 2: link-tags
- Voeg normalize.css toe in de head van je HTML-document.
- Voeg een google font (Montserrat) toe in de head van je HTML-document.
- Koppel je eigen styles.css aan je HTML
Stap 3: start CSS
- 'Corrigeer' de box-sizing property van alle elementen en van alle elementen en van alle ::before en ::after pseudo-elementen.
- Maak een selector voor het root element →:root{...}
- spanPas de background-color aan naar #fffdff.
- Pas de font-family aan naar Montserrat en vergeet je fallback font niet!
- Zet de line-height op 1.6.
- Zet de scroll-behavior op smooth.
- Maak een selector voor het body element →body{...}
Zet de margin op 0.
Stap 4: Vragen
- Wat doet normalize.css
Normalize.css zorgt ervoor dat browsers laden met alle correcte elementen en zorgt er voor dat deze elementen consistent zijn en in lijn zijn met de modernere standaard - Wat is een fallback font, wat doet het, welk heb je gekozen en waarom?
Een fallback font is een basic font dat automatisch gebruikt wordt als het primaire font nog niet geladen is of missende delen heeft op de pagina te laden. Ik heb het sans-serif font gebruikt aangezien we het montserrat gebruiken en dit af stamt van het sans-serif font. - Hoe heb je het font toegevoegd en waarom doe je dat beter niet op die manier?
Ik gebruik een <link> in de <head>, je bent afhankelijk van een 3de partij en zo heb je minder mogelijkheden, gdpr risico's en moeilijker om de fallback font in te stellen.
Nav
