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 using HTML and CSS

@jpetterson88

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@devid8642

Posted

Firstly congratulations on your solution.

I have some considerations about your project:

Regarding HTML, I believe it would be interesting to place the content about nutrients in a table instead of a list, from the point of view of HTML semantics this would be more correct. See more about tables in HTML here.

As far as style is concerned, it is necessary to make some adaptations so that the page works on mobile. With CSS it is possible to do what we call responsive design, which is a design that adapts to different displays. To do this, the main resource we use are Media Queries. I believe that a good initial step to try to apply them to this page would be to reduce the width of the main for smaller displays.

Try this and see the result, to test the page on a smaller display you can resize your browser window or even look in the browser's developer tools about responsive mode.

I hope you found my comment helpful and again congratulations on the solution.

Marked as helpful

1

@jpetterson88

Posted

@devid8642 It was very helpful! I will try to improve the project, thanks for the feedback

1

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