![](https://res.cloudinary.com/dz209s6jk/image/upload/f_auto,q_auto,w_900/Screenshots/qkqrxz5etavh6m2d65op.jpg)
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
Please log in to post a comment
Log in with GitHubJoin 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