A blog preview card made in HTML and CSS.

What are you most proud of, and what would you do differently next time?

I am proud to have added a hover effect to the "learning" button, which is actually a link. I also added an effect on the illustration image when hovering over the card.

Here's how I implemented this functionality:

HTML code:

<div class="bloc-card">
  <div class="card-image">
    <img src="./assets/images/illustration-article.svg" alt="Article Illustration">
  </div>

  <div class="card-description">
    <a href="https://www.frontendmentor.io?ref=challenge" target="_blank" class="btn-action">Learning</a>
    <p>Published 21 Dec 2023</p>
    <h1>
      <a href="https://www.frontendmentor.io?ref=challenge">HTML & CSS Foundations</a>
    </h1>
    <p class="lang-descript">
      These languages are the backbone of every website, defining structure, content, and presentation.
    </p>
  </div>

  <div class="profil-bloc">
    <img src="./assets/images/image-avatar.webp" alt="Greg Hooper Avatar">
    <p>Greg Hooper</p>
  </div>
</div>

CSS code:

.bloc-card .card-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.2s ease;
}

.bloc-card:hover .card-image img{
    transform: scale(1.1);
}

I also did the responsive design, and I'm very proud of it 😁😁 !

What specific areas of your project would you like help with?

I would appreciate feedback and assistance in the following areas:

• Responsiveness: While I have implemented media queries, I would love to know if there are better ways to optimize the layout for different screen sizes.
• Accessibility (a11y): Are there any improvements I can make to ensure the card is accessible to all users, including those using screen readers?
• CSS Best Practices: I used CSS custom properties, Flexbox, and Grid. Are there any areas where I could improve efficiency or write cleaner, more maintainable CSS?
• Hover & Focus States: I implemented hover and focus states for interactivity, but I’d appreciate suggestions on improving the user experience further.
• Code Optimization: Are there redundant or unnecessary lines in my HTML and CSS that could be removed or improved for better performance?

Any feedback or suggestions would be greatly appreciated! 🚀