• Voorbereiding
  • Columns
  • Nav
  • Cards

Labo 03

Voorbereiding

stap1

  1. Maak een nieuw project.
    zorg voor een index.html en styles.css
  2. Schrijf alle HTML, vergeet lang en title niet

stap2

  1. Voeg normalize.css toe via een link-tag in de head
    rel="stylesheet", href="https://unpkg.com/@csstools/normalize.css"
  2. Voeg eeen google font toe in de head(Fredoka)
  3. Schrijf alle HTML, vergeet lang en title niet

stap3: CSS

  1. 'Corrigeer'de box-sizing property van alle elementen en van alle ::before en alle ::after pseudo-elementen.
  2. Maak een :root selector
    • Pas de font-family aan Fredoka en vergeet je font fallback niet!
    • Pas de line-height aan naar 1.6
    • Pas de scroll-behavior aan naar 'smooth'
    • Maak de variabelen --bg: #FFFDFF en --primary: #202026
    • Gebruik die variabelen voor de achtergrond kleur en de tekstkleur
  3. Maak een body selector, zet de margin op 0
  4. Maak een .container
    • max-width: 80rem
    • linker en rechter margin is auto, gebruik de logical properties en values
    • linker en rechter padding is 1rem, gebruik de logical properties en values

Oefening 1: Columns

hallo
hey

Oefening 2: Nav

Navigatieoefening

  • Portfolio of Someone
  • Home
  • About
  • Nothing
  • Contact

Oefening 3: Cards

  • Card title 1

    Card title Lorem ipsum color sit amet.

    Read more about title 1 Read more about title 1

  • Card title 2

    Card title Lorem ipsum color sit amet.

    Read more about title 2 Read more about title 1

  • Card title 3

    Card title Lorem ipsum color sit amet.

    Read more about title 3 Read more about title 1

  • Card title 4

    Card title Lorem ipsum color sit amet.

    Read more about title 4 Read more about title 1

© 2025