Hi @ZionCodes1 👋
Very well done! 🎊🎉🚀
I have a few suggestions for you:
- ⭐️ Use should look into semantic HTML instead of plain
<div>elements for better accessibility. I have some suggestions on how you can help your project. First, the<main>element represents the dominant content of the<body>and expands on the central topic of the document. Such widgets as cards are more suited to be constructed with the<article>element, which encapsulates reusable, self-contained content. - ⭐️ Titles and headings are usually denoted by
<h1>,<h2>,<h3>, and so on. Do not skip levels of headings. Regular text is generally encapsulated by<p>. - ⭐️ There is a
<time>semantic HTML element. It would be best if you utilized it whenever it is appropriate.
With that being said, I would redo your code as so:
<body>
<main class="main-container">
<h1 class=".visually-hidden">Frontend Mentor project submission</h1>
<article class="card">
<img class="card__img" src="article.png" alt="article-pic" aria-hidden="true">
<button class="btn">Learning</button>
<p class="card__published">Published <time datetime="2024-01-28">28 Jan 2024</time></p>
<h2 class="card__title">...</h1>
<p class="card__text">...</p>
<div class="avatar">
<img class="avatar__img" src="avatar.png" alt="avatar picture" aria-hidden="true">
<p class="avatar__name">Greg Hooper</p>
</div>
</article>
</main>
<footer>
... attribution goes here
</footer>
</body>
The <h2> heading is the most appropriate for the card-like widget. To avoid breaking hierarchy heading rules, I added an invisible <h1> heading to announce "Frontend mentor project submission" to accessibility users. Visually hidden class for the <h1> :
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
Learn more about semantic HTML elements here
Please remember that block-level elements stack one on top of the other. So you do not need to encapsulate them into an extra <div> to apply styles. The only element that is not block level within the card is <img>, which could be "converted" to block level through a simple reset, which should be used almost on every project anyways:
img {
display: block;
max-width: 100%; /* ensures images does not overflow the container */
}
Otherwise, very well done!🎊 Keep it up!👏 I hope you find my comments useful 🫶
Marked as helpful
@ZionCodes1
Posted
Thsnk you so much @solvman
