@jacob-stone9554
Posted
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 like styles.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 specify flex-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 helpful
