Design comparison
Solution retrospective
Pleased that I managed to make it very similar to the goal, since the HTML structure wasn't the simplest for me. Also the styling of some elements proved challenge at first, in order to rendered them as in the challenge solution. However, I think the outcome is positive.
What challenges did you encounter, and how did you overcome them?Styling the Preparation Time box and the sections below weren't easy, as I had to make some research in order to style the bullet points of the and elements. But in the end, it actually wasn't that difficult with the use of the pseudo class ::marker
What specific areas of your project would you like help with?How would you do the Nutrition Section of this challenge? When making it, I felt this could be made in many different forms... which makes me think mine isn't the best.
Community feedback
- @krushnasinnarkarPosted 4 months ago
Hi @Rui-Martins23,
Congratulations on successfully completing the challenge!
Your solution looks nice, though there are a couple of things you can improve, which I hope will be helpful:
The nutrition section can be improved by using a table instead of
ul
andhr
. Creating a table with 4 rows and 2 columns, using only bottom borders, and aligning the text to the left would be more appropriate for displaying structured data. If you’re unfamiliar with tables, you can check out W3Schools or MDN Web Docs for a comprehensive understanding.I hope you find this helpful.
Feel free to reach out if you have more questions or need further assistance.
Happy coding!
Marked as helpful0@Rui-Martins23Posted 4 months ago@krushnasinnarkar Hi Krushna, Thanks for your feedback! After consulting the links sent, i will definitely have in mind the use of the HTML tables next time. They would actually make the Nutrition Section html composition much more easy.
Thank you once again for the help!
0
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