Submitted 9 months ago

Blog Preview Card

ZionCodes1•50

@ZionCodes1

Preview site View code

This is a solution for...Blog preview card

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Pls let me know me if any correction is needed. Thank you.

Community feedback

solvman•1,650

@solvmanPosted 9 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 helpful

ZionCodes1•50

@ZionCodes1Posted 9 months ago

Thsnk you so much @solvman

Tenzin Choeda•210
@tenze21Posted 9 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 the body so that the card doesn't stick to the device edges.

it advisable to use rem/em units for font-size and also the margins and paddings as it helps with scalability.

Otherwise everything looks great to me ✌️. Hope you find my suggestions useful 😊.
Marked as helpful
0
ZionCodes1•50
@ZionCodes1Posted 9 months ago
Thank you so much @tenze21
1

Please log in to post a comment

Join 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