Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blog preview card using basic css

@henrikkudesu

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

It didn't take me long to do it. There may be some adjustments to the measurements and sizes, but I think it is satisfactory.

Community feedback

Sayf3r 80

@Sayf3r

Posted

Hi Leonardo,

You forgot the hover effect on desktop version when you go over the title.

On full screen you desktop version looks great but when your page only take the half of the screen your card is to tight because of the wh unit on the card. Same thing for the yellow background on the element with card__post--tag class.

To keep the responsive and give min width to your card you can use clamp() property. I tested with width: clamp(320px, 40%, 40%); on .card .

Overall you did a very good job :)

Marked as helpful

1

@henrikkudesu

Posted

@Sayf3r Thank you for your feedback! Sometimes I feel lost when I'm giving sizes to properties. I need to learn better how to choose class sizes, vh, percentage, etc.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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