Labo 03

Introductieoefening

  1. Stap 1

    1. Start een nieuw project in je IDE naar keuze.
    2. Zorg voor een index.html en een styles.css
    3. Schrijf alle HTML, vergeet lang en titel niet

  2. Stap 2

    1. Voeg normalize.css toe in de head van je HTML-document.
    2. Voeg een google font (Fredoka) toe in de head van je HTML-document
    3. Koppel je eigen styles.css aan je HTML-document

  3. Stap 3

    1. 'Corrigeer' de box-sizing property van alle elementen en van alle ::before en ::after pseudo-elementen Zie theorie!
    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.
    4. Maak een .container
      • max-width: 80rem
      • Linker en rechter margin op auto, gebruik logical properties en values
      • Linker en rechter padding is 1rem, gebruik logical properties en values

  1. Oefening 1: Columns

  3. Oefening 3:Cards