Submitted 2 months ago

Blog Card (HTML & CSS)

Long Mai•90

@looonnng

Preview site View code

This is a solution for...Blog preview card

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I think I followed the styles guide pretty close and got the hover effect right.

What challenges did you encounter, and how did you overcome them?

I was struggling with the margin/padding of mobile layout. I wanted to write mobile first. However, the card component was giving me issues with overflowing image and that was a time sinker. Eventually, I just stuck with it and try to finish the rest of the code instead of tinkering prematurely.

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

Any feedbacks or refactoring are welcome!

Community feedback

Coco•60

@cocoelizabethPosted about 1 month ago

Great job! To align more closely with the brief, you could add :focus, and :hover styling to the blog title to make it turn yellow, like you did with the active class. For example:

.title {
  font-size: var(--fs-base-l);

  & a:active, a:hover, a:focus {
    color: var(--color-primary);
  }
}

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord