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

Basics of Html and CSS

CodeHeaven 160

@twobottles2092

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?

This was my first challenge here so I am expecting a little mess but I am proud

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

The responsiveness and some elements I just knew when i coding

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

Responsiveness

Community feedback

perterHUAN 250

@perterHUAN

Posted

On large screens, it looks acceptable, but there are some minor issues:

  • The preparation time section should have a greater margin from the bottom.
  • A suitable amount of spacing should be added between list items in the 'instructions' part, as they currently appear a bit cramped.
  • Padding should be added to the td elements within the nutrition table.

The font-weight for the title "Simple Omelette Recipe" should be 400, not bold.

For small screens, the performance is less satisfactory:

  • You should employ max-width instead of width, ensuring that the content doesn't overflow on smaller screens.
  • The padding around the photo should be absorbed by the photo itself on small screens; consider implementing negative margins to achieve this.
  • Rounded corners should be removed on small screens.

Marked as helpful

1
vv 140

@dblvv

Posted

Code structure is very easy to follow.

Within instructions list items should have margin or padding. Those should be spaced apart.

Spacing between nutrition table's item should be also more clear.

Headings seem to have the wrong font weight.

Those aside, great solution.

Marked as helpful

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