Labo 02

Introductieoefening

Start een nieuw project in je IDE naar keuze.

Deze zin bevat belangrijke info over Labo 02.

  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

  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 style.css aan je HTML.

Stap 3: start CSS

  1. 'Configureer' 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.
    • Pas de font-family aan naar Montserrat en vergeet je fallback font niet!
    • Zet de line-height op 1.6.
    • Zet de scroll-behaviour op smooth.
  3. Maak een selector voor het body element -> body {...}
    Zet de margin op 0.

Stap 4: vragen

Wat doet normalize.css?
Normalize.css zorgt ervoor dat browsers een consistente basisstijl gebruiken, waardoor verschillen tussen browsers worden verminderd.
Wat is een fallback font, wat doet het en waarom doe je dat beter niet op die manier?
Een fallback font is een alternatief lettertype dat wordt gebruikt als het primaire lettertype niet beschikbaar is. Het zorgt ervoor dat tekst leesbaar blijft, maar het is beter om meerdere fallback fonts te specificeren voor betere compatibiliteit en consistentie.
Hoe heb je het font toegevoegd en waarom doe je dat beter niet op die manier?
Het font is toegevoegd via een link naar Google Fonts in de head van het HTML-document. Het is beter om dit te doen omdat het gemakkelijk toegankelijk is en zorgt voor snelle laadtijden, maar het kan afhankelijk zijn van externe bronnen.

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.