Responsive testimonials grid section using BEM naming convention

Community feedback

• 

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  Hi Ta-zzz,

  Well done with RWD :D

  A few tips below:

  • check HTML issues in a report above and try to fix it;
  • instead of section class="card-cntnr" just use the main tag;
  • alt text: picture of daniel clifford => don't need to use words like picture, image, photo, icons in the alt text as it's already announced as being an image. You can just simply type a name of this person, for example: alt="Daniel";
  • for the text Verified Graduate don't need to use the h2 tag, instead of it just use the p tag;
  • also, this is a single page component so the h1 can use with the class sr-only set to hidden visible only for the Screen Readers (we have to use headings gradually and do not skip them => outline algorithm);
  • don't need to use the h3 tag, instead of it just the p will be ok => bold text doesn't have to indicate on heading;
  • check the design pattern: the quote pattern in the 1 box should be under the text;
  • I don't know why you have used width / height auto => also, add max-width to the container.

  Keep coding :D

  Ps. Please, don't forget to upvote any comments on here that you find helpful.

  Greetings :D

  1

  ---

  

  Tazzz•60

  @ta-zzzPosted almost 4 years ago

  @SzymonRojek Hello again! Thanks again for the feedback. I actually updated my code using your advice :D . I'm not sure if it is the best way but the width / height auto is so that the container resizes as the screen gets smaller, as a 100% width / height will overflow.

  0