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

@Prototype-113322

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 challenges did you encounter, and how did you overcome them?

I encountered an issue when I had to change the color of a bullet point, so I used W3Schools to overcome it.

Community feedback

@tinuola

Posted

Nice work getting this close to the design spec, Muhammad.

A layout issue I notice is that the CSS styles are not applied when the screen is larger than 1440px. To fix this, update the second media query by removing the (max-width: 1440px) range.

Also, there's little need for the first media query: @media (max-width: 600px) since by default you're starting with the mobile style, and the second media query sets the next breakpoint.

Lastly, I recommend grouping the page sections with either div or section tags so that the code is organized and can be easier to read.

Good luck with future projects!

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