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,105

@ApplePieGiraffe

Desktop design screenshot for the Testimonials grid section coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison

SolutionDesign

Reports

Accessibility report (0)

Our reporter did not find any issues in this project! 🎉

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

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,105

@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

P
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

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,105

@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
Slack logo

Join our Slack community

Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!