Not Found
Request path contains unescaped characters
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

Three

Dody 10

@dodytrifa

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello everyone, please check out the three column challenge. I appreciate your feedback

Community feedback

P

@Miculino

Posted

Congrats on completing the challenge, @dodytrifa

You've done quite a nice job and the responsive design works as expected!

Just a few suggestions based on your final solution that I hope will be useful to you:

  • Increase the size of the buttons just a tiny bit

  • Missing the background color that's in the original design

  • Try to remove the vertical scrollbar. Use absolute positioning for the attribution that's at the bottom of the page. That can help fix the scrollbar situation

  • You should add class names for the other elements as well (h3, p, img)

  • Consider implementing BEM methodology https://en.bem.info/methodology/

  • You can vertically and horizontally center your container by setting flex display on body and using min-height: 100vh and align-items: center and justify-content: center properties

Hope this helps. Keep up the great work!

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