Labo 04

Opzetten

Start een nieuw project in projecten/labo04/oplossing/.

  1. Zorg voor een index.html en een styles.css.
  2. Pas je HTML lang attribuut aan.
  3. Geef je document de title 'Labo 04'.

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 les 2.
  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. Koppel je eigen styles.css aan je HTML.
  3. Volgorde is belangrijk. Cascade!

Stap 3: start CSS

  1. Neem de vaste start uit labo 3 over: je :root en je body.
  2. Corrigeer de box-sizing property van alle elementen en van alle ::before en ::after pseudo-elementen.
    Zie theorie!
  3. Je lettertype mag je hergebruiken uit labo 3, of download er een nieuw. Zelf hosten, uiteraard.

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.

Opdrachten

Geavanceerde selectoren, herbruikbare classes, links in al hun toestanden, en margin collapsing.