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

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 fout (Montserrat) toe in de head van je HTML-document.
  3. Koppel je eigen styles.css aan je HTML.

Stap 3: start CSS

Deze tekst is gemaakt met een class.
  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 naar #fffdff.
    • Pas de font-family aan naar Montserrat en vergeet je fallback font niet!
    • Zet de line-height op 1.6.
    • Zet scroll-behaviour op smooth.
  3. Maak een selector voor het body element → body { ... }
    Zet de margin op 0.
Deze tekst is ook gemaakt met een class.

Stap 4: vragen

  1. Wat doet normalize.css?
    Het zorgt ervoor dat je op eender welke browser start vanaf dezelfde layout en basis-css.
  2. Wat is een fallback font, wat doet het, welk heb je gekozen en waarom?
    Een fallback font is een lettertype die je zelf kiest als alternatief op het standaard ingesteld lettertype. Ik heb gekozen voor sans-serif omdat dit een gebruikelijk lettertype is.
  3. Hoe heb je het font toegevoegd en waarom doe je dat beter niet op die manier?
    Ik heb het toegevoegd via deze link. Ik heb Montserrat als lettertype ingesteld maar stel dat de google servers uitvallen dan valt de css terug op sans-serif. Het is dus een soort van reserve voor als de hoofdfont niet beschikbaar is.

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 een héél veel websites terug en is verplicht aanwezig in je portfolio.

Plaats hier een screenshot van jouw nav.