Recipe Page

Hi @jaysonalfie,

Nice project! I have a few suggestions to help improve your code:

Semantic HTML: I noticed that you're missing some semantic elements. Consider adding <main>, <section>, or <article> to replace <div> elements where applicable to enhance accessibility. In React, you can also reduce the number of <div> tags and make your code cleaner by using <></> (React fragments). This can help make your frontend code more readable and clean.

Bundler: I also noticed you're using CRA (Create React App). While it’s a common tool for React projects, it hasn’t been updated since 2021. I would recommend switching to Vite as it's easier to learn, faster, and more efficient for modern React projects. Alternatively, you can also explore Webpack, which is more customizable if you want more control over your bundling process.

Keep up the great work!

Best, Teodor

Hey love the solution, something I noticed,

• Setting a height and width attribute to your <img> will increase performance to reduce layout shifts and improve CLS, It reserves the space on the page for the image,
• These px values would be better in rem or em like the rest of your code,

ol {
  list-style: initial;
  margin-left: 15px;
  padding-left: 10px;
}
@media only screen and (min-width: 375px)

• Having better alt="" descriptions for accessibility is a must check this out Write helpful Alt Text to describe images,
• You should apply a full modern reset to make things easier as you build, check out this site for a Full modern reset,
• Check out this article from a Frontend mentor dev about responsive-meaning.

Hope some of this information is helpful, I look forward to seeing more from you, Happy coding!