Labo 02

Introductieoefening

Start een nieuw project in je IDE naar keuze.

  1. Zorg voor een index.html en een style.css
  2. Pas je HTML lang attribute 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 de w3c validator en met de aXe devtools

Stap 2: Link-tags

  1. Voeg normalize.css toe in de head van je HTML-pagina.
  2. Voeg een google font(Montserrat) toe in de head van je hHTML-document.
  3. Koppel je eigen-style.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 naar Monserrat en vergeet je fallback font niet!
    • Zet de line-height op 1.6.
    • Zet de 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:
    Zorgt voor een consistente weergave van de HTML-elementen in verschillende webbrowsers.
  2. Wat is een fallback font, wat doet het, welke heb je gekozen en waarom:
    Een fallback font is een lettertype die je gebruikt als backup als de gegeven lettertype niet inlaadt.
    Ik heb gekozen voor de sans-serif lettertype omdat er standaard op veel besturingssystemen sans-serif fonts staan.
  3. Hoe heb je het font toegevoegd en waarom doe je dat beter niet op die manier:
    Ik heb het font toegevoegd via de code die beschikbaar was via google fonts en bovenaan in mijn head geplaatst.
    Het probleem is, als de gebruiker offline gaat, dan kan de browser het bestand niet ophalen, tenzij het in de cache staat.

Container

Een container is een typisch hulpmiddel om te zorgen dat de inhoud van je site niet uitgesmeerd wordt over volledige schermbreedte. Je vindt die op héél
Veel websites terug en is verplicht aanwezig in je portfolio.