Design comparison
Solution retrospective
I am proud that I managed to get this page very close to the design, although I am a little unsure just how exact it is. I would probably change my coding workflow a little bit next time, writing all the HTML instead of some and styling from the top down.
What challenges did you encounter, and how did you overcome them?The biggest challenge I faced was styling the list items. My solution was to break down each li tag and understand what CSS affected which part, and what CSS would not work. From there I could do things like change the colour of the whole item then use spans to target specific parts that needed to go back or be different. It was clumsy, but it seems to have worked.
What specific areas of your project would you like help with?Any advice for more efficient ways of doing certain things (ie. list styling) would be nice but not necessary.
Community feedback
- @rahulkumar215Posted 8 months ago
Hello @AshlavaDev👋
Congratulations on successfully completing the challenge! 🎉
I have a suggestion regarding your code that I believe will be of great interest to you.
- Use of HTML Tables
In your solution, you have used
ul
andli
to make the Nutrition section, However the best practice to do so is by the use of HTML Tables so,instead of this
<div class="grid grid-cols-2 gap-4 px-8"> <ul class="space-y-6 leading-normal"> <li>Calories</li> <li>Carbs</li> <li>Protein</li> <li>Fat</li> </ul> <ul class="space-y-6 font-bold leading-normal text-nutmeg"> <li>277kcal</li> <li>0g</li> <li>20g</li> <li>22g</li> </ul> </div>
use this
<table> <tr> <td>Calories</td> <td>277kcal</td> </tr> <tr> <td>Carbs</td> <td>0g</td> </tr> <tr> <td>Protein</td> <td>20g</td> </tr> <tr> <td>Fat</td> <td>22g</td> </tr> </table>
I hope you find this helpful 😄 Above all, the solution you submitted is great !
If you need any feedback or suggestions, I am happy to help
Have Fun Coding!
1
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