Labo 02

Introductieoefening

Start een nieuw project in je IDE naar keuze.

  1. Zorg voor een index.html en een styles.css.
  2. 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 voor het root element → :root { … }
  3. Maak een selector voor het body element → body { … }

Stap 4: vragen

  1. Wat doet normalize.css?

    Maakt standaard browser styling consistent over verschillende browsers heen, zodat elementen er overal hetzelfde uitzien.

  2. Wat is een fallback font, wat doet het, welk heb je gekozen en waarom?

    Een reservefont dat wordt gebruikt als het primaire font niet laadt.

  3. Hoe heb je het font toegevoegd en waarom doe je dat beter niet op die manier?

    De font die we gebruiken komt van Google Fonts. dit is slecht want dit komt met heel wat tracking wat je kunt vermijden door de font zelf 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 websites terug en is verplicht aanwezig in je portfolio.

Plaats hier een screenshot van jouw nav.