3-column preview card component challenge hub

Community feedback

• 

  P

  Remus D. Buhaianu•3,125

  @MiculinoPosted almost 3 years ago

  Congrats on completing the challenge, Dev Rathore!

  It looks quite good. I had a look through your code. Here are a few observations / suggestion that I hope will be useful:

  • There's a bit too much space above the card on smaller screen sizes

  • Use the box-sizing: border-box property https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

  • Add a transparent border or use outline property for the button so that you don't get that weird effect where the card's height increases because of the button hover

  Marked as helpful

  0

  ---

  

  Dev Rathore•2,600

  @GitHub-dev12345Posted almost 3 years ago

  @Remus432 Thanks For This Suggestion, i apply your suggestion in my code, and the button weired affect is gone dude, thanks you so much.

  0
• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted almost 3 years ago

  Well done, that looks nice. Here is a few suggestion.

  • these <button class="btn">Learn More</button>, in my opinion should be an anchor element . An anchor element should be used to navigate to another section or another page whereas a button should be used in cases like opening a modal box, play , pause etc.
  • Having one h1 element per page is considered best practice as it is beneficial to assistive technology users. What i would have done different in this project was to have a visually hidden h1 using an sr-only class eg <h1 class="sr-only>My favourite cars</h1> . The current h1 , i will then change then to h2 elements.

  0