Beschrijving
Introductieoefening
Start een nieuw project in je IDE naar keuze.
- Zorg voor een index.html en een styles.css.
- Pas je HTML lang attribuut aan.
- Geef je document de title "Labo 02".
Stap 1: HTML
Schrijf alle HTML die nodig is om het resultaat uit Figuur 1 te bekomen.
- Vergeet je landmark regions niet! (header, main, footer...)
- Deel je hoofdinhoud (main) op in sections. Pas alles toe wat je geleerd hebt in week 1.
- Tip: de links in de navigatie zijn same page links.
- Valideer je code regelmatig met de W3C-validator en met de aXe devtools.
Stap 2: link-tags
- Voeg normalize.css toe in de head van je HTML-document.
- Voeg een google font (Montserrat) toe in de head van je HTML-document.
- Koppel je eigen styles.css aan je HTML. Let op de volgorde (Cascade).
Stap 3: start CSS
- Corrigeer de box-sizing property van alle elementen en van alle ::before en ::after pseudo-elementen.
-
Maak een selector voor het root element:
- Pas de background-color aan naar #FFFDFF in oklch.
- Pas de font-family aan naar Montserrat, vergeet het fallback font niet!
- Zet de line-height op 1.6.
- Zet scroll-behavior op smooth.
- Maak een selector voor het body element en 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:
- Wat doet normalize.css?
- Wat is een fallback font, wat doet het, welk heb je gekozen en waarom?
- Hoe heb je het font toegevoegd en waarom doe je dat beter niet op die manier?
Doelstellingen van de oefening
- Je kunt vlot tag-, class-, id- en pseudo-selectoren gebruiken.
- Je kunt tekst- en achtergrondkleuren toepassen.
- Je kunt herbruikbare classes maken.
- Je gebruikt en begrijpt de functie van normalize.css.
- Je hebt inzicht in het box-model en kunt de box-sizing property toepassen.
Reflectie
-
Wauw!
DE HTML was vooral copy paste van de vorige opdracht.
-
Au!
Veel pruts werk aan de CSS van de opdracht.
Gerelateerde links
Hulpmiddelen voor deze oefening: