Labo 02

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 titel Labo 02

Stap 1: HTML

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

Stap 2: link-tags

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

Stap 3: start CSS

  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 nar Montserrat
    • 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?
    Dit zorgt dat kleine verschillen tussen browsers in de default css gelijk gemaakt worden.
  2. Wat is een fallback font, wat doet het, welk heb je gekozen en waarom?
    Een fallback font is een standaard font van de browser die wij als backup zetten. Dit zodat in geval dat de browser het font niet kan laden we niet naar times new romen gaan.

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 de ip héél veel websites terug en is verplicht aanwezig in je portfolio.