Hoofdnavigatie

Labo 02

Introductie oefening

Start een nieuw project in je IDE naar keuze.

  1. Zorg voor een index.html en een styles.css.
  2. je HTML lang attribuut aan.
  3. Geef je document de title "Labo 02".

Stap 1: HTML

  • Vergeet je landmark regions niet!
  • Deel je hoofddoel (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.

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 aan ::root { ... }
    • Pas de background-color aan naar #ffffff.
    • 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.
  • Maak een selector voor het body element body { ... }
  • Zet de margin op 0.

Stap 4: vragen

  1. Wat doet normalize.css ?

    normalize.css is een CSS-bestand dat ervoor zorgt dat browsers elementen consistenter weergeven. Het reset niet alle standaard stijlen, zoals een CSS-reset zou doen, maar normaliseert of corrigeert alleen de verschillen in standaard stijlen tussen browsers. Hierdoor krijg je een meer uniforme basis voor het bouwen van websites, zonder dat je belangrijke standaardstijlen (zoals marges of headings) volledig verliest.

  2. Wat is een fallback font, wat doet het, welk heb je gekozen en waarom?

    Een fallback font is een alternatief lettertype dat wordt gebruikt als het primaire lettertype niet beschikbaar is. Dit voorkomt dat tekst onleesbaar wordt als een font niet kan worden geladen. Ik zelf koos voor Monsserat omdat dat ik dit een mooi en leesbaar font vind.

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.