Responsive Testimonials Grid Section using CSS Grid

Community feedback

• 

  Joanna•370

  @JoannaLapaPosted about 2 years ago

  Hi Anton!

  My congratulations on finishing the project! Personally, I had also good feelings about this challenge. I noticed that your project is responsive on all devices also tablet - the layout looks good. I see that you took care of such details as a border on pictures and box-shadow on each article.

  Some improvements which I can recommend to you are connected with semantic issues.

  I see that you use span for: <span class="customer-name">Daniel Clifford</span> <span class="customer-state">Verified Graduate</span>

  In my opinion this is better to use here the tag <h2> or <p> for the "customer-name" and <p> for the "customer-state". I personally used <h2> for the "customer-name" in my project, but I see that you used in same section <h1> lower so (If I am not wrong) using <h2> before <h1> would be recognized as a mistake.

  The reason that I recommend you to replace <span> is that span has no semantic meaning and we should use it only when nothing other is possible. It is perfectly explained on mdn documentation "The <span> HTML element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate. <span> is very much like a <div> element, but <div> is a block-level element whereas a <span> is an inline element."

  You can also consider replacing <div> tag with <article> tag for:

  <div class="testimonial review-1"> etc. <article> is a correct usage for an user-comment [here on mdn more about <article>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article).

  I also recommend you the video of Kevin Powell who made this project and published the video focusing on grid conception, you can compare your version and maybe you'll learn something new: Kevin Powell's solution on GitHub Kevin Powell's solution with an explanation on youtube

  I hope that you will find my feedback helpful, Happy coding! Joanna

  0