Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Testimonial Section Using CSS Grid

P
ApplePieGiraffeโ€ข 30,545

@ApplePieGiraffe

Desktop design screenshot for the Testimonials grid section coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

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

3

P
ApplePieGiraffeโ€ข 30,545

@ApplePieGiraffe

Posted

@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!

0
Anna Leighโ€ข 5,135

@brasspetals

Posted

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!

2
BerylBucketโ€ข 280

@BerylBucket

Posted

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

1

P
ApplePieGiraffeโ€ข 30,545

@ApplePieGiraffe

Posted

@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! ๐Ÿ˜„

0

Please log in to post a comment

Log in with GitHub
Discord logo

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