3 Column Card Component

Community feedback

• 

  Fatih•865

  @fatihcandev

  Posted about 4 years ago

  Great work! My suggestion would be that it would've been better if you'd have created only one card class and use it three times in the html instead of using id's for styling. This will help reduce code and make the code more understandable. Keep it up 👍🏼

  10
• 

  Rayane•1,935

  @RayaneBengaoui

  Posted about 4 years ago

  Hello Helin,

  Congrats for completing your first challenge ! 🙂

  I would like to suggest :

  • Adding border-radius property to your .container class to make your edges rounded. Don't forget to also add overflow: hidden so that the content doesn't mask the effect.

  • Add cursor: pointer to your buttons to make them look clickable.

  • Add font-family: inherit to your buttons to override the default font for buttons.

  • I don't think flex-wrap: wrap is a good idea there as the display will result with 2 rows of 2 cards and 1 cards when the screen size will decrease. Instead, I think that using a media query when the container get nearly pushed and adding flex-direction : column to it might be a better solution.

  • Take a look at semantic HTML tags for better readability. Instead of using <div> elements only, there are plenty of other tags that describe your code better.

  • Lastly, you could remove the outline of your buttons with outline: none. It's a personal preference, but I think it's great especially when buttons are rounded.

  Overall, well done for the challenge and happy coding ! 😃

  01