diff --git a/docs/challenge_transform.md b/docs/challenge_transform.md index bc24ab5..626be3d 100644 --- a/docs/challenge_transform.md +++ b/docs/challenge_transform.md @@ -8,13 +8,10 @@ ⏰ ⸺ **9:30 - ca 11:30 uur** 📗 ⸺ -Grid intro -(pdf 24MB) -📗 ⸺ -Media queries intro -(pdf 2MB) +Transform en Transition intro +(pdf 4MB) 🧑‍💻 ⸺ -Media queries sample +Transform en Transition sample (CodePen) --- @@ -24,86 +21,42 @@ 📊 ⸺ 🔵 🔴 ⚫️ 📙 ⸺ -Grid oefening 1 -(pdf 6MB) +Transform en Transition oefening 1 +(pdf) 🧑‍💻 ⸺ -Code voor jou +Code voor jou (CodePen) 🧑‍💻 ⸺ -Uitwerking +Uitwerking (CodePen) niet meteen spieken 🫣 --- -## Oefening 2: 🐟 cards (micro-layout) +## Oefening 2: 🧊 3D transforms -📊 ⸺ 🔵 🔴 +📊 ⸺ 🔵 🔴 ⚫️ 📙 ⸺ -Grid oefening 2 -(pdf 2MB) - -met grid lines: - -🧑‍💻 ⸺ -Code voor jou -(CodePen) -🧑‍💻 ⸺ -Voorbeeld -(CodePen) - -met grid-template-areas: +Transform en Transition oefening 2 +(pdf) 🧑‍💻 ⸺ -Code voor jou +Code voor jou (CodePen) 🧑‍💻 ⸺ -Voorbeeld +Voorbeeld (CodePen) ---- - -## Oefening 3: 🛍️ webshopje (macro-layout) - -📊 ⸺ 🔴 ⚫️ - -📙 ⸺ -Grid oefening 3 -(pdf 11MB) - -🧑‍💻 ⸺ -Code voor jou -(CodePen) 🧑‍💻 ⸺ -Voorbeeld +Uitwerking (CodePen) ---- - -## Oefening 4: 🐠 advanced cards (micro-layout) - -📊 ⸺ 🔴 ⚫️ - -📙 ⸺ -Grid oefening 4 -(pdf 2MB) - -🧑‍💻 ⸺ -Code voor jou -(CodePen) -🧑‍💻 ⸺ -Voorbeeld -(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 🪄) diff --git a/docs/pres/FDND-2425-CSSchallenge2-transform-transition-intro.pdf b/docs/pres/FDND-2425-CSSchallenge2-transform-transition-intro.pdf new file mode 100644 index 0000000..7daaa3f Binary files /dev/null and b/docs/pres/FDND-2425-CSSchallenge2-transform-transition-intro.pdf differ diff --git a/docs/pres/FDND-2425-CSSchallenge2-transform-transition-oefening1.pdf b/docs/pres/FDND-2425-CSSchallenge2-transform-transition-oefening1.pdf new file mode 100644 index 0000000..8b8915f Binary files /dev/null and b/docs/pres/FDND-2425-CSSchallenge2-transform-transition-oefening1.pdf differ diff --git a/docs/pres/FDND-2425-CSSchallenge2-transform-transition-oefening2.pdf b/docs/pres/FDND-2425-CSSchallenge2-transform-transition-oefening2.pdf new file mode 100644 index 0000000..cba933a Binary files /dev/null and b/docs/pres/FDND-2425-CSSchallenge2-transform-transition-oefening2.pdf differ