3 columns preview card (HTML, CSS)

Community feedback

• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted over 2 years ago

  Hay ! iajlsdnt Good Job on challenge

  These below mentioned tricks will help you remove any Accessibility Issues

  -> Add Main tag after body <main class="container"></main>

  -> Always use the "alt attribute" and just leave it empty bt.. always add it with img tag.

  -> Learn more on accessibility issues

  If this comment helps you then pls mark it as helpful!

  Have a good day and keep coding 👍!

  Marked as helpful

  0

  ---

  

  T

  Chamu•13,130

  @ChamuMutezvaPosted over 2 years ago

  @Crazimonk , just to point out something about alt attributes

  • it is correct that an img should have an alt attribute
  • decorative images should have an empty alt value but if the image is the message, the alt value has to be descriptive to provide that information when the image fails to load or help assistive technology users

  Marked as helpful

  0

  

  Naveen Gumaste•10,480

  @NaveenGumastePosted over 2 years ago

  @ChamuMutezva Ya ik that, did my comment gave any other meaning?

  0

  

  T

  Chamu•13,130

  @ChamuMutezvaPosted over 2 years ago

  @Crazimonk, you did well to point it out - what was missing was, when should the img alt value be empty.

  1
• 

  Karishma Garg•1,010

  @karishma-devPosted over 2 years ago

  Hi @ameliajulis, Your solution looks good and responsive. :)

  Some things I noticed in your code:

  1. The media query for 768px is not needed, as without this also your solution is looking fine.
  2. In .box class, remove max-height. As is narrow widths like below 200px the button in the card is not visible because the max box height is set to 28.1rem. But without it, the height gets adjusted according to your content.
  3. Add comments in your code, so it will help you and other users to read your code effectively.
  4. Add an alt attribute in your img tag to describe the image used so if the image is not visible due to some reason, this alternate text will help the user know what the image was about. This will also remove the HTML issues that are shown in your report by the frontend mentor.
  5. Add hover effect on buttons.
  6. Add the footer inside the body tag, as all the visible content of a webpage should be inside the body tag.

  Hope this helps you. Good luck!

  0