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

3-column preview card component using Flexbox

@tahakhairy

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


all feedbacks are welcomed. thanks.

Community feedback

P

@Miculino

Posted

Good job on completing the challenge, @tahakhairy!

Your final solution looks pretty much the same as the original design and the responsive design works as expected.

I looked through your Github repo and I have a few suggestions that I hope will prove useful to you:

  • Format your HTML code better so it's easier to read and understand

  • Use more classes - there are a lot of HTML elements in your code that don't have any classes

  • You can use SVG files with the <img /> element - you don't have to copy all that SVG code

  • Use box-sizing property in your CSS code https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

  • It's good practice to do a basic reset https://stackoverflow.com/questions/46923610/css-resetting-margin-and-padding/46923672

Hope these suggestions will help. Keep it up!

Marked as helpful

0

@tahakhairy

Posted

@Remus432 Thank you very much. That was really helpful, I appreciate it.

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