Blog Preview with Grid and Flexbox

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" />

1. 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.