Labo 03

Introductieoefening

Start een nieuw project in je IDE naar keuze.

  1. 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.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

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

  1. Wat doet normalize.css

    normalize.css zorgt ervoor dat je website op elke browser er hetzelfde uitziet. Dit doet hij door dingen te restarten, uit te zetten, restarten, ...

  2. Wat is een fallback font, wat doet het, welk heb je gekozen en waarom?
    Een fallback font is een font die gebruikt wordt op je website als je origineel font niet kan
    inladen. Door bijvoorbeeld problemen bij google. Ik heb Arial gekozen aangezien elk systeem dit font
    lokaal heeft staan
  3. Hoe heb je het font toegevoegd en waarom doe je dat beter niet op die manier?
    Ik heb deze toegevoegd via de head in mijn html en dan aanpassingen gedaan in mijn stylesheet.

Container

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

Plaats hier een screenshot van jouw nav.

Oefening 1: Columns

Oefening 2: Nav

Oefening 3: Cards