3-column preview card component

Community feedback

• 

  Tic_Tac1602•360

  @TicTac1602Posted over 2 years ago

  Hello! First of all, very nice job on the desktop version, it's pixel perfect. The difference that we can see in the "Design Comparison" is just because the attribution is on.

  To answer your question on how to have less CSS duplication, you are using in this project ": nth-of-type()" which is nice when you want to tell a specific rule to a specific child. It is a nice use of this rule that you made, but some of them could be donc another way.

  For example, all of your hover buttons have some white color and a pointer and a background color the same as the card so instead of :

  .column:nth-of-type(1) button:hover{ color: hsl(0, 0%, 95%); background-color: hsl(31, 77%, 52%); cursor: pointer; }

  .column:nth-of-type(2) button:hover{ color: hsl(0, 0%, 95%); background-color: hsl(184, 100%, 22%); cursor: pointer; }

  .column:nth-of-type(3) button:hover{ color: hsl(0, 0%, 95%); background-color: hsl(179, 100%, 13%); cursor: pointer; }

  You could have done :

  .column button:hover{ cursor: pointer; color: hsl(0, 0%, 95%); background-color: transparent; }

  Normally you are not losing any style that you already had but you have less CSS to write.

  Hope this help you in this project and for the next ones.

  Best regards

  Marked as helpful

  1

  ---

  

  lazyCoder•50

  @AbbasvoraPosted over 2 years ago

  @TicTac1602 applied your solution works perfectly.

  1
• 

  Shashree Samuel•9,260

  @shashreesamuelPosted over 2 years ago

  Good job completing this challenge

  Keep up the good work

  Your solution looks great however I think that your buttons have a bit too much padding on the top and bottom. I recommend decreasing the value a little bit.

  In order to prevent code duplication in css, create a class that has the properties that are going to be duplicated and then have another class that styles the specific element uniquely, for example if you have a list of buttons that have the same margin, padding and border then you can create a button class and just have a class like button-pink etc to give each button its unique color.

  I perused your css code and you do not have a css reset which ensures that you start off with a clean webpage with no browser styles added since without a css reset your content can show differently across multiple browsers.

  This is what your css should look like but it is not limited to look like this

         margin: 0;
         padding: 0;
         box-sizing: border-box;
         }
  

  Secondly I recommend setting a min-height of 100vh instead of the height property itself so that when the screen is resized, the content will always occupy 100vh of the viewport.

  I hope this helps

  Cheers

  Marked as helpful

  1

  ---

  

  lazyCoder•50

  @AbbasvoraPosted over 2 years ago

  @TheCoderGuru Thanks for your feedback it helped a lot. :)

  0