Recipe page using HTML and CSS

Hello there!

Congrats on completing the challenge! ✅

Your solution looks great!

I have a suggestion for improvement:

📌 Think about using <main> to wrap your main content instead of <div>.

Imagine <div> and <span> in HTML as basic containers. They're good for holding stuff, but they don't tell us much about what's inside or its purpose on the webpage.

This change might not have impact on how your page looks, but it'll make your HTML code clearer and help with SEO and accessibility.

Hope that's helpful!

Keep up the great work!

@JessB74

Hiya! 👋

Congratulations on your solution, it looks very close to the design! I can tell you put a lot of effort into it. I like that you tried to experiment and are willing to do better, it's a great mindset to have. Sadly I don't know why your solution looks different between viewing it on your live server and locally, maybe you could provide screenshots to compare.

Things I like about your solution 🎉

• Use of semantic HTML elements
• Clear descriptive CSS classes

Things you could improve ✍️

• At the moment your body has overflow issues, which means that the content in the body flows out of the dimensions that are set on the body. This is due to position: absolute and the top, left and right values. I'll show you a different approach which will make things much easier for you using a layout tool in CSS called Flexbox:

body {
    font-family: "Outfit", sans-serif;
    color: hsl(24, 5%, 18%);
    font-size: 16px;
    background-color: hsl(30, 54%, 90%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
}

Try comparing the styles on your body to the ones I provided. I also removed the <br> and <footer> you had so you have to do that too to see the results.

If you haven't touched Flexbox yet it might be a lot to take in but taking the time to learn it will definitely pay off! I recommend this great guide if you have time to read.

• Try styling elements more using classes than ID's.

• Try using CSS variables to make your values more reusable.

• Try using relative CSS units like rem and em to make your text more scalable.

I hope you find my feedback valuable, and I would appreciate it greatly if you could mark my comment as helpful if it was! 🌟

Let me know if you have more questions and I'll do my best to answer them. 🙋‍♂️

Happy coding! 😎