css-challenges

← overzicht

CSS challenge 1: Grid

🗓️ ⸺ Dinsdag 10 september
⏰ ⸺ 9:30 - ca 11:30 uur

📗 ⸺ Grid intro (pdf 24MB)
📗 ⸺ Media queries intro (pdf 2MB)
🧑‍💻 ⸺ Media queries sample (CodePen)

Oefening 1: 🤝 Meet the properties

📊 ⸺ 🔵 🔴 ⚫️

📙 ⸺ Grid oefening 1 (pdf 6MB)

🧑‍💻 ⸺ Code voor jou (CodePen)
🧑‍💻 ⸺ Uitwerking (CodePen)

niet meteen spieken 🫣

Oefening 2: 🐟 cards (micro-layout)

📊 ⸺ 🔵 🔴

📙 ⸺ Grid oefening 2 (pdf 2MB)

met grid lines:

🧑‍💻 ⸺ Code voor jou (CodePen)
🧑‍💻 ⸺ Voorbeeld (CodePen)

met grid-template-areas:

🧑‍💻 ⸺ Code voor jou (CodePen)
🧑‍💻 ⸺ Voorbeeld (CodePen)

Oefening 3: 🛍️ webshopje (macro-layout)

📊 ⸺ 🔴 ⚫️

📙 ⸺ Grid oefening 3 (pdf 11MB)

🧑‍💻 ⸺ Code voor jou (CodePen)
🧑‍💻 ⸺ Voorbeeld (CodePen)

Oefening 4: 🐠 advanced cards (micro-layout)

📊 ⸺ 🔴 ⚫️

📙 ⸺ Grid oefening 4 (pdf 2MB)

🧑‍💻 ⸺ Code voor jou (CodePen)
🧑‍💻 ⸺ Voorbeeld (CodePen)

🎯 ⸺ Oefenen in de CSS Grid Garden (www 🥕)

🎯 ⸺ Alles over grid (CSS tricks 🪄)
🎯 ⸺ Leer grid van Wes Bos (Wes Bos - videos 📽️)
🎯 ⸺ CSS grid generator (Sarah Drasner 🍱)
🎯 ⸺ CSS grid autofit (CSS tricks 🪄)

This site is open source. Improve this page.