Responsive Rescue — TasteBuds Edition 🧁 Today, you're teaming up to fix a food blog! Salma from TasteBuds, a cozy global recipe site, needs help! Her homepage looks decent on desktop, but breaks on mobile. Your dev team has been hired to make it beautifully responsive using CSS Flexbox and media queries.
You’ll debug layout issues, use media queries to adapt the design, and work as a dev shop solving a real(ish) client problem.
🎯 Warm-Up Prompt Have you ever opened a website on your phone… and it was a hot mess? 👀 What were the clues that it wasn’t mobile-friendly? 💬 Bonus: What kind of users need a responsive layout the most?
🧑🏫 Demo: From Broken Layout to Responsive Goodness Open your Codespace using the TasteBuds Starter Repo. Watch your instructor walk through:
How the layout breaks at smaller screen sizes
How Flexbox works (and what’s missing)
How to write media queries to adjust card width + layout direction
Using browser dev tools to test responsiveness
🧑🤝🧑 Team Dev Tasks You’re now a real dev team! Choose roles (Designer, Dev, QA) and tackle the following tasks. You can use AI tools like Copilot or ChatGPT to get unstuck, debug, or explore layout strategies — but think before you prompt!
🍱 Fix the Layout (Required) Add flex-wrap so cards don’t squish or overflow
Add media queries to stack the recipe cards on tablet/mobile
Adjust spacing and padding to make everything look just right
🧂 Optional Stretch Tasks (Pick 1 if you finish early) 🌈 Make the Nav Mobile-Friendly Stack or center the nav links on small screens
📸 Improve Image Display Use object-fit, max-width, or responsive image tips
📱 Add a Mobile-Only Feature Maybe a cute message or hidden note just for phone users?
💡 Custom Theme or Vibe Adjust colors, fonts, or card shadows to better match the “cozy foodie” brand
💬 AI Prompt Ideas Use these if you’re stuck or want inspiration:
🧠 “How do I stack flexbox items vertically at a smaller screen size?” 🎯 “Write a media query to change card width below 768px” 🧪 “Why is my layout breaking on mobile? Help me debug it.” 💡 “How do I center nav links on small screens?” ✨ “Suggest spacing or padding improvements for a recipe card layout”
🏁 Show & Share After 30–35 minutes of coding, be ready to:
Show your responsive version of the TasteBuds homepage
Reflect on one CSS property or layout fix you learned today
(Bonus!) Share how your client Salma might react to your final layout 😄