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

Simple blog preview card

@filipangel

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Grimm-N 150

@Grimm-N

Posted

Hi! Your website blog card looks fantastic! I have a few friendly suggestions if you’re open to them.

HTML: You might want to try using Modern CSS Reset [https://piccalil.li/blog/a-more-modern-css-reset/] — it could help streamline your styling.

Also, simplifying the code by reducing the number of <div> containers could be beneficial.

I noticed that the spacing is consistent at 16 pixels (1rem) everywhere. You could simplify this with .card > * + * { margin-top: 1rem; }.

Another idea is to add a hover effect for the headings to change their color when hovered — it’s a quick tweak that can really enhance the look!

And by the way, I noticed the mobile version looks the same as the web version right now. It would be awesome if it could adapt to different screen sizes.

Thanks for considering these suggestions! Good luck!

Marked as helpful

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