Responsive Recipe Page - Vite

What are you most proud of, and what would you do differently next time?

I'm proud of how I paid more attention to using semantic html and how closely I tried to get the solution to match the design.

Next time I would try to rely less on help to finish the solution. This time I think I got about 75% on my own so next time I'd like to be able to make everything by relying on my own knowledge and experience.

What challenges did you encounter, and how did you overcome them?

I had a difficult time with the bullet point stylings of the <ul> and <ol> list items.

It wasn't possible to create spacing between bullet points like in the design through simple css styling, so I had to learn a new method... You can remove the original bullet points created by html with list-style: none, and add new bullet points with ::before in css and add content: '•'. This way you can handle the spacing and styling with more freedom.

Another fun new thing was the <hr /> element which I didn't know about previously. But a very quick and useful line break that you can use by giving it a {border: none; height: 1px; background-color: brown}. This gives you a nice horizontal line to work with that breaks up sections. Super neat.

What specific areas of your project would you like help with?

One issue I had was the nutrition table at the bottom of the page. I originally tried to use <table> but found it to be more difficult than using a simple grid. Not sure if it was a good solution but it just made more sense to me. So my question is for any one that would personally choose a <table> over a grid layout:

1. How would you think about splitting up the contents of the table
2. How would you apply all the spacings in the table
3. How would you style the row gaps to have a colored line.

Thanks for your help!