Skip to content
OverviewSolutions
2
Comments
2
P

H3NRY-JR

@H3NRY-JR60 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • Nitiema Allassane•230
    @NitiemaDev
    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! 🚀

    A blog preview card made in HTML and CSS.

    1
    P
    H3NRY-JR•60
    @H3NRY-JR

    I would add those properties to attribution class, allowing the card to be horizontally centralized

    .attribution {
  position: fixed;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
    Marked as helpful
  • P
    H3NRY-JR•60
    @H3NRY-JR

    I recommend you to look into figma's project to help with the card's width and height, it helps with padding sizes too. Also, try to use the prop margin:auto inside .container to vertically align your content. Keep on going with the hard work ;) Kudos from Brazil!!!

    Marked as helpful