Testimonials grid section (mobile first) using HTML and CSS (Grid)

Community feedback

• 

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  Hi Jose,

  Welcome here. Well done! :D

  I have only checked your HTML structure by inspecting the page in my browser, a few tips for you:

  • I would give h1 as the main tag for the Screen Readers with the class -sr-only set to hidden, then h2 only for a person name and status (graduate) as a paragraph but of course your solution is also fine (it is a bit tricky to decide which h1-h6 we have to choose). We can also have h1 and 2 x span tag inside of it (I think it is better). Check this article from the blog CSS-tricksHTML for Subheadings and Headings;
  • the bold text: IMO it shouldn't be treat as h2. This text is a description and looks like an intro but doesn't have to be the heading. A few weeks ago I would do it like you but now I have changed my point of view about it. It is very easy to overuse semantic tags;
  • don't need title attribute in the img tag;
  • RWD looks great but IMO lots of thing are happening and the text is flickering, moving a bit. I think that kind of effect is nice but it is hard also to read :D anyway, congrats for an invention;

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

  Greetings :D

  1