Web Fundamentals

Weergave

Introductie ​

Vorige week kon je kleur en lettertype zetten. Deze week leer je plaats innemen: hoe breed iets is, hoeveel ruimte er omheen zit, en waarom je inhoud niet van de ene schermrand naar de andere mag lopen.

Daarvoor heb je eerst de rest van de selectoren nodig. Die gaan precies over de dingen die je nu krijgt: lijsten, dozen, en elementen die ergens in iets anders zitten.

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:

  • elementen selecteren op hun toestand met een pseudo-class, zoals :hover en :focus-visible CORE_3.2
  • elementen selecteren op hun plaats met :first-child, :last-child en :nth-child() CORE_3.2
  • een deel van een element selecteren met een pseudo-element CORE_3.2
  • selectors combineren en groeperen, en combinators gebruiken: main p, main > p, h2 + p, h2 ~ p CORE_3.2
  • de specificity van een selector berekenen en voorspellen welke regel wint CORE_3.4
  • uitleggen waarom je !important en inline styles niet gebruikt CORE_3.4
  • het verschil uitleggen tussen px, em, rem, % en dvw/dvh, en weten wanneer je wat gebruikt CORE_3.5
  • de vier lagen van het box model benoemen: content, padding, border, margin CORE_3.3
  • uitleggen hoe een block box, een inline box en een inline-block box zich gedragen CORE_3.3
  • box-sizing: border-box toepassen en uitleggen welk probleem het oplost CORE_3.3
  • herkennen wanneer verticale marges samenvallen CORE_3.3
  • logical properties gebruiken in plaats van left en right CORE_3.3
  • een page container maken met max-width, margin-inline en padding-inline CORE_3.6
  • het box model van een element aflezen in de devtools CORE_3.10

Slides ​

Bronnen ​

Na deze les ​

  • Herlees deze pagina's en maak de oefeningen die je in de les niet gedaan hebt.
  • Open een site die je goed vindt en meet de container op in de devtools. Hoe breed is ze?
  • Werk labo 4 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.