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 solution using Grid

PYXHD 270

@PYXHD

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 am happy with the result regarding the Grid.

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

I worked a lot on the aesthetics of the Desktop version, I hope you like it.

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

I encountered a particular difficulty concerning the "nutrition-score" part. I tried to format a table (with the tags table, tbody, tr, td) but unable to create a ::after for the separation. I finally opted for divs. If anyone has a solution with the right tags, I'm listening.

Community feedback

mk-374 40

@mk-374

Posted

This is great work! However, there is a certain flaw in your ordered list. (I personally attempted this with a padding-left: 20px; for indentation). Other than this, your work is a perfect replicate!

0

PYXHD 270

@PYXHD

Posted

@mk-374 Thanks! Yes, the ordered list gave me hard time... Maybe there is a better solution but, at the moment I did this, I wasn't able to make it.

I'm still learning :)

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