Blog preview card

Hello LukasBFrontend!!! Your solution for the "Blog preview card" looks good and well structured. Here are suggestions for improving your HTML code in terms of best practices, performance, and SEO:

• Best Practices Semantic HTML:

The <article> element is used correctly for the main content, but the <aside> tag for the date is unnecessary. Instead, use a <time> element with the datetime attribute to better represent the publication date.

Example:

<time id="publish-date" datetime="2023-12-21">Published 21 Dec 2023</time>

• Image Path Consistency:

Make sure your image paths are consistent (use forward slashes /), especially in the portrait image path where you're using backslashes .

Example:

<img id="portrait" alt="portrait" src="assets/images/image-avatar.webp">

• Class and ID Naming:

It’s best to follow consistent naming conventions. Since id is unique, reserve it for specific elements that you expect to be one of a kind on the page. You might use classes like .card-image, .author-section, .author-name for better scalability and maintainability.

• Performance Image Optimization:

Add loading="lazy" to images to improve page load speed by deferring offscreen images.

Example:

<img id="illustration" alt="weird thing" src="assets/images/illustration-article.svg" loading="lazy">
<img id="portrait" alt="portrait" src="assets/images/image-avatar.webp" loading="lazy">

• SEO Improvements Title Tag:

Make the title more descriptive and relevant for SEO:

Example:

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

• Meta Description:

Add a meta description to improve SEO:

Example:

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

• Heading Hierarchy:

Ensure proper heading hierarchy. You have an <h2> but no <h1>. Ideally, every page should have a single <h1> to represent the main heading.

Example:

<h1>HTML & CSS Foundations</h1>

• Accessibility Image Alt Text:

Improve alt text to be more descriptive of the image content.

Example:

<img id="illustration" alt="Illustration showing HTML and CSS" src="assets/images/illustration-article.svg" loading="lazy">
<img id="portrait" alt="Portrait of Greg Hooper, the author" src="assets/images/image-avatar.webp" loading="lazy">

• ARIA for Accessibility:

If necessary, consider adding ARIA labels to improve accessibility on links and interactive elements.

• Minor Code Improvements Hidden Attribution: The attribution is currently hidden using display: none. If you want to keep it hidden but still accessible for screen readers, consider using aria-hidden="true".

Example:

<div class="attribution" aria-hidden="true">
  Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank" rel="noopener noreferrer">Frontend Mentor</a>. 
  Coded by <a href="#">Your Name Here</a>.
</div>

These changes will enhance the performance, SEO, accessibility, and code maintainability of your project. You did great. Keep it up!!!