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

table hr

@atharyaqub

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@kristinakasalova

Posted

Hi Athar,

nice job, looks good on desktop, despite some changes that could improve it.

I'd recommend to use more of semantic HTML tags, e.g. you use class ="main" while there ismain tag available as default.

Additionally, a few more div tags could be used as containers for lists or blocks of text. That would allow you to style a bit better, for example use the same padding/margin within the main column and among the blocks themselves. At the moment, some blocks are offset as per design, others are not which doesn't look neat.

The lists' font color is incorrect, but that's a minor one.

What I think is a quite big issue is missing media queries, so lacking responsiveness on mobile. Looking at your page on smaller screen is a problem. This is something I think you need to revise or add (or at least think about in your future projects), as responsive pages are standard nowadays.

To sum it up, you did good to complete the challange, but need to focus on responsive design next time.

0

@Paul-wackdev

Posted

It seems that the HTML file doesn't include any semantic elements I suggest to study more about semantic HTML to improve the code more, viewing the page on my screen it looks very big it does not seem like it is responsive I suggest looking at your page from a smartphone or just a smaller screen the design is not structured

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