Submitted almost 3 years ago

Responsive Testimonial Section Using CSS Grid

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Preview site View code

This is a solution for...

Testimonials grid section

HTML
CSS

2junior

View challenge

Design comparison

SolutionDesign

ApplePieGiraffe’s questions for the community

Hey, everybody! 👋

This was a nice, simple challenge that I enjoyed and in which I was reminded of the joys of using CSS grid! 😂

I added some subtle hover effects to the testimonial cards to keep things a little interesting. 😉

BTW, if anyone's interested, here's a little cheat sheet for CSS grid that I find is a nice, quick reference.

As always, feedback is welcome and appreciated! 😊

Happy coding! 😁

Community feedback

Roman Filenko• 3,335

@rfilenko

Posted almost 3 years ago

Hey, great job on this one, specially css grid usage. Would maybe use more semantic tags. Also noticed stagering, wobbl text, when hover effect appears on a .card (scale is causing it, play around with values to fix it, adding line-height, backface-visibility or font-smoothing could help). Still don't understand what's the purpose of this hover effect - it's not an interactive element (button, link), but could rather confuse user from ux perspective😉, in my mind. Hope this was helpful.

Cheers, Roman

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted almost 3 years ago

@rfilenko

Thanks for the feedback!

I was wondering whether I should add any hover state to the cards since, as you said, there isn't much of a point in having one other than perhaps adding a little extra movement and bringing the hovered element into slightly more attention. But anyway, I'll look into those properties you suggested to see how I can make such animations smoother!

Anna Leigh• 5,135

@brasspetals

Posted almost 3 years ago

Fantastic job and essentially pixel-perfect! 🙌 I actually like the hover effect (I think we're both a fan of adding little effects for fun), but I see Roman's point about UX and there is a subtle shifting with the text - always seems to be the pain with using scale. I don't detect it in Firefox, but it does show up in the Chromium browers with the author text.

Also thanks for the grid cheat-sheet share!

BerylBucket• 280

@BerylBucket

Posted almost 3 years ago

Looks awesome! Minor nitpick but the design called for a purple outline around the Patrick Abrams avatar you made it gray. Regardless, excellent work.

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted almost 3 years ago

@BerylBucket

Haha... I actually noticed that but didn't bother to change it since it seemed like such a tiny detail! But thanks, anyways—you have great attention to detail! 😄

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