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

Schrijf alle HTML die nodig is om het resultaat uit 'Figuur 1: stap 1' te bekomen

  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 HTML-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 alle ::after pseudo-elementen.
    Zie theorie!
  2. Maak een selector voor het root element → :root { … }
    • Pas de background-color aan naar #FFFDFF in oklch, niet RGB!
    • Pas de font-family aan naar Montserrat, vergeet het 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

Voeg in het HTML-document een extra stap toe: ‘Stap 4: vragen’. Noteer het antwoord op deze drie vragen.

  1. Wat doet normalize.css?
    Dit maakt de standaard browserstijlen gelijk, zodat je overal met dezelfde basis begint.
  2. Wat is een fallback font, wat doet het, welk heb je gekozen en waarom?
    Een fallback font is een reservelettertype dat gebruikt wordt als het ingestelde font niet geladen kan worden. Ik heb bv veranda als eerste fallback font gekozen en sans-serif als 2de. Omdat deze fonts bij de meeste apparaten zeker geïnstalleerd zijn.
  3. Hoe heb je het font toegevoegd en waarom doe je dat beter niet op die manier?
    Ik heb het font via een externe link (Google Fonts) in mijn HTML toegevoegd. Maar het is beter om het lokaal te hosten of met @font-face, zodat je niet afhankelijk bent van externe servers en zo vermijd je ook privacyproblemen en boetes.

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.

Nav