Recipe page using Astro

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

I have now done this on a few projects and am getting much more comfortable mapping arrays to my HTML elements within my Astro components. Part of why I love HTML and CSS is the separation of information from presentation. Using frontmatter/prop data allows me to break the information itself away from the HTML, giving me information, structure, and style as three separate elements in my web design. I also worked hard to use semantic HTML, ensure type safety, use logical CSS, and minimize any hard breakpoints. Almost did this without any media queries!

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

My initial goal was to complete this recipe challenge without any media queries. This challenge was trickier than earlier ones because padding and border radius style adjustments were needed between mobile and desktop. Font size can be handled with fluid typography and layout with some flex/grid displays. This was my first time trying to do padding or border radius without a media query.

In the end I broke down and used both a container query and a media query. I had a few functioning versions of what I needed, but the CSS felt a bit hacky and far less clear than just using a query.

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

I am new to container queries. I used one on my RecipeImage.astro component as well as a media query on my Card.astro primary component. I would love feedback on how to properly use container queries, including shift my media query into a container query. I couldn't get mine working and was tired of troubleshooting so just used a media query. When I tried to use a container query on Card.astro similar to how I did it on RecipeImage.astro, my entire card lost all proportions and became a long vertical stick.

Also let me know if you see ways I can improve the semantic HTML, type safety, or logical CSS. So much to learn and remember to implement!