Hi @BekiaD 👋
Very well done 🤩 Congratulations 🎉
Great job using <main>👍. 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. Your use of the <article> is incorrect. 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 wrap the recipe card with the <article> element. Consider replacing <div> elements with <section> semantic elements to divide your HTML document logically.
Remember, heading levels represent levels of heading subsections, not typographical decoration. It would be best if you did not skip sections; <h1> should be followed by <h2> and so on. I suggest you replace <h3> with an <h2> element for each section, which is the most appropriate for a section heading. 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
- ⭐️ HTML - Living Standard - Headings
- ⭐️ HTML - Living Standard - Article or Section
Another point I'd like to mention is the unit sizing for padding, margin, and font. Try to use REM units for font size, padding, and margin. If body font size is not mentioned, the safe unit is 1rem.
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. Very strange clipping and squeezing are caused by your hard-set margins. It would be much better if you just set the maximum width for the container and use inline margins to center it. For example:
.main-container {
background-color: rgb(255, 255, 255);
max-width: 600px;
margin: 5rem auto; /* 5rem on top and bottom, auto left and right to center */
padding: 2rem;
border-radius: 1.25rem;
}
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! 👍 I hope you find my comments helpful 🫶
Marked as helpful
