Kennismakingsoefening
De kennismakingsoefening draait om kennismaken. Kennismaken met elkaar en kennismaken met de CSS-technieken.
De oefening
Elk clubje is een thema toegewezen met daarin een aantal CSS-technieken. Met je clubje ga je de hele woensdag experimenteren met de technieken in je thema. Gebruik als content voor je experiment(en) iets persoonlijks van de leden in je clubje dat niet alom bekend is. Om elkaar zo gelijk ook weer wat beter te leren kennen.
De uitkomst van jullie experiment(en) presenteer je donderdag aan de andere leden van je squad. Het doel van de presentaties is om iedereen enthousiast te maken over de verschillende CSS-technieken (om die daarna verder uit te diepen bij het werken aan de eindopdracht). Introduceer je thema en css-technieken, en laat vooral ook lekker veel code zien. In totaal heb je 20 minuten voor de presentatie (inclusief vragen).
De thema's
Thema: Context
Clubjes: 🤖r2d2 A1 en 🐙Squid A1
- Andere media features dan width en height, bijv. prefers-color-scheme (dark by default?) of prefers-reduced-motion (en er is zo veel meer!)
- Andere media type dan screen, bijv. print (helemaal leuk i.c.m. princexml)
- Toegankelijkheid. Kijk bijv. in a11y checklist waar CSS kan bijdragen aan een betere toegankelijkheid
- De mogelijkheden van writing-mode (Jen Simmons over Writing Modes).
- Uitdaging: Quantity Queries for CSS
Thema: Stiekem programmeren
Clubjes: 🤖r2d2 A2 en 🐙Squid A2
- calc() (the complete guide)
- Custom properties: An introduction
- Custom properties: Rekenen met (unit-less) custom properties
- Custom properties: Fallbacks
- Custom properties: Logica (samples by Ana Tudor - pas op nerdy))
- Custom properties: Ook gewoon handig voor themes
- Units verder dan px, em en rem, bijv. vmin/max, ch, cm...
- min(), max() en clamp()
- Uitdaging: Quantity Queries for CSS
Thema: Selectoren
Clubjes: 🤖r2d2 B1 en 🐙Squid B1
- 'Interactie'-selectors anders dan :hover en :focus, bijv. :valid, :checked, :in-range, :invalid i.c.m. forms (voorzichtige start en dan PPK over form validation en meer moois van Chris Coyier)
- 'Parent'-selectors, bijv. :focus-within en :valid
- ::before en ::after (om te stylen by Eric Meyer of i.c.m. data-attributen of voor spicy image overlays)
- Andere onterecht onbeminde selectors (check de almanac)
- Uitdaging: Maak een betere selector-quiz (met prijzen :-)
Thema: Lay-out
Clubjes: 🤖r2d2 B2 en 🐙Squid B2
- Grid - bijv. named areas en named lines
- Grid - voor no-media-queries-responsive-design (Jen Simmon's Layout Land)
- Wanneer grid, flexbox, float of multicolumn
- Tekst rondom shapes
- Parallax (robuster met Sticky)
- Uitdaging: Geanimeerde shapes
Thema: Transform & Animeren
Clubjes: 🤖r2d2 C1 en 🐙Squid C1
- Transforms chainen (de volgorde doet er toe)
- 3D Transforms (perspective basics by Chris Coyer en meer advanced 3D by Ana Tudor)
- Animeren (samples op sinds1971.nl)
- Negatieve delays - transition en animation (cool css animation en meer css animation tricks)
- Motion-path (Get Moving by dan Wilson)
- Uitdaging: 3D animeren
Thema: Effecten
Clubjes: 🤖r2d2 C2 en 🐙Squid C2
- Clip-path en Mask (samples by Chris Coyier)
- Blend-mode (the basics en ze zijn te chainen)
- CSS-filters of de grote broer SVG-filters
- (Mulitple) gradients - linear, radial, conic, repeating (the basics en Lea's Gallery)
- Uitdaging: Effecten animeren
- Nog een uitdaging: de artikelen van Ana Tudor!
Planning & begeleiding
De planning voor de eerste twee dagen (en de rest van het programma) vind je in de Excel in Teams. De docenten lopen af en toe een rondje langs alle clubjes en zijn verder in sluimerstand aanwezig. Geef een seintje (in het Teams channel van het vak) als je een vraag hebt - of trots je werk wilt laten zien. Dan starten we op.
