Design comparison
Solution retrospective
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
- @Vanillatte68Posted 5 months ago
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-childand:first-childselector to style the border differently.I hope this will help you, happy coding!
Marked as helpful0@Stephanie-DennehyPosted 5 months ago@Vanillatte68
I'm definitely going to check that out. Thanks so much!
0
Please log in to post a comment
Log in with GitHub
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