Design comparison
Solution retrospective
I'm most proud of the fact that I completed the challenge within 2 days.
What challenges did you encounter, and how did you overcome them?Setting the markers of the list element as a ::before pseudo-element. I overcome them with the help of mdn web docs.
What specific areas of your project would you like help with?BEM naming convention
Community feedback
- @XarlizardPosted 8 months ago
Heyo Chard, it looks amazing!
Just one tip:
Instead of trying to construct a table using an unordered-list <ul> with flex enabled list-items <li> (what a trick you've accomplished with that by the way!), just use the <table> component, containing table-rows <tr> and table-data <td> ( = columns, if you may):
<table> <tr> // <-- Example for the first table row <td>Calories</td> <td><b>277kcal</b></th> </tr> </table>
You might need to specify the width of each <td> on your
style.css
file to for examplemax-width: 50%;
or to a fixed pixel count, that depends on your preferences.Besides that, you only need to fix your "table's" second column text alignment, it should be aligned to the left with
text-align: left;
(you currently have it aligned to the right).Hope it helps, but anyways, I'm really impressed by your results, keep up the good work! 😉👍
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