p

docs/challenge_transform.md

@@ -8,13 +8,10 @@
 ⏰ ⸺ **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="pres/FDND-2425-CSSchallenge2-transform-transition-intro.pdf" target="_blank" rel="noopener noreferrer">Transform en Transition intro</a> 
+(pdf 4MB)  
 🧑‍💻 ⸺
-<a href="https://codepen.io/shooft/pen/gONZPwP" target="_blank" rel="noopener noreferrer">Media queries sample</a> 
+<a href="https://codepen.io/shooft/pen/XWLGQYz" target="_blank" rel="noopener noreferrer">Transform en Transition sample</a> 
 (CodePen)  
 
 ---
@@ -24,86 +21,42 @@
 📊 ⸺ 🔵 🔴 ⚫️
 
 📙 ⸺ 
-<a href="pres/FDND-2425-CSSchallenge1-Grid-oefening1.pdf" target="_blank" rel="noopener noreferrer">Grid oefening 1</a> 
-(pdf 6MB)
+<a href="pres/FDND-2425-CSSchallenge2-transform-transition-oefening1.pdf" target="_blank" rel="noopener noreferrer">Transform en Transition oefening 1</a> 
+(pdf)
 
 🧑‍💻 ⸺
-<a href="https://codepen.io/shooft/pen/XWLobEm" target="_blank" rel="noopener noreferrer">Code voor jou</a>
+<a href="https://codepen.io/shooft/pen/WNqmBKd" 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>
+<a href="https://codepen.io/shooft/pen/OJeqYwm" target="_blank" rel="noopener noreferrer">Uitwerking</a>
 (CodePen)
 
 niet meteen spieken 🫣  
 
 ---
 
-## Oefening 2: 🐟 cards (micro-layout)
+## Oefening 2: 🧊 3D transforms
 
-📊 ⸺ 🔵 🔴
+📊 ⸺ 🔵 🔴 ⚫️
 
 📙 ⸺ 
-<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="pres/FDND-2425-CSSchallenge2-transform-transition-oefening2.pdf" target="_blank" rel="noopener noreferrer">Transform en Transition oefening 2</a> 
+(pdf)  
 
 🧑‍💻 ⸺
-<a href="https://codepen.io/shooft/pen/PorXPQr" target="_blank" rel="noopener noreferrer">Code voor jou</a>
+<a href="https://codepen.io/shooft/pen/xxoBNBK" 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>
+<a href="https://codepen.io/shooft/live/zYVbQeQ" 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>
+<a href="https://codepen.io/shooft/pen/zYVbQeQ" target="_blank" rel="noopener noreferrer">Uitwerking</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)  
+niet meteen spieken 🫣  
 
 ---
 
 ## 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 🪄)