Responsive 3-Column Preview Card Component Using CSS Grid

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello @ellenearteleg,

  I have some suggestions regarding your solution:

  HTML

  • About<h1>it is recommended not to have more than one h1 on the page . You can add a <h1> with class="sr-only" (Hidden visually, but present for assistive tech). Then swap those <h1> by<h2>.

  .sr-only {
  	border: 0 !important;
  	clip: rect(1px, 1px, 1px, 1px) !important;
  	-webkit-clip-path: inset(50%) !important;
  		clip-path: inset(50%) !important; 
  	height: 1px !important;
  	margin: -1px !important;
  	overflow: hidden !important;
  	padding: 0 !important;
  	position: absolute !important;
  	width: 1px !important;
  	white-space: nowrap !important;            
  }
  

  • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images in this challenge , all the images are decorative.

  • Clicking those "learn more" buttons would trigger navigation not do an action so button elements would not be right. And for future, it is essential if you include a button in a form element without specifying it's just a regular button, it defaults to a submit button. Though, so it's a good idea to make a habit of specifying the type . So use <a> instead.

  • Don't capitalise in html, let css text transform take care of that. Remember screen readers won't be able to Read capitalised text as they will often read them letter by letter thinking they are acronyms.

  • Using <section> tag for each card is not really a good choice . Section is not meant to be used anytime you feel tempted to use a div . section is for a bigger chunk of content often titled by <h2> Read more about usage notes

  • border-radius and overflow hidden to the container that wraps the three cards, so you don't have to set it to individual corners.

  hopefully this feedback helps.

  Marked as helpful

  0

  ---

  

  Ellenear Teleg•60

  @elleneartelegPosted over 2 years ago

  @PhoenixDev22 I was actually debating whether to use button or anchor link and although hesitant, settled for the button. You've covered a lot of the things I don't know yet, so I'm really thankful for your feedback. I will incorporate these into a perhaps a better version if this, or for the following challenges that I will take on. Thank you so much for the additional reference as well!

  1
• 

  Kacper Kwinta•1,405

  @kacperkwintaPosted over 2 years ago

  Hi! Looks great on mobile, desktop version is nice too. The background color in the design is not white, look there for right color :), and border thickness in buttons hover is more than 1px

  Marked as helpful

  0

  ---

  

  Ellenear Teleg•60

  @elleneartelegPosted over 2 years ago

  @kacperkwinta that's something I've actually just realized when I've looked at the comparison 😅 definitely will work on training my eyes more! Thank you for your feedback!

  0