Responsive Recipe Page using Flexbox and Custom Styling

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

I'm proud of replicating the design closely and organizing my CSS using Flexbox. It helped me understand spacing, alignment, and mobile-first design.

Next time, I’d spend more time improving responsiveness and using more semantic HTML elements like <section>, <article>, and <aside> where necessary.

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

One major challenge I faced was aligning and spacing elements to match the design exactly—especially making the nutrition section and preparation time area look like the reference image. At first, my layout looked off in different browsers, and I struggled with making things sit on the same line or properly styled.

I overcame this by revisiting Flexbox and learning how to use gap, justify-content, and align-items effectively. I also inspected elements using Chrome DevTools to figure out what was causing layout shifts. Additionally, I reviewed CSS units like em, rem, and % for better responsiveness.

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

I’d appreciate feedback on how to better structure my HTML for accessibility, or how to make the page more responsive across all screen sizes.