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 die title 'Labo 02'.

Stap 1: HTML

  1. Vergeet je landmark regions niet!
  2. Deel je hoofdinhoud (main) op in sections. Pas alles toe wat we geleerd hebben in week 1.
  3. Tip: de links in de navigatie zijn same page links.
  4. Valideer je code regelmatig met de W3C-Validtor en met de aXe DevTools

Stap 2: link-tags

  1. Voeg normalize.csstoe in je head van je HTML-document.
  2. Voeg een google font (Montserrat) toe in je 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 en ::after psuedo-elementen. Zie theorie!
  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 scroll-behavior op smooth.
  3. Maak een selector voor het body element → body { ... }. Zet de margin op 0.

Stap 4: Vragen

Wat doet normalize.css?
Het wist alle standaardinstellingen die normaal elke soort besturingssysteem toepast op webpagina's zoals lettertypen
Wat is een fallback font, wat doet het, welk heb je gekozen en waarom?
Als de eerste font niet gedownload kan worden, dan kiest css voo een alternatieve lettertype die jij hebt gekozen.

Container

Een container is een typisch hulpmiddel om te zorgen dat de inhoud van he site niet uitgesmeerd wordt over je volledige schermbreedte. Je vindt die op héélveel websites terug en is verplicht aanwezig in je portfolio.

Nav

Plaats hier een screenshot van jouw nav.