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

Responsive recipe page

P
gio 110

@fakegio

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 am most proud of implementing the small details of the design. Next time, I would overthink less and try to implement the "easiest" solution, instead of trying to think of a clever implementation, and end up implementing the "easiest" solution anyway.

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

The small bullet points, horizontal lines, nutrition tables, and responsiveness were challenges for this exercise. I overcame them by trying to chunk them down into digestible problems, rather than treating them as one big problem.

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

Media query breakpoints and responsiveness between the desktop, tablet, and mobile designs. Getting the site to look similar to the given sizes (i.e. 1440 for desktop, 768 for tablet, 375 for mobile) isn't the challenge, the challenge is deciding on how it should look in between the given sizes.

Community feedback

@Fatma-Tawfeek

Posted

  • Excellent work! I really don't have any comment on your solution.
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