Blog Preview with Grid and Flexbox

Community feedback

• 

  Ibrahim Mohammed•640

  @MohammedOnGitPosted about 2 months ago

  Hello n33wbie!!! You code structure looks good and well structured. Here are some few suggestions for improving your HTML code based on best practices, performance, and SEO:

  • Best Practices Semantic HTML:

  Consider using semantic tags like <article>, <section>, <header>, and <footer> to better define the structure. For example, the main card content could be wrapped in an <article>, and the publication date, image, and author could be within <section> tags.

  Example:

  <article class="container">
    <section class="image-section">
      <img src="/assets/images/illustration-article.svg" alt="main img" />
    </section>
    <section class="content-section">
      <div class="icn">Learning</div>
      <p>Published 21 Dec 2023</p>
      <div class="card-text">
        <h1>HTML & CSS foundations</h1>
        <p>These languages are the backbone of every website, defining structure, content, and presentation.</p>
      </div>
      <div class="author">
        <img src="/assets/images/image-avatar.webp" alt="Greg Hooper" />
        <p>Greg Hooper</p>
      </div>
    </section>
  </article>
  

  • Consistent Class Naming:

  Make class names more descriptive, using lowercase and hyphen-separated words (e.g., icn can be renamed to tag-label for clarity).

  • Performance Image Optimization:

  Use modern formats like WebP for your images if possible to reduce file size. The illustration-article.svg can remain as SVG if it's a vector image.

  Add loading="lazy" to both images to improve performance by deferring offscreen image loading until the user scrolls near them.

  Example:

  <img src="/assets/images/illustration-article.svg" alt="main img" loading="lazy" />
  <img src="/assets/images/image-avatar.webp" alt="Greg Hooper" loading="lazy" />
  

  3. SEO Improvements Title Tag:

  Make the title more descriptive for search engines. For example:

  <title>HTML & CSS Foundations | Blog Preview Card</title>
  

  • Meta Description:

  Add a meta description to improve SEO. For example:

  <meta name="description" content=" Learn the foundations of HTML and CSS, the backbone of every website, defining structure, content, and presentation.">
  

  • Accessibility Image Alt Text:

  Make the alt text more descriptive. For example:

  <img src="/assets/images/illustration-article.svg" alt="Illustration representing HTML and CSS foundations" />
  <img src="/assets/images/image-avatar.webp" alt="Portrait of Greg Hooper, the article's author" />
  

  • ARIA Attributes:

  If you have any interactive elements, ensure they have appropriate ARIA labels for better accessibility.

  • Minor Code Improvements External Links: Add rel="noopener noreferrer" to external links for security and performance when opening links in a new tab.

  Example:

  <a href="https://www.frontendmentor.io?ref=challenge" target="_blank" rel="noopener noreferrer">Frontend Mentor</a>
  

  By following these suggestions, your webpage will be more structured, accessible, performant, and optimized for SEO.

  0