Labo 02

Introductieoefening

Start een nieuw project in je IDE naar keuze.

Zorg voor een index.html en styles.css.
Pas je HTML lang attribute aan.
Geeft 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 style.css toe aan je HTML.

Stap 3: start CSS

'Corrigeer' de box-sizing property van alle elementen en van alle ::before en ::after pseudo-elementen.
Zie theorie!
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-height op 1.6.
- Zet scroll-behaviour op smooth.
Maak een selector voor het body element → body { . . . }
Zet de margin op 0.

Stap 4: vragen

Normalize.css zorgt voor een default layout over alle browsers.
Een fallback font is een font dat geladen wordt wanneer de ingestelde font niet aanwezig of bruikbaar is. Ik heb voor sans-serif gekozen: dit is een default font en dus altijd bruikbaar door alle browsers.
Ik heb het font toegevoegd volgens een google embed. Het nadeel hiervan is dat google persoonlijke gegevens krijgt (IP) elke keer dat deze site bezocht wordt. Dit is niet GDPR compliant. In principe kan het ook zijn dat de hosting door Google ooit wegvalt waardoor deze links niet meer werken. Dan kan het font niet geladen worden.

Container

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