Labo 02

Introductieoefening

Start een nieuw project in je IDE naar keuze.

  1. Zorg voor een index.html en een style.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!
  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-validator en 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 ::after pseudo-elementen.
    Zie theorie!
  2. Maak een selector vaan 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-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?
    Normalize.css is een CSS-bestand dat de standaardstijlen van HTML-elementen in verschillende browsers gelijkmaakt. Het zorgt ervoor dat elementen zoals koppen, paragrafen en lijsten er consistent uitzien, ongeacht de browser of het besturingssysteem.
  2. Wat is een fallback font, wat doet het, welk heb je gekozen en waarom?
    Een fallback font is een alternatief lettertype dat wordt gebruikt wanneer het primaire lettertype niet beschikbaar is op het systeem van de gebruiker. Het zorgt ervoor dat de tekst nog steeds leesbaar blijft, zelfs als het gewenste lettertype niet kan worden geladen. Ik heb gekozen voor Arial als fallback font omdat het een veelgebruikt en algemeen beschikbaar lettertype is dat goed leesbaar is op verschillende apparaten en schermformaten.
  3. Hoe heb je het font toegevoegd en waarom doe je dat beter niet op die manier?
    Ik heb het font toegevoegd via een link naar Google Fonts in de head van mijn HTML-document. Dit is echter niet de beste manier omdat het afhankelijk is van een externe bron en de laadtijd van de pagina kan beïnvloeden. Een betere manier zou zijn om het font te downloaden en lokaal te hosten.

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 website terug en is verplicht aanwezig in je portfolio.

Plaats hier een screenshot van jouw nav.