Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Recipe page

@alexstrauch

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I remember more and more stuff and don't have to look stuff up so soften.

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

The table at the end was challenging. Had to look stuff up because I hadn't used tables for a while.

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

Responsive design, open for all feedback, thanks.

Community feedback

@AnwarMestycer

Posted

  • In your HTML code, you imported the fonts twice and I recommend importing it directly in the CSS file using @import.

  • Try to more semantic HTML like sections, headers, ... for the image alt attribute, remove the word "picture" as the screen readers will mention it is an image.

  • Add some height and padding to your card to match the design.

  • Chane the width property to max-width and give it at around 45rem.

  • Add media queries to match small screens: change the max-width to around 20rem value to phone screens.

Hope this was helpful !

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord