Testimonials grid section Mobile-first solution

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 7 months ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have a suggestion regarding your code that I believe will be of great interest to you.

  ---

  MAKING ACCESSIBLE TESTIMONIALS :

  • Currently the Testimonials are not accessible because of the usage of non-semantic div elements, Actually we need to use <figure> and <blockquote> elements to wrap the testimonials.

  ---

  • For example:

  <figure>
    <figcaption>
      <img src="./assets/images/image-daniel.jpg" alt="Daniel Clifford" />
      <div>
        <p>
          <span class="sr-only">Testimony Author</span>
          Daniel Clifford
        </p>
        <p>Verified Graduate</p>
      </div>
    </figcaption>
    <blockquote>
      <h2>
        Testimonial Title 
        ... 
      </h2>
      <p>
         Testimonial Quote 
         ...
       </p>
    </blockquote>
  </figure>
  

  ---

  • If you have any questions or need further clarification feel free to reach out to me.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  1
• 

  Sivaprasath•2,520

  @sivaprasath2004Posted 7 months ago

  Hello i`ll wishing for your completion project solution.

  • Nice solution. It`s proper HTML structure format .

  • If I want to recommend the <article>

  • The <article> tag in HTML, introduced with HTML5, serves a vital role in structuring web content. It delineates a self-contained and cohesive piece of content within a webpage, such as blog posts, news articles, forum posts, or even comments. Its purpose is to encapsulate content that could be distributed or reused independently.

  • By employing <article>, developers can semantically differentiate the primary content from peripheral elements on the page, aiding both search engines and assistive technologies in comprehending the significance of the encapsulated content. Typically, an <article> element includes a heading, usually marked up with <h1> to <h6>, providing a clear title or headline for the contained content.

  • This tag's usage aligns with the broader efforts in HTML5 towards improving the semantic structure of web documents, fostering accessibility, search engine optimization (SEO), and overall maintainability of websites.

  0