Design comparison
Solution retrospective
I commit a mistake putting a margin like 'main > *' that putted a margin in every son of the main and it was very annoying code with that, but when i realize i was almost finishing the page so a moved on.
What challenges did you encounter, and how did you overcome them?It was quite difficult align the list of nutrition.
What specific areas of your project would you like help with?I need to improve the use of flexbox and learn more how i can deal with the margins.
Community feedback
- @jacob-stone9554Posted 5 months ago
Hi Pedro! Great work on your solution, it looks fantastic! There are a few things I think could be improved to make it even better though.
One thing that I think you would be good for you to try is using an external stylesheet. Right now your styles are embedded into your
index.html
file, and since there are a lot of styles it kind of breaks up the flow of your HTML and would makes the file itself longer than it needs to be (but great work on the styles, your solution looks fantastic). If you want to implement an external stylesheet, all you need to do is create a file likestyles.css
and cut/paste your current styles into that file. Then in your HTML, you would add the line<link rel="stylesheet" href="styles.css">
. This would remove 211 lines of CSS from your main HTML file!You mentioned that it was difficult to align the nutrition list. Your implementation works great but in the future, if you wanted to try a different approach you could create a
<table>
element with two columns, one for the nutrient and one for the amount, applying a border to only the bottom of a table row to achieve a similar look. While my solution isn't perfect and still needs some work, you can look at the code for my solution here to get an idea of how to style a table like that.As far as flexbox and margins go, where and how you used them seems okay for this solution. It might help to declare some sort of flex container that will hold the other elements of your solution, like the instructions, prep time, and so on because it will make your page responsive. I think it helps to think of a flexbox as a "container" that will hold the elements inside of it a certain way. When you declare
display: flex
, a container becomes a flex container. You can then specifyflex-direction
like row or column. If you apply a margin to a parent, that margin is also applied to its children, and their children, and so on.I hope this helps, let me know if you would like anything explained further! Happy coding!
Marked as helpful1
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