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-main

@pamithapandian

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@ahmedraza032

Posted

First of all, the shadow adds a very impressive effect to the design, so I really appreciate it.

Secondly, the website is not completely responsive for the mobile as it should be (according to the mobile-preview image given). You can use media queries at breakpoint for mobile size (375px) and do that easily.

Thirdly, you have written both HTML and CSS in one file, which is not a professional approach. You should take care of it in your future projects because the readability of the code is very hard in a single file.

Fourthly, a minor detail but really important to know is the way you added border-bottom to all td tags leaves some empty space between the two columns. You can easily, avoid this issue by adding this code:

  width: 100%;
  border-collapse: collapse;
}

.row {
  border-bottom: 0.5px solid var(--stone-150);
  margin: 0px 10px;
}`

//.row is all the rows (tr) where I want border-bottom. Since I don't want it on the last row, I didn't added this class to it.
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