Labo 02

Introductieoefening

Start een nieuw project in je IDE naar keuze.

  • Zorg voor een index.html en een styles.css.
  • pas je HTML lang attribuut aan.
  • 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 ind e navigatie zijn same page links.
  4. Valideer je code regelmatig met de W3C-Validatoren me de aXe devtools

Stap 2: links-tags

  • Voeg normalize.css toe in de head van je HTML-document.
  • Voeg een google front (Montserrat) toe in de head van je HTML-document.
  • Koppel je eigen styles.css aan je HTML

Stap 3: start CSS

  • 'Corrigeer' de box sizing property van alle elementen en van alle ::before en ::after pseudo-elementen. Zie theorie!
  • Maak een slector voor de root element → :root { ... }
    • Pas de background-color aan naar #fffdff.
    • Pas de font-family aan naar Monstserrt env ergget je fallback font niet!
    • Zet de line-height op 1.6.
    • Zet scroll-behavior op smooth.
  • Maak een selector voor het body element → body { ... }
    Zet de margin op 0.

Stap 4: vragen

  • Wat doet normalize.css
    normalize.css is een een CSS bestand dat er voor zorgt dat de html op elke browser hetzelfde wordt weergegeven.
  • Wat is een fallback font, wat doet het, welk heb je gekozen en waarom?
    een fallback font is een font dat er voor zorft als jouw gekozen front niet werkt dat je een tweede optie van front hebt , door het fallback font sans-serif te kiezen weet je dat die beschikbaar is ongeacht de browser want iedere browser heeft een andere set aan fonts

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 websitesterug en is verplicht aanwezig in je portfolio.