Submitted 2 months ago

HTML, CSS Flexbox

Vinit Kaushik Kadam•80

@vinitk201104

Preview site View code

This is a solution for...Blog preview card

HTML
CSS

1newbie

Design comparison

SolutionDesign

Community feedback

Aakash Verma•9,520

@skyv26Posted 2 months ago

Hi @vinitk201104, 👋

Great effort in setting up the structure! However, I noticed a couple of points that could be improved for better semantic accuracy and cleaner output:

Semantic Tag Usage
- Since this is a single card, using the <section> tag isn’t necessary. Semantic tags like <section> are generally meant for grouping related content that makes sense as a standalone section in a document.
- In this case, a simple <div> would suffice for wrapping the card. This keeps the markup clean and avoids overusing semantic tags unnecessarily. 👍
Extra Section Issue
- It seems an additional empty <section> (<section id="shadow-host-companion"></section>) is being rendered in the output.
- Please review the code and debug why this is being generated. It might be coming from a framework, library, or script inadvertently adding this to the DOM. Clearing this will result in a cleaner and more efficient output. 🔍

Here's a quick example of how the structure could look with <div>:

<body>
  <div>
    <div class="illustration-article">
      <img src="./assets/images/illustration-article.svg" alt="">
    </div>

    <div class="info">
      <button>Learning</button>
      <p class="date">Published 21 Dec 2023</p>
      <h1>HTML & CSS foundations</h1>
      <p class="sub-info">These languages are the backbone of every website, defining structure, content, and presentation.</p>
    </div>

    <div class="profile">
      <img src="./assets/images/image-avatar.webp" alt="">
      <p>Greg Hooper</p>
    </div>
  </div>
</body>

This way, the content remains well-structured while being semantically appropriate. Let me know if you need help troubleshooting the extra <section> or updating the tags! 🚀

Cheers,
Aakash 😊

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