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

@adhikariprayag

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'm happy with how closely accurate my design is. I have made use of table element this time, which I often ignore aswell.

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

I struggled while matching the look of the main image and styling the table. While I was not able to solve those issues fully, I have tried my best to match what was put in front of me.

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

I would like help with the top and bottom parts of the recipe card. They are the only ones I'm having trouble fixing.

Community feedback

P

@DrakeHermit

Posted

HTML wise

  • I would use a <main> tag to group all the content together, it makes it easier to style the whole component.

CSS wise

  • I would add margin-block on the whole container so it doesn't look so squished up against the edges of the screen.
  • Keep on using variables since they help a lot

Other than that I have no problems with your solution, keep on working on your web dev skills.

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