Responsive Testimonials Grid using HTML/SCSS/BEM

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  HTML 📄:

  • The alt attribute should not contain the words "image", "photo", or "picture", because the image tag already conveys that information.

    You need to provide an alternative text to tell the user who is the author of the testimonial, its recommended to use the author's name as the alt attribute value. e.g. `alt="Daniel Clifford"

    If you want to learn more about the alt attribute, you can read this article. 📘.

  • One of the key characteristics of <article> tags is that they are self-contained, meaning that the content within the tag is complete and can be understood on its own, without any additional context from the rest of the page.

    In this case there is a <article> tag only to have the name and rol of a person, does this information independent content? Or does it need more context? In my humble opinion, it is not necessary to use the <article> tag.

    To improve the semantics of your code you should use the <figure> and <blockquote> tags to wrap the testimonials, with this, you will be able to encapsulate the author and the citation of the testimonial.

    Example:

    <figure>
       <blockquote>
          <p>"Example of a testimonial"</p>
       </blockquote>
       <figcaption>
          <p>Example of the author</p>
       </figcaption>
    </figure>
    

    You can read more about the <figure> and <blockquote> tags with this two links:

    1. Quotations, Citations, and Blockquotes | CSS-Tricks
    2. Quotations | MDN Web docs

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  0