Skip to content
Submitted 7 months ago

Testimonials Grid Section

Tharun Raj•1,330
@Code-Beaker
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 had a lot of fun coding this one because of the beautiful color palette! This one helped me get my hands on with CSS grid.

When I was trying to make it responsive for mobile, I had a bit of an issue and searched for a solution on YouTube. But, I think I need to get along with reading documentations on solving issues.

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

Making it responsive was a bit of a challenge. But thankfully, a friend on the Discord community helped me out.

This project also motivated me to learn more about CSS grid

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

I would like to know how it looks on your devices.

Any suggestions on how I can improve is welcome! 🎉

Community feedback

  • Manny Verma•230
    @mverma45Posted 7 months ago

    Everything looks good, but from what I have read you shouldn't do <h3> first then jump to <h2> etc. The tags should go from <h1> then <h2> etc. It looks good on my device, since you didn't use any <h1> tag, I would use a <p> tags and then style the <p> tag as the <h> tags.

    Marked as helpful
    0
    Tharun Raj•1,330
    @Code-BeakerPosted 7 months ago

    @mverma45 Thank you for the feedback!

    I will look into it soon!

    0
    Manny Verma•230
    @mverma45Posted 7 months ago

    @Code-Beaker you are welcome.

    0
  • 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 PROFILE INFO ACCESSIBLE :

    • Currently the profile_info is not accessible, to make it properly accessible we need to use figure element with pair of figcaption.
    • Additionally we don't need to provide big alt like "Person wearing a black suit.....", The images are just avatars for each users, We can leave the alt empty the figcaption will take care of that image's accessibility with one or more child elements to explain about the avatar.
    • Here's the example markup using figure and figcaption,
    <figure class="profile__info">
  <img src="images/image-daniel.jpg" alt="" class="profile__image" />

  <figcaption class="profile__text-content">
    <p class="profile__name">Daniel Clifford</p>
    <p class="profile__status">Verified Graduate</p>
  </figcaption>
</figure>

    .

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

    Happy coding!

    0
    Tharun Raj•1,330
    @Code-BeakerPosted 7 months ago

    Hi @0xabdulkhalid, Thank you for this extremely valuable point regarding my solution. This will help me make my websites more accessible to everyone.

    Happy Coding! 🎉

    1

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