Skip to content
Submitted 8 months ago

Recipe page

alexstrauch•60
@alexstrauch
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Recipe page
  • HTML
  • CSS
1newbie

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

  • Anwar Mestycer•420
    @AnwarMestycerPosted 8 months ago

    • 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

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