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 attribute aan.
  3. Geef je document de titel 'Labo 02'.

Stap 1: HTML

  1. Vergeet je landmark regio's niet!
  2. Deel je hoofdinhoud (main) op in sections Pas alles toe wat je hebt geleerd hebt in week 1
  3. Tip: de links in de navigatie zijn same 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 font (Montserrat) toe in de head van je HTML-document
  3. Koppel je eigen styles.css aan je HTML-document

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 body element → body { ... } Zet de margin op 0.

Stap 4: vragen

Het verwijdert browser specifieke css hierdoor is de css op alle browsers gelijk

Ik heb gekozen voor sans-serif omdat deze op alle toestellen bestaat. Een fallback font dient als back-up mocht het eerste font niet laden.

Ik heb het font toegevoegd in de :root. Het probleem is dat dit lage prioriteit heeft en makkelijk overschreven worden.

Container

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

Plaats hier een screenshot van jouw nav.