Labo 02

Introductieoefening

Start een nieuw project in je IDE naar keuze

  1. Zorg 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 regio's 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 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 all ::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.

Stap 4: Vragen

  1. Wat doet normalize.css?
    • Het zorgt ervoor dat de stijling zich behoud ook bij andere browsers?
  2. Wat is een fallback font, wat doet het, welk heb je gekozen en waarom?
    • Dat is het font dat word gebruikt als de eerste font niet werkt. Ik koos sans-serif omdat het het meeste lijkt op Montserrat.
  3. Hoe heb je het font toegevoegd en waarom doe je dat beter niet op die manier?
    • Ik heb de links in een embed in de HTML gezet. Door het gebruiken van die font zo, kan er een boete komen van €250.000

Plaats hier een screenshot van jouw nav:

Nav screenshot