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 atribuut 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

Stap 2: link-tags

  1. Voeg normalize.css toe in de head van je HTML-document
  2. Voeg een google font (Montserrat) toe aan 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 thoerie!
  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 de scroll-behavior op smooth.
  3. Maak een selector voor het body element -> body{...}
    Zet de margin op 0.

Stap 4: vragen

  1. Normalize.css zorgt voor een consistente basistijl, essentieel voor een uniforme gebruikservaring over verschillende toepassingen.
  2. Een fallback font zorgt voor een alternatief indien de eerste font niet geladen of weergegeven kan worden.

Container

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