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

Schrijf alle HTML die nodig is om het resultaat uit 'Figuur 1: stap 1' te bekomen.

  1. Vergeet je landmark regions niet (header, main, footer...).
  2. Deel je hoofdinhoud (main) op in sections.
  3. Pas alles toe wat je geleerd hebt in week 1.
  4. Tip: de links in de navigatie zijn same page links .
  5. 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.
  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 ervoor dat alle standaard HTML-elementen in verschillende browsers ongeveer dezelfde basisopmaak hebben. Het haalt de gekke verschillen tussen Chrome, Firefox, Edge, … weg zodat jij met een consistente startstijl kan werken.
  2. Wat is een fallback font, wat doet het, welk heb je gekozen en waarom?
    Een fallback font is een reserve-lettertype dat gebruikt wordt als het hoofdlettertype (bij mij Montserrat) niet kan geladen worden. De tekst blijft dan wel leesbaar. Ik gebruik als fallback system-ui, sans-serif, zodat de browser een standaard schreefloos font kiest dat goed leesbaar is op elk toestel.
  3. Hoe heb je het font toegevoegd en waarom doe je dat beter niet op die manier?
    Ik heb Montserrat toegevoegd via een externe link naar Google Fonts in de <head>. Dat is snel en makkelijk, maar beter is om het font zelf te hosten. Dan ben je minder afhankelijk van externe servers, heb je meer controle over performance en is het beter voor privacy.

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.

Plaats hier een screenshot van jouw nav.