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.csstoe 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 fond-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. Zet de margin op 0.

Stap 4: vragen

  1. Dit zorgt ervoor dat alle browsers dezelfde basis-stijl gebruiken.
  2. Het is een alternatief lettertype dat wordt gebruikt als het hoofdlettertype niet beschikbaar is. Ik koos sans-serif omdat het altijd beschikbaar is.
  3. Ik heb het font via Google Fonts toegevoegd. Het is beter dat dit niet op de root wordt gezet zonder variabelen omdat de meeste elementen het dan niet automatisch erven.

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

Screenshot van de navigatie