3column preview card

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello @tjewlius, Congratulations on completing this challenge!

  I like the work you’ve done here, your solution is almost complete. I’ve some suggestion for you to improve the code/design:

  1.Improve your html markup using meaningful tags to wrap the content, you can replace the div you’ve used for each card with <article>. Remember to wrap big blocks of content with semantic tags and never divs, use divs for small blocks.

  2,Use max-width: 100% for the cards in the mobile version to allow the cards grow 100% of the width considering the paddings and avoid to have a lateral gap (limited by a fixed width).

  3.To make your CSS code easier to work you can create a single class to manage the content that is mostly the same for the 3 cards (paddings, colors, margins and etc) and another class to manage the characteristics that are different (colors and icon), this way you'll have more control over then and if you need to change something you modify only one class.

  4.Don’t use id to give the style of your elements, it's not a good idea because id is a too specific selector used for forms and Javascript code. Instead, use class for styling and let the id for much specific stuff. It's also not advisable to use IDs as CSS selectors because if another element in the page uses the same/similar style, you would have to write the same CSS again. Even if you don't have more than one element with that style right now, it might come later.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Tamale Julius•150

  @tjewliusPosted about 2 years ago

  @correlucas Thank you so much Lucas for that helpful feedback. I am going to update the solution right away.

  1

  

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  @tjewlius I'm happy to hear that Tamale. Continue posting amazing projects.

  1