Labo 02

Introductieoefening

Start een nieuw project in je 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! (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

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

1. Wat doet normalize.css ?

   Normalize.css zorgt voor een consistente weergave van HTML-elementen in alle browsers door kleine inconsistenties en fouten te corrigeren.

2. Wat is een fallback font, wat doet het, welk heb je gekozen en waarom?

   Een fallback-lettertype is een reservelettertype dat wordt gebruikt als het primaire lettertype niet beschikbaar is of niet wordt ondersteund. Ik heb sans-serif gekozen als fallback. Dat is een veilig systeemlettertype dat op alle toestellen aanwezig is. Het lijkt visueel goed op Montserrat, waardoor de stijl van de website consistent blijf.

3. Hoe heb je het font toegevoegd en waarom doe je dat beter niet op die manier?

   Ik heb hem toegevoegd via de link van de site maar als de google servers eens uitvallen of de font bestaat niet meer gaat hij niet meer werken op mijn website omdat ik daar van af hang en als ik hem download heb ik dat niet dan blijft hij werken no matter what.

Nav