Skip to content
Submitted about 2 months ago

Responsive testimonial grid using HTML and CSS

Darlene Nyambura•170
@darlene9497
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’m proud of pushing past my fear of not understanding CSS Grid and successfully implementing it. Next time, I’ll trust myself and dive right in

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

One challenge I faced was initially feeling overwhelmed by CSS Grid and unsure how to use it correctly. To overcome this, I practiced with simple layouts. Through persistence and hands-on application, I built confidence and successfully implemented it

Community feedback

  • P
    Olha Sliusarenko•220
    @Oliko136Posted about 2 months ago

    Hello!

    Your solution looks amazing, great job conquering the grid layout!

    My only improvement suggestion would be regarding semantics:

    1. The h1 tag should be only one per page, as it may reflect poorly on a site's SEO performance. If there is no main heading present in a given design, you can include it in your HTML and then hide it visually with visually-hidden. For visible headings you can then use h2, h3 and so on.
    2. For interconnected items (multiple items of the same thing) such as testimonial cards it is better to use unordered list to group them and treat every card as a list item.

    I hope you will find it helpful and good luck in your future projects!

    Marked as helpful
    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