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'.

Stap1: HTML

  1. Vergeet je landmark regions niet!
  2. Deel je hoofdinhoud (main) op in sections.
    Pas alles toe zat je geleerd hebt in week 1
  3. tip: de links in de navigatie zijn same page links.
  4. Valideer je code regelmatig met de W3-validator en met de aXe devtools.

Stap 2: start CSS

  1. Voeg normalize.css toe in de head van je HTML-document
  2. voeg een google font (Monsterrat toe in de head van je HTML-document.
  3. Koppel je eigen styles.css aan je HTML.

Stap3

  1. Corrigeer de box-sizing property van alle elementen en van alle ::before en alle ::after pseudo-elementen.
    Zie theorie!
  2. Maak een selector voor het element → :root {...}
    • Pas de background-color aan naar #fffdff.
    • 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. reset of normaliseert de standaard stijlen van browsers.
  2. Een fallbackf font is een font die je kiest als er op een manier de juiste font niet verkrijgbaar is. Ik heb gekozen voor sans-serif omdat dit de meest standaard font die er is.
  3. Via links met google font maar dit doe je beter niet omdat dit volgens de privacy wet niet mag.

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