A Guide to Building Responsive Web Apps using Container Queries
Designed for Mid-level frontend developers working on scalable enterprise dashboards, who need to modernize legacy responsive designs for cross-team deployment. to spark real collaboration and high-energy learning.
A 90-minute hybrid workshop with a mix of in-person and remote devs. Most participants struggle with legacy CSS media queries, leading to inflexible, brittle designs. Teams are pressed to deliver modular, reusable UI components that work across embedded dashboards and micro-frontends. The session prioritizes real, hands-on implementation and practical troubleshooting.
Query Quest: Visual Mystery
Kick off with a visual puzzle: show a dashboard component in three contexts—sidebar, card, full-width. Ask: 'How would you code this to adapt in each parent?' Let them guess before revealing the magic of container queries. Spark curiosity by teasing how one CSS change can solve the puzzle.
Tap to view the full activity.
Why this works
Curiosity primes the brain for learning and lowers resistance to new concepts. Visual mysteries activate pattern recognition and invite experimentation.
Mythbusting: One Size Doesn’t Fit All
Hold a quick poll: 'True or False—Media queries are enough for responsive apps.' After participants vote, walk through classic failure cases: cards in dashboards breaking layout, odd spacing, and why media queries alone fail. Debrief with a mythbusting comparison.
Tap to view the full activity.
Why this works
Surfacing misconceptions early helps unstick mental models and prepares participants to embrace new solutions. Polled engagement makes invisible beliefs visible.
Container Query Sandbox
Guide everyone to try a live coding exercise using CodePen or StackBlitz: tweak a sample component’s CSS with container queries, no pressure. Participants can share their screens or paste links to their creations. Focus on playful experimenting—zero stress, just hands-on discovery.
Tap to view the full activity.
Why this works
Low-stakes play deepens learning. Active experimentation builds confidence and lets learners see immediate results without fear of 'breaking' anything.
Lightning Layout Race
Split the group into small teams (breakout rooms or tables). Challenge: Given a starter dashboard layout, which team can refactor one component to use container queries fastest? Set a buzzer and celebrate creative approaches with a rapid share-out.
Tap to view the full activity.
Why this works
Competition and urgency raise engagement and encourage teamwork. Quick wins reinforce competence and energize the group for further learning.
Stakeholder Scenario: Product Manager Dilemma
Present a real-world dilemma: 'Your product manager asks for a highly modular dashboard, but each team uses different parent containers. How do you convince them container queries are the answer?' Participants craft 2-minute elevator pitches to address this challenge, then share and discuss.
Tap to view the full activity.
Why this works
Connecting to workplace dilemmas and practicing communication builds transfer and advocacy. Role-play bridges the gap between technical and business needs.
Personal Integration Reflection
Wrap up with an active journaling prompt: 'Name one legacy app you work on. What’s one place you could switch to container queries next week?' Participants jot down or type their answer, then optionally share for peer feedback. Close with a roundtable insight exchange.
Tap to view the full activity.
Why this works
Active reflection cements learning and invites personal ownership. Sharing future plans encourages accountability and peer inspiration.
Sign up to unlock 3 more activities
Get the full pack, facilitation flow, and more ready-to-run ideas.