Not Found
Not Found
Your session has expired please log in again.
Your session has expired please log in again.
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

Responsive blog preview card

@bossthekhani

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

@nikhilka2305

Posted

Good one. But I think a few improvements could be made if you want it to look closer to the provided design.

  1. The solution didn't use semantic HTML elements. The code will be more readable if semantic elements are used.
  2. Accessibility issues can be resolved if semantic elements are used.
  3. Lay out looks decent in all devices, but I think the card could be moved to the center for a better look.
  4. The code structure is good, but I think using semantic elements will improve it and make it more readable and reusable.
  5. There is noticeable difference from the provided design.
  • The card is not in the middle. Using margin: auto can help.

  • Box shadow is not like in the design and the white background doesn't look that well.

  • The attribution section looks accidentally added without any name or details.

  • The text font and stylings look different.

  • There is no hover / focus effects for the card.

Good luck brother.

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