Four card feature section master

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 3 years ago

  👋Hi Jonathan!

  I have some feedback on this solution:

  • I noticed the card border color is darker then it should.
  • The box shadow opacity is too high, try to reduce it.
  • For any decorative images, you should leave the alt="" empty and add aria-hidden="true to make all screen readers ignore those images. In this case all images are decorative images.
  • For each card title, it should not be a heading. It should be a paragraph tag. Heading tag is commons used for titling article or section.
  • Also you may want to make the parent of the cards to be ul and make each card to be li. It's optional but I think it's more semantic than div.
  • For the CSS selector, keep the specificity as low as possible. It will make it easier to maintain and override styling if needed. Using > will increase the specificity unnecessarily. I recommend to use BEM class naming convention to make you write better CSS.
  • Using % for margin, padding, and gap is not recommended since on wide screen and on small screen it may behave weirdly. Use rem or em instead.

  That's it! Hopefully this is helpful!

  Marked as helpful

  3

  ---

  

  Jonathan•295

  @Nathan-FrontPosted about 3 years ago

  @vanzasetia This is actually a helpful information. Never knew I could just leave those alt value empty for decorative images. And for the use of rem/em, still learning how to use it properly so yeah gonna stop using percentage and start using these in my future challenges and so does with the use of BEM. I'll try fixing my code with these suggestions. Thanks You guys really are great here, been learning a ton from all of your comments/suggestions in these challenges.

  1