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 with only HTML and CSS

P

@ownedbyanonymous

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P
kaLihaRi 50

@kalihari90

Posted

Hello @ownedbyanonymous Congratulations on your solution. Good work! I like that you used tables and some semantic HTML. I've got few suggestion to improve your project.

1.) HTML structure - try to put all content below the picture into one div, so you can add display:flexbox; flex-direction: column; gap: 32px; od display:grid; gap: 32px; instead of using margins on all elements seperately

2.) Main heading needs to be bigger font-size: 40px;

3.) Instruction section - there should be ordered list <ol> instead of unordered <ul>

4.) You should add somehow white spaces at the top & the bottom of the page to make it look visually better and to make it easier to check [solution <=> design] comparison

5.) Card width - card is to narrow. In the design cotainer have max-width: 736px;

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