recipe

You should learn more about how to name classes. In the Nutrition section, the numbers at the end should not be aligned with each other.

Feedback as promised. These are all for this challeng but also lay foundational practices for other projects.

1. All content should be contained within landmarks. Everything in this design belongs inside a main landmark, and the attribution should go inside a footer.
2. Get into the habit ASAP of always including a full modern CSS reset at the start of the styles in every project. Look up Andy Bell's or Josh Comeau's and read about why those properties are good to have at the start of the styles.
3. Every img element must have an alt attribute. This image is important content, so that alt must contain a meaningful description of the image. There are some great posts about alt text on the resources channel of the discord server.
4. Remove all the br elements in this. It's very rare you'll ever need or want to use a break in HTML. Margin (or the gap property in flex/grid layouts) is how you create space between elements.
5. Once you've done that you can remove these weird negative percentage margins.
6. Font size shouldn't ever be in px, but it also shouldn't ever be in em units! Make sure you understand what these units are for. Em is a unit that compounds so can lead to a total mess if over-used, especially on font size. Em is for other properties on the rare occasions where you want a property to specifically scale with the element's font size.
7. In the head of the HTML you don't need to repeat the google fonts preconnect links. Only have them once. You should be importing the specific families and weights you need for the project. You can do this all in one font link too instead of a separate one for each family.
8. It is invalid HTML to have list items on their own. Look up the unordered and ordered list elements on MDN. Meaningful HTML structure is extremely important, I really can't stress it enough. Search engines, browsers and all assistive technology relies heavily on the HTML structure being well formed and meaningful.
9. There are extra empty paragraphs in your code that shouldn't be there. That's caused by your HTML not being indented consistently, which makes it extremely difficult to read and to spot bugs. Add the prettier extension into VS code (or other editor) and the HTML can be auto-formatted for you. Make sure every opening tag has a corresponding closing tag (unless a self-closing element like img).
10. Do not use position relative and directional properties unnecessarily. There is no reason for any complex layouts in this challenge, it's almost all default html.
11. Data tables must be coded as a HTML table. Look up these elements and apply them. You will need to use header cells and the scope attribute on the header cells in the design and td (data cells) for the other cells.

This is probably enough for now. Good luck.