Labo 03

Voorbereiding

Stap 1

  1. Maak een nieuw project.
    Zorg voor een index.html en een styles.css
  2. Schrijf alle HTML. Vergeet lang en title niet.

Stap 2

  1. Voeg normalize.css via een link-tag in de head
    rel="stylesheet". href="https://unpkg.com/@csstools/normalize.css"
  2. Voeg een google font toe in de head van(Fredoka)
  3. Koppel je eigen styles.css aan je HTML.

Stap 3: CSS

  1. 'Corrigeer' de box-sizing property van alle elementen en van alle ::before en ::after pseudo-elementen.
  2. Maak een root selector
    • as de font-family aan naar Fredoka en vergeet je fallback font niet!
    • Pas de line-height aan naar 1.6.
    • Zet scroll-behavior op smooth.
    • Maak variabelen bg:oklch(0.99 0.003 325) en primary: oklch(0.25 0.01 325)
    • Gebruik de variabelen voor de achtergrondkleur en de tekstkleur
  3. Maak een body selector, zet de margin op 0
  4. Maak een .container
    • max-width: 80cm
    • linker en rechter margin op auto. gebruik logical properties en values.
    • linker en recher padding is 1rem, gebruik logical properties en values.

Stap 4: vragen

  1. Wat doet normalize.css?
    Normalize.css zorgt voor consistente cross-browser default styling en die blijft ook default betekinis behouden.
  2. Wat is een fallback font, wat doet het, welk heb je gekozen en waarom?
    Een fallback font is een alternatief lettertype dat een browser gebruikt als het primaire lettertype niet beschikbaar is, niet geladen kan worden, of de benodigde tekens niet bevat.
    Ik heb voor sans-serif gekozen omdat het vanuit minder pixels opgebouwd is, wat zorgt voor helderheid op lage resoluties.
  3. Hoe heb je het font toegevoegd en waarom doe je dat beter niet op die manier?
    Ik heb die toegevoegd met een link omdat dit problemen kan veroorzaken met gemengde content, wat ervoor kan zorgen dat het lettertype niet correct laadt.

Oefening 1: Columns