Labo 02

Introductieoefeningen

Start een nieuw project in je IDE naar keuze.

  1. Zorg voor een index.html en een style.css
  2. pas je HTML lang attribuut aan.
  3. Geef je document de titel labo02

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 zijnsame 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 { ... }
    • 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 bode element → body { ... }
    Zet de magin op 0.
Dit is cursief

Stap 4: vragen

  1. Wat doet normalize.css?
    Het zorgt ervoor dat alle browsers dezelfde basisstijl gebruiken voor HTML-elementen, waardoor het altijd wordt werkt.
  2. Wat is een fallback font, wat doet het, welk heb je gekozen en waarom?
    Een fallback font is een alternatief lettertype dat wordt gebruikt als het primaire lettertype niet beschikbaar is. Ik heb 'sans-serif' gekozen als fallback omdat het een veelvoorkomend en leesbaar lettertype is dat goed past bij Montserrat.
  3. Hoe heb je het font toegevoegd en waarom doe je dat beter niet op die manier?
    De font word gebruikt via google en als google plat ligt dan is dit niet gaat de font op mijn website ook plat liggen.

Container

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

Plaats hier een screenshot van jouw nav.

Hallo dit staat cursief