Design comparison
Solution retrospective
Pls let me know me if any correction is needed. Thank you.
Community feedback
- @solvmanPosted 10 months ago
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 helpful0 - ⭐️ Use should look into semantic HTML instead of plain
- @tenze21Posted 10 months ago
Hey, congratulations on completing the blog preview card challenge 🎉. Probable suggestions would be:
- The card tends to be really large on mobile screens it's sticking to the edges. I would recommend to use
max-width
instead of a fixed width on the.all
class. - Use some
padding
on thebody
so that the card doesn't stick to the device edges. - it advisable to use
rem/em
units forfont-size
and also themargins
andpaddings
as it helps with scalability.
Otherwise everything looks great to me ✌️. Hope you find my suggestions useful 😊.
Marked as helpful0 - The card tends to be really large on mobile screens it's sticking to the edges. I would recommend to use
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord