Responsive Recipe Page using Flexbox & Media Queries

What are you most proud of, and what would you do differently next time?

I’m proud that I managed to build a clean, responsive recipe card layout that closely matches the design system. Getting the typography and color palette consistent with the style guide felt like a big step forward.

Next time, I would start by setting up a mobile‑first workflow earlier in the project. This would make scaling up to tablet and desktop smoother instead of adjusting styles later.

What challenges did you encounter, and how did you overcome them?

One challenge was aligning the nutrition table and making it look polished across screen sizes. At first, my table rows looked uneven, but I solved this by using border-collapse and consistent padding.

Another challenge was ensuring the preparation section stood out visually. I overcame this by applying the Rose 50 background color and rounded corners, which matched the design system and improved readability.

What specific areas of your project would you like help with?

Best practices for structuring CSS when working with multiple fonts (Young Serif + Outfit).

How to refine responsive breakpoints beyond just mobile and desktop — especially for tablets.

Whether my approach to styling the nutrition table is accessible and WCAG‑friendly, or if there are better semantic techniques.