3-column preview cards Desktop

Community feedback

• 

  P

  Remus D. Buhaianu•3,125

  @MiculinoPosted almost 3 years ago

  Hey @TaylorC19, good job on completing the challenge!

  I had a look through your code and I have a few suggestions to offer:

  • You're repeating basically the same code for all 3 containers, which is a bad practice. You want your code to be as maintainable and reusable as possible. The only difference between the 3 containers is the colors. The rest is the same.

  • To make sure all containers stay the same and don't have different heights you have to apply some constraints on the parent element. You can use grid or flex display to achieve that.

  Here's a fun game you can use to learn flexbox: https://flexboxfroggy.com/ A video on Flexbox: https://www.youtube.com/watch?v=u044iM9xsWU&ab_channel=KevinPowell A video on CSS Grid: https://www.youtube.com/watch?v=rg7Fvvl3taU&ab_channel=KevinPowell

  Marked as helpful

  0

  ---

  

  Taylor•50

  @TaylorC19Posted almost 3 years ago

  @Remus432 Thank you for the feedback. Could I ask how you would recommend generalizing the 3 containers? The best idea I could think of attaching multiple classes for the three. <div class="categories orange-background"> ... </div> Something like this, where .categories has the general adjustments to the containers and .orange-background has the background color and maybe other exclusive adjustments.

  0
• 

  darryncodes•6,370

  @darryncodesPosted almost 3 years ago

  Hi Taylor,

  You've done really well here, all the elements are there.

  I'd recommend you learn Flexbox, once you master it'll really help with responsive design and positioning items.

  Here is some good resources:

  • A Complete Guide to Flexbox - css tricks
  • Learn Flexbox for free - Scrimba
  • Responsive Web Design - freeCodeCamp

  Stick with it, take your time and it'll be an absolute game changer!

  Marked as helpful

  0