Wij vinden het web fascinerend. De laatste jaren is CSS een volwassen en zeer krachtige taal geworden (niet langer een bottleneck - integendeel). Veel van de (nieuwe) CSS-lekkernijen worden echter nog niet ten volle benut. Sommige delen van de spec worden onterecht (nog) niet bemind, andere delen zijn zo groot en complex dat we mogelijkheden nog niet hebben doorgrond. Aan jou de mooie opdracht om de onontgonnen delen van de CSS-wereld in kaart te brengen.
In dit vierweekse vak ga je experimenteren met (voor jou) nieuwe CSS technieken - om daarna/mee een innovatieve, experimentele én aangename ervaring te creëren - met vanilla CSS en HTML dus (frameworks, preprocessors, libraries en JS zijn niet toegestaan).
Nb. Het experiment wordt gewaardeerd - zelfs/zeker als het niet (helemaal) lukt. Voel je vrij om verder te gaan dan de CSS-technieken die je al beheerst.
- 🔱 Fork deze repository
- ✅ Enroll je voor de minor via de courselector (dan kun je je werk straks ook op DLO opleveren)
- 🎥 Camera's aan tijdens lessen en co (zorg dat je webcam werkt)
- 📒 Bekijk het programma (pdf 30MB) en de kennismakingsoefening alvast even
Het vak bestaat uit:
De beoordelingscriteria voor de eindopdracht op een rijte.
Schrijf je in de excel zowel voor woensdag als donderdag in voor een themasessie naar je keuze (1 per dag):
Het vak beslaat 4 weken. Bekijk de kick-off presentatie (pdf 30MB).
In Teams vind je de Excel met de indeling en planning. Daar schrijf je je ook in voor themasessies en het eindgesprek.
Colleges, lessen en gesprekken vinden plaats in Teams.
- Vasilis van Gemert
- Thijs Spijker
- Sanne 't Hooft
- Leonie Smits
- Je kunt experimenteren met (voor jou) nieuwe css-technieken - om de mogelijkheden op waarde te schatten en te gebruiken waar gepast.
- Je hebt begrip van de volle kracht en mogelijkheden van CSS. Je laat zien dat CSS meer kan dan allen web pages 'stylen'.
- Je hebt begrip van de interactie-technieken van CSS (en HTML). De UX is aangenaam bruikbaar binnen de gekozen context(en).
- Je hebt begrip hoe progressive enhancement elegant toe te passen. Je laat zien dat je cascade, inheritance en specificity kunt toepassen.
Het eerste uitgangspunt is dat je geen ID's en classes gebruikt. Niet omdat ze niet nuttig zijn, maar om te oefenen met de vele CSS selectoren die je tot je beschikking hebt. ID's mag je alleen gebruiken om de :target selector te triggeren. En als het echt echt echt niet anders kan, heb je permissie om een paar classes toe te voegen.
Een tweede uitgangspunt is dat je geen JS gebruikt (i.i.g. zo min mogelijk - het vak heet niet voor niets CSS to the Rescue). Wat met CSS en/of HTML kan mag je niet met JS realiseren en het is niet toegestaan om CSS properties met JS aan te passen. We vinden het daarentegen wel interessant dat je verkent waar JS en CSS elkaar raken/versterken, bijv. het uitlezen en aanpassen van CSS custom properties, of bijv. de animationstart, animationcancel, animationiteration en animationend events gebruiken.