Hi @RaviBele 👋
Very well done 🤩 Congratulations 🎉
Your use of h tags is excellent 👍. Remember to use landmark elements to structure your HTML document. Landmarks are sections of a page that can be identified by assistive technologies, allowing users to understand the page's structure and navigate it more easily. They are typically defined using certain HTML5 sectioning elements or ARIA roles. Using more semantic HTML instead of plain <div> (non-semantic) elements is better for better accessibility. Consider replacing <div> elements with <section> semantic elements to divide your HTML document logically. The <article> element represents a complete and self-contained piece of reusable content, such as a newspaper article, forum post, blog post, or recipe. 👌You may use the <article> element to wrap the card. Consider wrapping everything with the <main> element. For example:
<body>
<main>
<article class="main-container">
<img .../>
<h1>Simple Omelette Recipe<h1>
<p>...</p>
<section>
<h2>Ingredients</h2>
...
</section>
<section>
<h2>Instructions</h2>
...
</section>
<section>
<h2>Nutrition</h2>
...
</section>
</article>
</main>
</body>
You may read more about it in:
⭐️ HTML - Living Standard - Sections
⭐️HTML - Living Standard - Sectioning content
Another point I'd like to mention is that your text is way too big. Try to use REM units for font size, padding, and margin. If it is not mentioned, the safe unit is 1rem for body font size.
I'm afraid your design is not responsive at all. Please don't hard set the width of containers; instead, use min/max height and let it flow. Remember, HTML documents are pretty responsive by default; we do not need to stay in the way of it by hard-coding widths.
I highly recommend checking out the newly published article "A practical guide to responsive web design" and redoing your project.
Otherwise, very well done! 🚀 Impressive! 🎉 Keep it up! 👍
Marked as helpful
