3 Column Preview Card Component

Community feedback

• 

  Rayane•1,935

  @RayaneBengaouiPosted over 3 years ago

  Hello Nofar Aviv,

  Congrats for completing the challenge ! 🙂

  I'd like to suggest :

  • Add cursor: pointer to your buttons so they look clickable.

  • Add min-height: 100vh to your body to make sure it covers the area of the entire viewport. Then it will be easier for you to put your container in the middle of the page.

  • Look at CSS resets and the box model. There is initial padding and margin default, so usually people use CSS resets to remove those default behaviors. A good start is to use *{margin: 0; padding: 0; box-sizing:border-box }. You can also take a look at the MDN documentation on the box-model which is something very important to understand for CSS (https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing).

  • You can make your classes more generic. You use left-side, middle and right-side but those classes share a lot of common properties. So creating a card class that contains all shared properties and then creating more specific classes for colors could be a way.Thus, we would have something like : card orange , card lightgreen and card darkgreen.

  • There is no need to add border-radius to the cards as you can directly declare it on the container. I saw that you did it, but also on the cards, so you can remove it on cards and let it only on the container. However, it will not work directly because the edges of the container will be rounded, but cards will overflow it and we won't see the change. To avoid this, you can also add overflow: hidden to your container that will not display everything that overflow the container.

  • You are using float: left but here there is no need to use it so it can be removed. Generally, you won't have to use float ever. Nowadays, with flex, grid, ... You have all the necessary modern functionalities to make layout and positioning. Knowing of float works can still be useful if you have to work with older code bases.

  • When using a flex container it's better to use flex-basis property than width because it will be easier for flex items to resize if the container width changes. Here is a good article to understand what's the difference between width and flex-basis (https://mastery.games/post/the-difference-between-width-and-flex-basis/).

  • Add line-height property to your <p> tag to add spacing between lines.

  • 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.

  Overall, well done for the challenge and good luck in making it responsive !

  Happy coding ! 😃

  1

  ---

  

  Nofar Aviv•120

  @nofaravivPosted over 3 years ago

  Thank you very much for all your suggestions! I'll apply it :)

  0
• 

  Arshad Gilani•15

  @arshad81Posted over 3 years ago

  For a better idea about making websites responsive checkout this video. It mght help you out https://youtu.be/srvUrASNj0s

  0

  ---

  

  Nofar Aviv•120

  @nofaravivPosted over 3 years ago

  Thank you!

  0
• 

  Tejas•265

  @Tejas-117Posted over 3 years ago

  Solution looks pretty good!

  A small suggestion: Use common class for buttons and apply all common styling and hover state using it.

  -Happy coding :)

  0

  ---

  

  Nofar Aviv•120

  @nofaravivPosted over 3 years ago

  Thank you for the suggestion!

  0