i

docs/CHALLENGES.md

@@ -19,7 +19,7 @@ Op dinsdagen kennismaken en oefenen met CSS (en soms met JS). Soms is het onderw
 
 ### dinsdag 1 okt 
 ⏰ ⸺ **9:30 - ca 11:30 uur**  
-🏋️ ⸺ challenge 4: **[flexbox](challenge_flexbox.md)**   
+🍔 ⸺ challenge 4: **[flexbox](challenge_flexbox.md)**   
 📊 ⸺ niveau: starters  
 🙋 ⸺ voor: even aanmelden   
 

docs/challenge_position.md

@@ -0,0 +1,59 @@
+[← overzicht](CHALLENGES.md)
+
+---
+
+# CSS challenge 5: Position
+
+🗓️ ⸺ **Dinsdag 15 oktober**  
+⏰ ⸺ **9:30 - ca 11:30 uur**  
+🙋 ⸺ even aanmelden - max 24  
+
+
+📗 ⸺
+<a href="pres/FDND-2425-CSSchallenge4-Flexbox-intro.pdf" target="_blank" rel="noopener noreferrer">Flexbox intro</a> 
+(pdf 13MB)  
+
+---
+
+## Oefening 1: 🤝 Meet the properties
+
+📊 ⸺ 🔵 🔴
+
+📙 ⸺ 
+<a href="pres/FDND-2425-CSSchallenge4-Flexbox-oefening1.pdf" target="_blank" rel="noopener noreferrer">Flexbox oefening 1</a> 
+(pdf)
+
+🧑‍💻 ⸺
+<a href="https://codepen.io/shooft/pen/VwoYBog" target="_blank" rel="noopener noreferrer">Code voor jou</a>
+(CodePen)  
+🧑‍💻 ⸺
+<a href="https://codepen.io/shooft/pen/zYgxJOW" target="_blank" rel="noopener noreferrer">Uitwerking</a>
+(CodePen)
+
+niet meteen spieken 🫣  
+
+---
+
+## Oefening 2: 🖼️ Responsive header
+
+📊 ⸺ 🔵 🔴
+
+📙 ⸺ 
+<a href="pres/FDND-2425-CSSchallenge4-Flexbox-oefening2.pdf" target="_blank" rel="noopener noreferrer">Flexbox oefening 2</a> 
+(pdf 28MB)  
+
+🧑‍💻 ⸺
+<a href="https://codepen.io/shooft/pen/bGXNxGp" target="_blank" rel="noopener noreferrer">Code voor jou</a>
+(CodePen)  
+🧑‍💻 ⸺
+<a href="https://codepen.io/shooft/live/mdNyGbN" target="_blank" rel="noopener noreferrer">Voorbeeld</a>
+(CodePen)    
+
+---
+
+## Links
+🎯 ⸺ [Flexfroggy - flexbox](https://flexboxfroggy.com) (www 🐸)  
+
+🎯 ⸺ [Alles over flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) (CSS tricks 🪄)  
+🎯 ⸺ [Leer flexbox van Wes Bos](https://flexbox.io/) (Wes Bos - videos 📽️)  
+🎯 ⸺ [Flexbox or Grid](https://youtu.be/3elGSZSWTbM?si=1X5RiZoOylQjbLCZ) (Kevin Powell - video 🥊)