Labo02

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 'labo02'.

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 de HTML-validator en met de axe browser extension

Stap 2: link-tags

1. Voeg normalize.css toe in de head van je HTML-document
2. Voeg een google front (Montserrat) toe in de head van je HTML-document.
3. Koppel je eigen style.css aan je HTML.

Start CSS

1. 'Corrigeer' de box-sizing van alle elementen en van alle ::before en ::after pseudo-elementen.
   Zie theorie!
2. Maak een selector voor het root element → :root {...}
   • Pas de background-color aan naar #fffdff
   • Pas de font-family aan naar Montserrat en vergeet je fallback font niet!
   • Zet de line-heigt op 1.6.
   • Zet scroll-behavior op smooth
3. Maak een selector voor een body element → body {...}
   
   Zet de margin op 0

Stap 4: Vragen

1. Wat doet normalize.css?
   Het zorgt voor conistante cross-browser die blijft behouden
2. Wat is een fallback font, wat doet het, welk heb je gekozen en waarom?
   Een fallback is een alternatieve oplossing als de font niet beschikbaar is. Ik heb gekozen voor sans serif omdat je die altijd moet gebruiken.
3. Hoe heb je het font toegevoegd en waarom doe je dat beter niet op die manier?
   Ik heb deze toegevoegd door eerst de font op te zoeken en die dan in main bij te voegen. daarna via de css heb ik dan mijn font-family gekozen.

container

Een container is een typisch hulpmiddel om te zorgen dat de inhoud van je site niet uitgesmeerd wirdt over je volledige schermbreedte.Je vindt die op héél veel websites terug is verplicht aanwezig in je portfolio.

NAV