3 Column Preview Card

Community feedback

• 

  tommynueve•25

  @tommynueve

  Posted about 4 years ago

  Hey, really good job overall! Some things that I noticed which require a bit of improvement:

  1. On desktop view, there is too much whitespace between the buttons and the end of the card, and maybe the margin between the button and the text could be slightly shorter. I noticed you used the card height fixed to 70vh, I will advise against setting card heights based on vh as it can make things stretch too much, you can just set them to a specific height and it will make your development resemble the design better.

  2. Buttons increase slightly on size when hover over them, and causes the button to appear as if it is moving down. That is because you are adding border on top of the actual height (In case you don't understand why, I recommend you check on the css box model). A little trick I learned over the years is to add the border to all buttons in their default state, and then on :hover you can just remove the background color (or set it to the same as the card), then they will all still have the same size. Bonus: adding cursor: pointer; to all buttons is normally a good idea.

  3. The contrast between font color and background color in the yellow card is too low, below accesibility guidelines, you need to darken it a bit. What I would do is to initially pick the same color as the card itself (at this point you won't be able to see the text as it will have the same color as the bg) and then with the color picker start moving it towards white, until you reach at least 4.5:1 contrast ratio. You will end up with a "yellowish-white". If you are just learning FE development, don't bother about everything accesibility related yet, but I do suggest paying attention to color contrast as it will grow on you to the point where you will spot it right away ;)

  01

  Marked as helpful