Web Fundamentals

Weergave

Introductie ​

Je site heeft nu structuur en betekenis, maar is... basic.
Dat is niet erg: die HTML is de basis en die blijft staan. Wat er vanaf vandaag bijkomt, is een tweede bestand dat zegt hoe die inhoud er uit moet zien.

Lesdoelen ​

De codes verwijzen naar het MDN Curriculum voor junior webdevelopers, het overzicht dat we gebruiken om de inhoud van dit vak af te toetsen.

Na deze les kan je:

  • een CSS-rule lezen en schrijven: selector, property en value CORE_3.1
  • een stylesheet aan je pagina koppelen met een link-tag, en uitleggen waarom je geen internal of inline styles gebruikt CORE_3.1
  • uitleggen waarom de volgorde van je stylesheets telt, en normalize als eerste toevoegen CORE_3.1
  • elementen selecteren op tag, class, id en attribuut CORE_3.2
  • uitleggen wat er gebeurt als twee regels hetzelfde element bepalen CORE_3.4
  • de rangorde van specificity toepassen: id verslaat class verslaat element CORE_3.4
  • uitleggen welke properties overerven en waarom je ze op :root zet CORE_3.4
  • in de devtools aflezen welke regel wint en welke doorstreept staat CORE_3.10
  • kleuren schrijven in oklch() en uitleggen waarom dat beter is dan hsl() of hex CORE_4.1
  • het contrast van je kleurcombinatie controleren CORE_4.1 CORE_7.1
  • een lettertype instellen met een fallback CORE_4.1
  • uitleggen waarom je fonts zelf host in plaats van ze bij Google op te halen CORE_4.3

Slides ​

Bronnen ​

Na deze les ​

  • Herlees deze pagina's en maak de oefeningen die je in de les niet gedaan hebt.
  • Verken met oklch.com tot je aanvoelt wat lightness, chroma en hue doen.
  • Werk labo 3 af en zet het online.

Studietip

Maak een kapstok van elk hoofdstuk en subhoofdstuk, en hang alle begrippen en kernwoorden daaraan op. Vraag je bij alles af waarom het gegeven werd, en noteer elke waarschuwing apart.