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 semantic HTML

P
Rahul 30

@c99rahul

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?

Since the project was fairly simple, the only thing I think I did a bit more effectively than other times was managing color schemes. Rather than using the literal colour names, I named the colors better as primary, secondary, and accent values.

I will be taking this approach further in future projects as well.

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

Pixel-perfecting the designs has always been a challenge for me. This one was no exception and made me scratch my head more than a few times.

Applying the design images as a background to the HTML pages while keeping all the elements opaque helped a lot to size and space things almost like the original designs.

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

I would like to know how professional front-end developers are dealing with designs in modern times when it comes to pixel-perfecting UIs.

Community feedback

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