Responsive 3 column card component with HTML and CSS

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • The “car images/icons” in this component are purely decorative; They add no value. So their Alt Tag should be left blank and have an aria-hidden=“true” to hide them from assistive technology.

  More Info:📚

  https://www.w3.org/WAI/tutorials/images/

  • The headings in your component are being used incorrectly. Since the h1 heading can only be used once, it is always given to the heading with the highest level of importance. This component has three headings of equal importance, so the best option would be to use an h2 heading since it is reusable and it will give each heading the same level of importance.

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding!🎄🎁

  0
• 

  Ixtiyor•80

  @Ixtiyordev77Posted almost 2 years ago

  maladess

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <div class="main"> with the main tag

  To center a content on a page, add min-height:100vh; to the body and remove the height value Give .container a width value instead specifying a width value for each box in .box, there is no need to give .container margin: auto; . Give .box a padding value and remove the height value for a responsive content. Remove the height value in .container , it is not needed.

  Use rem or em as unit for the padding , margin, width and preferably rem for the font-size for more on this watch this https://youtu.be/N5wpD9Ov_To

  Hope am helpful Happy Coding

  0