p

docs/CHALLENGES.md

@@ -7,17 +7,19 @@ Op dinsdagen kennismaken en oefenen met CSS (en soms met JS). Soms is het onderw
 
 ## Planning
 
-### dinsdag 10 sep
+### dinsdag 17 sep 
 ⏰ ⸺ **9:30 - ca 11:30 uur**  
-🍱 ⸺ challenge 1: **[grid](challenge_grid.md)**  
+🐛 ⸺ challenge 2: **[transform en transities](transform.md)**  
 📊 ⸺ niveau: all  
-🙋 ⸺ voor: all
+🙋 ⸺ voor: all  
 
-### dinsdag 17 sep 
+##done
+
+### dinsdag 10 sep
 ⏰ ⸺ **9:30 - ca 11:30 uur**  
-🐛 ⸺ challenge 2: **transform en transities**  
+🍱 ⸺ challenge 1: **[grid](challenge_grid.md)**  
 📊 ⸺ niveau: all  
-🙋 ⸺ voor: all  
+🙋 ⸺ voor: all
 
 <hr>
 

docs/challenge_transform.md

@@ -0,0 +1,109 @@
+[← overzicht](CHALLENGES.md)
+
+---
+
+# CSS challenge 2: Transform & Transition
+
+🗓️ ⸺ **Dinsdag 17 september**  
+⏰ ⸺ **9:30 - ca 11:30 uur**  
+
+📗 ⸺
+<a href="pres/FDND-2425-CSSchallenge1-Grid-intro.pdf" target="_blank" rel="noopener noreferrer">Grid intro</a> 
+(pdf 24MB)  
+📗 ⸺
+<a href="pres/FDND-2425-CSSchallenge1-MQ-intro.pdf" target="_blank" rel="noopener noreferrer">Media queries intro</a> 
+(pdf 2MB)  
+🧑‍💻 ⸺
+<a href="https://codepen.io/shooft/pen/gONZPwP" target="_blank" rel="noopener noreferrer">Media queries sample</a> 
+(CodePen)  
+
+---
+
+## Oefening 1: 🤝 meet the properties
+
+📊 ⸺ 🔵 🔴 ⚫️
+
+📙 ⸺ 
+<a href="pres/FDND-2425-CSSchallenge1-Grid-oefening1.pdf" target="_blank" rel="noopener noreferrer">Grid oefening 1</a> 
+(pdf 6MB)
+
+🧑‍💻 ⸺
+<a href="https://codepen.io/shooft/pen/XWLobEm" target="_blank" rel="noopener noreferrer">Code voor jou</a>
+(CodePen)  
+🧑‍💻 ⸺
+<a href="https://codepen.io/shooft/pen/xxomGWE" target="_blank" rel="noopener noreferrer">Uitwerking</a>
+(CodePen)
+
+niet meteen spieken 🫣  
+
+---
+
+## Oefening 2: 🐟 cards (micro-layout)
+
+📊 ⸺ 🔵 🔴
+
+📙 ⸺ 
+<a href="pres/FDND-2425-CSSchallenge1-Grid-oefening2.pdf" target="_blank" rel="noopener noreferrer">Grid oefening 2</a> 
+(pdf 2MB)  
+
+met grid lines:
+
+🧑‍💻 ⸺
+<a href="https://codepen.io/shooft/pen/WNqLvmB" target="_blank" rel="noopener noreferrer">Code voor jou</a>
+(CodePen)  
+🧑‍💻 ⸺
+<a href="https://codepen.io/shooft/live/gONZpEd" target="_blank" rel="noopener noreferrer">Voorbeeld</a>
+(CodePen)  
+
+met grid-template-areas:
+
+🧑‍💻 ⸺
+<a href="https://codepen.io/shooft/pen/PorXPQr" target="_blank" rel="noopener noreferrer">Code voor jou</a>
+(CodePen)  
+🧑‍💻 ⸺
+<a href="https://codepen.io/shooft/live/ZEdVGZb" target="_blank" rel="noopener noreferrer">Voorbeeld</a>
+(CodePen)  
+
+---
+
+## Oefening 3: 🛍️ webshopje (macro-layout)
+
+📊 ⸺ 🔴 ⚫️
+
+📙 ⸺ 
+<a href="pres/FDND-2425-CSSchallenge1-Grid-oefening3.pdf" target="_blank" rel="noopener noreferrer">Grid oefening 3</a> 
+(pdf 11MB)
+
+🧑‍💻 ⸺
+<a href="https://codepen.io/shooft/pen/jOjXbpr" target="_blank" rel="noopener noreferrer">Code voor jou</a>
+(CodePen)  
+🧑‍💻 ⸺
+<a href="https://codepen.io/shooft/live/KKjbdBg" target="_blank" rel="noopener noreferrer">Voorbeeld</a>
+(CodePen)  
+
+---
+
+## Oefening 4: 🐠 advanced cards (micro-layout)
+
+📊 ⸺ 🔴 ⚫️
+
+📙 ⸺ 
+<a href="pres/FDND-2425-CSSchallenge1-Grid-oefening4.pdf" target="_blank" rel="noopener noreferrer">Grid oefening 4</a> 
+(pdf 2MB)
+
+🧑‍💻 ⸺ 
+<a href="https://codepen.io/shooft/pen/LYKMpMg" target="_blank" rel="noopener noreferrer">Code voor jou</a>
+(CodePen)  
+🧑‍💻 ⸺
+<a href="https://codepen.io/shooft/live/vYqvNvM" target="_blank" rel="noopener noreferrer">Voorbeeld</a>
+(CodePen)  
+
+---
+
+## Links
+🎯 ⸺ [Oefenen in de CSS Grid Garden](https://cssgridgarden.com) (www 🥕)
+
+🎯 ⸺ [Alles over grid](https://css-tricks.com/snippets/css/complete-guide-grid) (CSS tricks 🪄)  
+🎯 ⸺ [Leer grid van Wes Bos](https://cssgrid.io) (Wes Bos - videos 📽️)  
+🎯 ⸺ [CSS grid generator](https://cssgrid-generator.netlify.app) (Sarah Drasner 🍱)  
+🎯 ⸺ [CSS grid autofit](https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit) (CSS tricks 🪄)