css-challenges

CSS (en co) challenges

Op dinsdagen kennismaken en oefenen met CSS (en soms met JS). Soms is het onderwerp meer advanced en zal de nadruk meer op experimenteren liggen, soms is het onderwerp introducerend en ligt de nadruk meer op kennismaken en oefenen. Om de verworven kennis en vaardigheden daarna verder uit te proberen in je eigen werk.


Planning

dinsdag 13 mei

⏰ ⸺ 9:30 - ca 11:30 uur
🛴 ⸺ challenge 13: GSAP intro
📊 ⸺ niveau: medium tot gevorderden
🙋 ⸺ voor: even aanmelden - max 24

dinsdag 20 mei

⏰ ⸺ 9:30 - ca 11:30 uur
🛵 ⸺ challenge 14: GSAP the real thing
📊 ⸺ niveau: medium tot gevorderden
🙋 ⸺ voor: even aanmelden - max 24

Done

dinsdag 15 april

⏰ ⸺ 9:30 - ca 11:30 uur
🎰 ⸺ challenge 12: customizable select
📊 ⸺ niveau: medium tot gevorderden
🙋 ⸺ voor: even aanmelden - max 24

dinsdag 25 maart

⏰ ⸺ 9:30 - ca 11:30 uur
🪤 ⸺ challenge 11: container queries & units
📊 ⸺ niveau: medium tot gevorderden
🙋 ⸺ voor: even aanmelden - max 24

dinsdag 11 feb

⏰ ⸺ 9:30 - ca 11:30 uur
⚗️ ⸺ challenge 10: high-def colors
📊 ⸺ niveau: starters tot gevorderden
🙋 ⸺ voor: even aanmelden - max 24

dinsdag 4 feb

⏰ ⸺ 9:30 - ca 11:30 uur
🪄 ⸺ challenge 9: :has()
📊 ⸺ niveau: medium tot gevorderden
🙋 ⸺ voor: even aanmelden - max 24

dinsdag 3 dec

⏰ ⸺ 9:30 - ca 11:30 uur
🍱 ⸺ challenge 8: grid v2
📊 ⸺ niveau: van starters tot gevorderden
🙋 ⸺ voor: even aanmelden - max 24

dinsdag 26 nov

⏰ ⸺ 9:30 - ca 11:30 uur
🎛️ ⸺ challenge 7: states ( en :has() )
📊 ⸺ niveau: van starters tot wizards
🙋 ⸺ voor: even aanmelden - max 24

dinsdag 19 nov

⏰ ⸺ 9:30 - ca 11:30 uur
🧑‍🎨 ⸺ challenge 6: fonts en font-properties
📊 ⸺ niveau: starters en verder
🙋 ⸺ voor: even aanmelden - max 24

dinsdag 15 okt

⏰ ⸺ 9:30 - ca 11:30 uur
🍔 ⸺ challenge 5: position
📊 ⸺ niveau: starters en wat verder
🙋 ⸺ voor: even aanmelden - max 24

dinsdag 1 okt

⏰ ⸺ 9:30 - ca 11:30 uur
🏋️ ⸺ challenge 4: flexbox
📊 ⸺ niveau: starters
🙋 ⸺ voor: even aanmelden - max 24

dinsdag 24 sep

⏰ ⸺ 9:30 - ca 11:30 uur
🌈 ⸺ challenge 3: gradients
📊 ⸺ niveau: van starters tot wizard
🙋 ⸺ voor: even aanmelden - max 24

dinsdag 17 sep

⏰ ⸺ 9:30 - ca 11:30 uur
🐛 ⸺ challenge 2: transform en transities
📊 ⸺ niveau: all
🙋 ⸺ voor: all

dinsdag 10 sep

⏰ ⸺ 9:30 - ca 11:30 uur
🍱 ⸺ challenge 1: grid
📊 ⸺ niveau: all
🙋 ⸺ voor: all


Overall CSS bronnen

🎯 ⸺ CSS almanac - overzicht van selectors en properties (CSS tricks)
🎯 ⸺ CSS weekly - newsletter om bij te blijven (Zoran Jambor)
🎯 ⸺ CSS podcast - Una en Adam babbelen over CSS (Una Kravetz and Adam Argyle)
🎯 ⸺ CSS {In Real Life} - yet another CSS blog (Michelle Barker)
🎯 ⸺ Modern CSS solution - smörgåsbord elegante voorbeelden (Stephanie Eckles - advanced 🌶️)

🎯 ⸺ web.dev - frontend blog (Google)
🎯 ⸺ Smashing magazine - frontend blog (Smashing)

🎯 ⸺ Leer grid van Wes Bos (Wes Bos - videos 📽️)
🎯 ⸺ Leer flexbox van Wes Bos (Wes Bos - videos 📽️)


Zelf nog meer oefenen

🚀 ⸺ CSS diner - selectors (www)
🚀 ⸺ CSS Grid Garden - grid (www)
🚀 ⸺ Flexfroggy - flexbox (www)

🚀 ⸺ CSS battle - CSS sommetjes (Kushagra Gour en Kushagra Agarwal) minder karakters is vaak niet beter :(
🚀 ⸺ CSS challenges - CSS sommetjes (Temani Afif)

🚀 ⸺ Learn HTML CSS (Jad Joubran - paid 💰)


coincidence
bron: comicss - Alvaro Montero