Blog preview card using flexbox

Community feedback

• 

  Huy Phan•2,300

  @huyphan2210Posted 5 days ago

  Hi, @darlanvsvs

  I checked out your solution and I have some thoughts:

  Simplifying HTML Structure

  Instead of this:

  <main>
    <div class="container">
      <div class="card">
    
      </div>
    </div>
  </main>
  

  You could simplify it to:

  <main class="card">
  
  </main>
  

  This removes unnecessary div elements, which helps streamline your HTML.

  Using Semantic Elements

  1. Headings (h1, h2, h3, etc.) You’re using an h3 for "Learning," but it seems more like a tag or label for the .card rather than a heading. Consider using a <span> instead, as HTML does not have a dedicated tag element.
  2. Dates and Metadata The text "Published 21 Dec 2023" should ideally use a <time> element, possibly wrapped in a <label>:

  <label>
    <time datetime="2023-12-21">Published 21 Dec 2023</time>
  </label>
  

  This better represents the semantic meaning of the content.

  3. Anchor and Heading Order You’ve wrapped an h1 inside an <a>, but the <a> tag doesn’t point anywhere. If you intend to make the heading a link, you should wrap the a within the h1 (not the other way around):

  <h1><a href="#">Your Heading</a></h1>
  

  This maintains proper semantics as h1 is a block-level element, and a is inline.

  4. User Section (.user Class) Instead of a div with .user, you might consider using a <figure> for the user info and a <figcaption> for accompanying details. For example:

  <figure class="user">
    <img src="user.jpg" alt="User Name">
    <figcaption>User Name</figcaption>
  </figure>
  

  This provides semantic meaning to the relationship between the user’s image and their name.

  Hope this helps!

  0