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

React, CSS, JSX

@ridoankhan

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

P
Joe Kotvas 140

@joekotvas

Posted

Great work on this component!

A few quick notes:

Hover state for article title Don't forget about the yellow link hover state! The article title could also stand to be a heaver font-weight.

Sizing The way you specified the component width is interesting, but you will have better results if you specify border-box sizing for all elements:

* {
  box-sizing: border-box;
}

And then remove the width: 50%; declaration on .card and declare max-width: 24rem; instead.

Also, if you make your Github repo public, people can view and interact with your code.

Marked as helpful

0

@ridoankhan

Posted

@joekotvas thank you so much for your nice suggestions. That will help me to improve my design.

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