Skip to content
Submitted 7 months ago

Testimonials Grid Section

Jan Kotvaš•290
@DrakeHermit
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Testimonials grid section
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

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

I am proud that I managed to finish this challenge and make it look decent along the way. I know my solution isn't perfect but it being as close to perfect is what I was aiming at.

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

I encountered numerous challenges some harder to solve than others. But the biggest challenge I faced was the fact that I put max-width on my article cards and because of that when I went to make the desktop version of the design it looked awful, thankfully developer tools helped me out tremendously. I also had one more problem with the quotation marks on the first card, and at the end I didn't manage to make it look like I wanted with declaring the z-index so I ended up putting opacity instead

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

I would love if someone looked at my HTML and CSS and told me if I needed to improve something, I know my code isn't perfect but sometimes when we strive to make everything perfect we miss out on actually learning.

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, i see you have used visually hidden headings for each testimonials but you stated them as card.
    • Even though you hard coded those heading still 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>
    • 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" instead of "Profile Picture".
    • 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
    Jan Kotvaš•290
    @DrakeHermitPosted 7 months ago

    @0xabdulkhalid Thanks a bunch for the advice, I'll make sure to think about the accessibility in the next projects I attempt. I never really thought about using figure in my HTML, that will help me quite a bit in the future.

    0

Please log in to post a comment

Log in with GitHub

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