Three Column Card Preview Component [Responsive - Css Grid]

Community feedback

• 

  Quelleris•190

  @QuellerisPosted over 1 year ago

  Hello Abanoub. Congrats on completing this challenge. I have a few suggestions for you:

  • you should avoid multiple <h1> elements. Generally, one page should have only a single <h1> element that marks up a page title. In this challenge you don't have a whole page so you can add visually hidden <h1> element with class="sr-only".
  • It seems that the car icons are decorative, so you can leave the alt attribute empty (alt="") so they can be ignored by screen readers.
  • notice that some elements like buttons or cards have similiar style. Instead of adding the same style to each element and repeating code, you can make a single class for example card-button and add this class to every button.

  .card-button {
      padding:  12px 20px;
      margin: 30px 15px;
      border: 1px solid transparent;
      border-radius: 25px;
      cursor: pointer;
      transition: .2s;
  }
  

  and then in HTML:

  <button class="card-button sednas-b">Learn More</button>
  

  I hope this helps. Happy coding.

  Marked as helpful

  0