Very well done! 🎊🎉🚀
I have a few suggestions for you:
-
⭐️ Great job using semantic HTML! Such widgets as cards are more suited to be constructed with the
<article>element, which encapsulates reusable, self-contained content. -
⭐️ A card-like widget's most appropriate heading level is likely
<h2>. Great job!
To avoid breaking hierarchy heading rules, I added an invisible <h1> heading to announce "Frontend mentor project submission" to accessibility users. Visually hidden class (it is also called sr-only which is "screen reader only") 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;
}
You could add it above the card like so:
<body>
<main id="container">
<h1 class="visually-hidden">Frontend Mentor project submission</h1>
<article class="card">
...
-
⭐️ Consider using REM units for margin, padding, and font size.
-
⭐️ Consider the use of custom global variables. 👍
Otherwise, very well done!🎊 Keep it up!👏 I hope you find my comments useful 🫶
Marked as helpful
@DPOsengo
Posted
@solvman Hi, very interesting additions, I learned the sr-only trick and about the correct semantic sizes for card's titles!
@LANRIE-DEV
Posted
@solvman Thank you for the feedback, really appreciated.
Will get to the corrections promptly.
