Submitted 5 months ago

testimonials-grid-sectionResult

homciAbdallah• 210

@homciAbdallah

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Testimonials grid section

HTML
CSS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

What are you most proud of, and what would you do differently next time? Progress further in lessons

What challenges did you encounter, and how did you overcome them?

What challenges did you encounter, and how did you overcome them? Definitely control the grid

What specific areas of your project would you like help with?

What specific areas of your project would you like help with? Progress further in react js

Community feedback

Abdul Khaliq 🚀• 72,660

@0xabdulkhaliq

Posted 5 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 element, 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!

homciAbdallah• 210

@homciAbdallah

Posted 5 months ago

Thanks for the advice, keep advising me

<figure> and <blockquote> I still have a lot to learn

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord