Submitted 5 months ago

Testimonials grid section main responsive

Sabiq Hashil• 100

@SabiqHashil

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?

I'm proud of creating a responsive Testimonials grid section, showcasing my front-end skills and completing a project from Frontend Mentor. Next time, I'd focus on better code organization with comments, prioritize accessibility, conduct thorough testing, and improve version control practices for enhanced collaboration.

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

Challenges in creating the Testimonials grid section mainly revolved around ensuring responsiveness across different devices, styling elements accurately, and addressing browser compatibility issues. These challenges were tackled by employing media queries for responsive design, breaking down complex styling tasks into smaller components, and testing the project extensively on various browsers. Additionally, optimizing performance and managing version control conflicts were crucial aspects addressed to deliver a polished final product.

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

I would appreciate assistance with improving the accessibility features of the Testimonials grid section, particularly ensuring proper keyboard navigation and enhancing screen reader compatibility. Additionally, feedback on optimizing the project's performance, such as minimizing file sizes and reducing page load times, would be valuable. Any insights on streamlining CSS organization and implementing best practices for version control, especially in a GitHub Pages environment, would also be greatly appreciated.

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 using wrongs elements.

<section>
  <img src="images/bg-pattern-quotation.svg" alt="" class="card__img-quotation">

  <header class="card__header">
     Author Details
  </header>

  <div class="card__quote">
    <p>
      Title
    </p>
    <p>
      Quote
    </p>
  </div>
</section>

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>

Additionally, you want to add proper alt for img inside testimonials because they are not for decoration, It will help us to tell the user who is the author of the testimonial, its recommended to use the author's name as the alt attribute value like alt="Daniel Clifford"

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!

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