Dit labo bestaat uit 4 stappen.
Labo 02
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
- je landmark regions niet!
-
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
- Koppel je eigen styles.css aan je HTML.
Stap 3: start CSS
-
'Corrigeer' de box sizing property van alle elementen en van alle ::before en ::after pseudo-elementen.
Zie theorie! -
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 de scroll-behavior op smooth.
-
Maak een selector voor het body element → body { ... }
Zet de margin op 0.
Stap 4: vragen
-
voor een consistente weergave van HTML-elementen in verschillende webbrowsers door nuttige standaardstijlen te behouden en browser-specifieke bugs en inconsistenties te corrigeren
-
Een fallback font is een alternatief lettertype dat wordt gebruikt wanneer het primaire lettertype niet kan worden geladen of niet alle benodigde tekens bevat, zodat de inhoud van een webpagina leesbaar blijft. ik heb als fallback sans-serif gekozen. En dat zorgt ervoor dat de tekst nog steeds leesbaar en consistent wordt weergegeven, ook als het primaire font niet beschikbaar is op het apparaat van de gebruiker of als bepaalde tekens ontbreken in het primaire font.
-
Ik heb de fallback font toegevoegd door bij het :root element de font-family aan te passen.
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 heel veel websites terug en is verplicht aanwezig in je portfolio.