Labo 03

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

Dit is een paragraaf direct na een H2, dus deze zou cursief moeten zijn door de CSS regel.

  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 pages links.
  4. Valideer je code regelmatig met de W3C-validator en met de aXe DevTool

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
  4. Test attribute selector: Mozilla CDN

Stap 3: start CSS

  1. 'Corrigeer' de box-sizing property van alle elementen.
  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 zorgt ervoor dat browsers (Chrome, Firefox, Safari) elementen beter weergeven en verwijdert ongewenste marges
  2. Wat is een fallback font?
    Een reservelettertype dat de browser gebruikt als het hoofdfont (Montserrat) niet geladen kan worden.
  3. Hoe heb je het font toegevoegd?
    Via een Google Fonts link in de head (CDN). Het is vaak beter om fonts self-hosted te gebruiken voor privacy (GDPR) en snelheid.

Oefening 1: Columns

Oefening 3: Cards