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 built using HTML & vanilla CSS

P

@Choconaldo

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 care for the details, and the result is that it's very close to the original Figma design.

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

Working on HTML tables is not as easy as I thought.

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

Making it as close as pixel perfect as I can.

Community feedback

@Talika-Bajaj

Posted

Hi @Choconaldo, Your project is very detail-oriented and looks similar to the design.

I'd like to suggest something that will make it even better: You have set the image style as follows:

.header-img { height: 171px; object-fit: cover; }

However, I think if you set the height to 300px and remove the object-fit property the image would appear perfectly on the mobile design unlike how it is appearing now.

0

P

@Choconaldo

Posted

Hey @Talika-Bajaj. Thank you very much for the feedback. I understand your suggestion, but the design for the mobile version, concerning the image, is not the same as it is for the desktop. It seems that if I do what you suggest, the image will not be cropped as the mobile design asks for.

It may look better but, in my opinion, it is not what was made on the design.

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