3-column preview card component with grid

Community feedback

• 

  María Antonieta•100

  @Maromani248Posted over 2 years ago

  Hi! Thanks for the feedback and advice, I'll put them into practice. I've recently been in the world of web development, so they help me a lot. Thanks again.

  0
• 

  szam•800

  @k-stopczynskaPosted over 2 years ago

  Hi!

  Congratulations on finishing this challenge!

  Things you can improve:

  1. accessibility: use header, main and footer tags instead of so many divs. Read about BEM.

  2. Your solution is not very responsive due to position relative on the .group class. Try using flex on a parent element so it will shrink and grow as the resolution changes.

  3. You can use shorthand for grid-template-columns if they are supposed to be the same size like: grid-template-columns: repeat (3, 1fr).

  4. You use display: grid on card class but in this form it doesn't do anything actually, because you don't use any columns in there. What was your goal there? Are you certain that was the best solution to display just one card? Maybe flex would be better?

  If you need some clarification on flex and grid check out Kevin Powell on youtube, he's a king of css and clarifies everything in just 20 minutes.

  On the positive side: it looks good on desktop, very similar to the design nice of you using css variables

  Hope this helps. Happy coding!

  0