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 title “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 de W3C-validator en met de axe devtools.

Stap 2: link-tags

  1. Voeg normalize.css toe in de head van je HTML-document.
  2. Voeg een google font (Montserrat) toe in de head van 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 alle ::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, vergeet het 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

Stap 4: vragen

  1. Normalize.css word gebruikt om een standaard opmaak te creëren, dat los staat van de standaard opmaak van je favoriete browser. Zo worden inconsistenties van de opmaak van je html in de verschillende browsers vermeden.
  2. Een fallback font is een standaard font dat vrij wel iedere persoon geïnstalleerd heeft op hun apparaat. Dit is belangrijk wand als je een font kiest die je graag zou willen op je website is het niet altijd vanzelfsprekend dat een bezoeker van je website die geïnstalleerd heeft op hun apparaat. Je zou denken dit is geen probleem wand we gebruiken google fonts om deze in onze html te zetten. Maar wat denk je wat er gebeurd als deze niet geladen kan worden? Zoals je misschien wel of niet geraden hebt hij gebruikt de fall back fond. Als je dit niet hebt gedaan is het niet echt een probleem dan gaat hij de fond van je browser gebruiken. Maar je wilt dit in de meeste gevallen niet omdat deze van browser tot browser verschilt en die font meestal niet op de fond lijkt die je echt wilt. Daarom heb ik gekozen voor sans-serif als fallback font omdat deze lijkt op mijn geprefereerde font montserrat en zodat dit uniform is over alle browsers.
  3. Ik heb de code rechtstreeks van google fonts gehaald. Dit is geen goed idee wand google haalt persoonlijke data van jou hierdoor binnen. Ook is er iemand voor de rechter moeten komen omdat hij het ip adres van bezoekers op die manier naar de google servers stuurt zonder de toestemming van de bezoekers van zijn website. Dit is uitsluitend verboden van de AVG om zonder toestemming de ip van een persoon door te sturen naar in dit geval googles servers.

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 terug.