Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted 8 months ago

Testimonials grid

Joe-Wa1ker•220
@Joe-Wa1ker
A solution to the Testimonials grid section challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What are you most proud of, and what would you do differently next time?

I am pleased that I am making good progress with Grid and that I was able to develop the solution relatively quickly.

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

I wasn't sure what the best way to add the SVG to the purple container was, so I referenced someone else's solution and took the same approach, this was the first time that I had added an image within my stylesheet and I found it quite intuitive using it as part of a media query.

What specific areas of your project would you like help with?
  • Semantic HTML - I used H1 and H2 for the name and 'verified graduate' on each card, which I think is semantically correct, but it seemed counterintuitive as the text is so much smaller - comments on this? I also noted that on another solution, the other person had written their <h3> and <p> within an <article>, I didn't think to do this, what effect will this have?

  • I think the avatars could be slightly more aligned withe the text beside them, any suggestions on how to achieve this, and whether you think it's really an issue or not? it's only very slightly off, but I do like things to be perfect.

  • Too much whitespace on white cards, wasn't sure how to reduce these without reducing padding which made everything look off. Did consider wrapping everything in another div and then setting a max-height/width, but it seemed like more mark-up for nothing and also bad practise to interfere with height as it could reduce scalability.

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Joe-Wa1ker's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License