Responsive Recipe Page - Main

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

With this project, I am most proud of my use of the media queries to make the page more responsive as the screen size scales down. I am also proud of my use of the CSS grid, to help me format page elements to mirror the design mockups.

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

One challenge I faced was getting the outer edges of the recipe card to center and to scale down as the screen size decreases. I overcame this by adding a grid attribute within my CSS which kept the recipe card centered and scalable.

Another challenge I faced was with the nutrition facts table at the bottom of the recipe card, and getting it to format the way I needed it to for it to match the design. To solve this issue, I used CSS gris and created two columns where the elements automatically placed themselves.

The last challenge I faced, was making sure this image scaled as desired. The way i overcame this, was I created media queries that had specific rules for specific screen sizes to make sure the page was still readable and didn't interfere with the layout.

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

If possible, I would like suggestions on how I can simplify and group my code for when I need to add styling to certain elements and groups on a page.

I would also like suggestions on best practices for responsive and semantic web development.