css-challenges

← overzicht

CSS challenge 5: Position

🗓️ ⸺ Dinsdag 15 oktober
⏰ ⸺ 9:30 - ca 11:30 uur
🙋 ⸺ even aanmelden - max 24

📗 ⸺ Position intro (pdf 2MB)
📗 ⸺ JS 3-stap intro (pdf 4MB)

Oefening 1: 🤝 Zet dingen op plekken

📊 ⸺ 🟦 🟥

📙 ⸺ Positioneren oefening 1 (pdf 10MB)

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

niet meteen spieken 🫣

Oefening 2: 🍔 Hamburger menus

📊 ⸺ 🟦 🟥

📙 ⸺ Positioneren oefening 2 (pdf 9MB)

2-buttons hamburger menu
🧑‍💻 ⸺ Code voor jou (CodePen)
🧑‍💻 ⸺ Uitwerking (CodePen)

fixed-button hamburger menu
🧑‍💻 ⸺ Code voor jou (CodePen)
🧑‍💻 ⸺ Uitwerking (CodePen)

moving-button hamburger menu
🧑‍💻 ⸺ Code voor jou (CodePen)
🧑‍💻 ⸺ Uitwerking (CodePen)

Oefening 3: 💬 Dialogs

📊 ⸺ 🟦 🟥 ⬛️

📙 ⸺ Positioneren oefening 3 (pdf 2MB)

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

🎯 ⸺ Learn CSS Position in 9 Minutes (Web Dev Simplified - video 📽️)
🎯 ⸺ Z-index and stacking contexts (web.dev 🦖 - advanced)

🎯 ⸺ Learn Dialog in 12 min (Web Dev Simplified - videos 📽️)
🎯 ⸺ Animating the Dialog Element (FrontendMasters 🧑‍💻)
🎯 ⸺ Transitioning dialog and popover in and out (Adam Argyle 🦖 - demo)

This site is open source. Improve this page.