blog-preview-card with hover animation

Hello Ali Koçak!

Congratulations on completing the challenge. You did awesome! Your HTML structure is well-organized and demonstrates a solid understanding of semantic elements. However, here are some recommendations and comments in terms of web development best practices:

-- Meta Tag for SEO: Add a meta description for better SEO and accessibility:

<meta name="description" content="A blog preview card showcasing HTML and CSS foundation concepts. Part of a Frontend Mentor challenge.">

-- Improve Alt Text: The alt text for the article image could be more descriptive, helping users understand the context better. For instance:

<img src="frontend/assets/images/illustration-article.svg" alt="Illustration explaining the foundations of HTML and CSS">

This gives a clearer idea of the image content.

Heading Hierarchy: Ensure the heading structure follows a logical hierarchy. Your card starts with an <h5> and moves to an <h3>, but typically the hierarchy should flow from <h1> to <h6>. Adjust according to the page structure:

<h2 class="title">HTML & CSS foundations</h2>

Or you can wrap the title in <h3> but change the category tag to a <p> or <span>.

Accessibility Enhancements:

Include an aria-label for the author's name for screen readers:

<h4 aria-label="Author: Greg Hooper">Greg Hooper</h4>

Consider defining fonts in your external stylesheet and providing a fallback in case the custom font fails to load. Example in your external CSS file:

body {
  font-family: 'Figtree', sans-serif;
}

-- And lastly, if you can, avoid using inline styles. Consider separating your style code from your HTML code. This is recommended for scalability purposes.

These updates will make your code more readable, accessible, and well-structured for users and developers. You did great. Happy coding!!!