Labo 02

Introductieoefening

Start een nieuw project in je IDE naar keuze.

  1. Zorg voor een index.html een 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 week1.
  3. Tip: de links in de navigatie zijn same page links.
  4. Valideer je code regelmatig met W3C-validator en met de aXe devtools

Stap 2: link-tags

  1. Voeg normalize.css toe aan 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-element
    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?
    • Deze zorgt ervoor dat alle css werkt op allerlei computers.
  2. Wat is een fallback font, wat doet het, welk heb je gekozen en waarom?
    • Dat zorgt ervoor dat als de default font niet kon worden geladen/gevonden, de computer automatisch het andere font kiest. In dit geval is dit sans-serif omdat de meeste computers dit wel standaard hebben.
  3. Hoe heb je het font toegevoegd en waarom doe je dat beter niet op die manier?
    • Via 3 links bovenaan in de head van het HTML bestand. DIt kan je beter niet doen omdat er naar de google servers wordt gepinged en zo weet google dat dat IP adres op die server zit en je dus kan tracken.

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.

Plaats hier een screenshoot van jouw nav.