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

P

@Stephanie-Dennehy

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 did this challenge from the design images only. I wanted to test my visual skills and see how close I could get to the design without using the figma file provided. I don't think I would do anything differently if I were to complete this challenge again.

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

I learned a few new things in this project. I had never created a list where I needed the bullet points/numbers to be a different color. So I enjoyed learning about using the li::marker in CSS.

I also went back and forth between trying to create a table or using flex box for the nutrition info displayed at the bottom of the page. I ultimately settled on flex box because it seemed like a simpler solution that was easier to read than trying to invert the row and columns of the table.

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

I would love to see other solutions to the Nutrition section at the bottom if anyone set it up in a table layout rather than using flex box.

Community feedback

Roselin Y 330

@Vanillatte68

Posted

Hello, i also completed this challenge the other day and i use table for the nutrition section. The way i did it was set the nutrition names as the table header (<th>) and set the scope as row. Then set the nutrition value as the table data (<td>).

To workaround the table layout, use :last-child and :first-child selector to style the border differently.

I hope this will help you, happy coding!

Marked as helpful

0

P

@Stephanie-Dennehy

Posted

@Vanillatte68

I'm definitely going to check that out. Thanks so much!

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