3-Column Preview Card

Community feedback

• 

  SB•40

  @stueybrockPosted over 2 years ago

  • Consider changing name of class 'card'. What you've called 'card' is actually the wrapper of multiple cards, so might make more sense to give that a class of 'card-wrapper' for instance and what you've called 'card-col' to just be 'card'.
  • Perhaps an <article> would be better semantically than a <section> for each card.
  • Best practice is to have one <h1> per page, for SEO and accessibility. I would change to a <h2> in this instance.
  • Use an <a> instead of your <input> for the Learn more link – it's better semantically.
  • By setting the image as a background image, you are giving yourself less control over the size and and removing the ability to add alt text for assisstive technologies. I would just have either an inline SVG or an <img> tag.
  • You've set a class of 'card-col-text' but in the styles you've directly targetted the p instead of the class. If you're doing that because the styles were getting overwritten, then you've got a specificity issue and consider restructuring the CSS.
  • Different amount of body text in the <p> changes the width of a section. Is that intentional?

  Marked as helpful

  2

  ---

  

  Samson Sham•140

  @samsonshamPosted over 2 years ago

  @stueybrock Thank you so much for your kind feedback! I followed your suggestions to update my html file, and corresponding class names in css as well. I hope it would look better semantically. For the img, I refer to img vs background-image and consider the car icons not really part of the content so I use background-image instead of <img>. It 's a good reminder for the assistive part though! For the last point, yes, I intentionally want to make sections more responsive so their width are not fixed.

  0