Skip to content
Submitted 8 months ago

Recipe Page Card Component

#accessibility
Jorge-234•110
@Jorge-234
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 challenges did you encounter, and how did you overcome them?

I completed the project quickly and faced no difficulties throughout the entire process.

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

Any feedback or suggestion are welcome ! Thanks

Please log in to post a comment

Log in with GitHub

Community feedback

  • P
    Boris•4,040
    @makogeboris

    Nice work @Jorge-234, here are some suggestions

    • Consider using the HTML Table element for the nutrition table instead of divs. This approach offers a better semantic structure.
    • All content should be wrapped within landmarks. Wrap a main tag around the .container and a footer for the attribution.
    • It's best practice linking Google fonts directly in the HTML head section rather than directly in your CSS file as it enables asynchronous downloading, improving page load times.
    • Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset. This will help reset a list of default browser styles.
    • Font-size should be written in rem not px. This article explains it better Why font-size must NEVER be in pixels.

    Hope this helps, Good luck!

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