Labo 02

Indtroductieoefening

Start een nieuwe project in je IDE naar keuze

  1. Zorg voor index.html en styles.css.
  2. Pas je HTML lang attribuut aan.
  3. Geef je document de titel '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. 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 de 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 voor het root element → root { ... }
    • Pas de background color aan #fffdff.
    • Pas de font-family aan naar Montserrat en vergeet je frallback 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 body margin op 0.

Stap 4: Vragen

  1. Wat doet normalise.css ?
    Het zorgt voor consistente basisstijlen in alle browsers door standaardverschillen te normaliseren, zodat je design overal hetzelfde oogt.
  2. Wat is een fallback font, wat doet het, welk heb je gekozen en waarom?
    Een reserve-lettertype dat gebruikt wordt als het hoofdlettertype niet laadt. Ik koos sans-serif: altijd beschikbaar, goed leesbaar en modern.
  3. Hoe heb je het font toegevoegd en waarom doe je dat beter niet op die manier?
    Ik heb het font toegevoegd via Google Fonts met een link in de HTML. Dat is niet ideaal omdat het externe verzoeken naar Google stuurt, wat privacyproblemen kan geven, en omdat het trager en minder betrouwbaar is. Een betere manier is om het font lokaal te hosten en toe te voegen met @font-face.

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

Nav

Plaats hier een screenshot van jouw nav.