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 attribuut aan.
  3. Geef je document de titel 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.

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.

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.

screenshot navigatie

Stap 4: vragen

1. Wat doet normalize.css?

De normalise.css zorgt ervoor dat je elementen op eleke browser er hetzefde uitzien. De vorige reset.css haalde alle standaardstijlen weg maar normalize.css behoudt de nuttige standaardtijlen.

2. Wat is een fallback font, wat doet het,, welk heb je gekozen en waarom?

Het is vrij van zelfsprekend, als het gewenste font niet kan laden dan gaat hij terug vallen op dat ingestelde fallback font. ik heb sans-serif gekozen omdat Montserrat het gekozen font is ook sans-serif waardoor het beter gaat passen bij de rest van de stijl.

3. Hoe heb je het font toegevoegd en waarom doe je dat beter niet op die manier?

Ik heb dit gedaan via de embeded code die googlefont genereerd voor jou. Dit is niet de juiste manier omdat het trager is maar belangerijker illegaal in belgië is. Dit omdat googlefont niet voldoet aan de privacy wetten van België.