Labo 02

Introductieoefening

Start een nieuw project in je IDE naar keuze.

  1. Zorg voor een index.html en styles.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 hoefinhoud (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 past de ingoubouwde stijl van de webbrowser aan naar een algemene standaard stijl.
  2. Wat is een fallback font, wat doet het, welk heb je gekozen en waarom? Wanneer een font niet geladen kan worden, zal de fallback font gebruikt worden. In dit geval is sans-serif de fallback font, aangezien deze het meeste lijkt op Montserrat.

Container

Een container is een typisch hulpmiddel om te zorgen dat de inhoud van je size 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 screenshot van jouw nav.