Labo 02

Introductieoefening

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

Stap 1: HTML

  1. Vergeet je landmark niet!
  2. Deel je hoofdinhoud(main) op in sections.
    Pas alles toe wat je geleerd hebt in week1.
  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 he 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 elle ::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 fant niet!
    • Zet de line-height op 1.6.
    • Zet scroll-behavior op smooth.
  3. Maak een selector voor het body element →r; body {...}
    Zet de margin op 0.

Stap 4: vragen

  1. Wat doet normalize.css?
    • Dit zorgt ervoor dat css werkt op alle aparaten.
  2. is een fallback font, wat doet het, welk heb je gekozen en waarom?
    • Dit is een font dat gebruikt word wanneer het hoofd font niet werkt.
    • >Ik heb sans-serif gekozen omdat dit een font is dat op elk apparaat werkt.
  3. Hoe heb je het font toegevoegd en waarom doe je dat beter niet op die manier?
    • Door 3 links in de header van mijn HTML te plaatsen. Dit is niet goed omdat dit moet pingen naar de servers van google.

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

Plaats hier een screenshot van jouw nav.