Web Fundamentals

Weergave

Introductie ​

Tot nu stond alles onder elkaar, in de volgorde van je HTML. Deze week haal je elementen uit die volgorde: naast elkaar met flexbox, bovenop elkaar met positioning.

Daarna krijg je drie dingen die je stylesheet leesbaar houden nu ze lang begint te worden: logical properties, variabelen en nesting.

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:

  • het verschil uitleggen tussen display: none, visibility: hidden en het hidden attribuut CORE_3.3
  • een titel visueel verbergen en beschikbaar houden voor hulpsoftware CORE_7.2 CORE_7.4
  • de vijf waarden van position benoemen en voorspellen wat ze doen CORE_5.3
  • uitleggen wat een containing block is en hoe je er zelf een maakt CORE_5.3
  • de stapelvolgorde van elementen voorspellen en bijsturen met z-index CORE_5.3
  • uitleggen waarom je positioning niet voor je paginaopbouw gebruikt CORE_5.3
  • een flex container maken en de zes container-properties toepassen CORE_5.4
  • de vijf item-properties toepassen, en flex als shorthand schrijven CORE_5.4
  • de main axis en de cross axis aanwijzen bij elke flex-direction CORE_5.4
  • een kaartenlijst bouwen waarvan de hele kaart klikbaar is CORE_5.4 CORE_7.2
  • logical properties gebruiken en uitleggen waarom ze bestaan CORE_3.3
  • CSS custom properties definiëren, overerven en overschrijven CORE_3.5
  • een stylesheet herschrijven met CSS nesting CORE_3.1
  • een transition schrijven en ze op de juiste state zetten EXT_1

Slides ​

Bronnen ​

Na deze les ​

  • Herlees deze pagina's en maak de oefeningen die je in de les niet gedaan hebt.
  • Speel Flexbox Froggy uit.
  • Open een site die je goed vindt, zoek een rij kaarten en kijk in de devtools hoe die gebouwd is.
  • Werk labo 5 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.