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

Mobile First Testimonial Grid Section

@artcar01

Desktop design screenshot for the Testimonials grid section coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

P
Grace 27,930

@grace-snow

Posted

Hi Arturo!

Nice job on this. There's quite a few bits that don't quite match the design, but it's not far off...

I recommend:

  • adding the box shadows to white cards
  • adjusting text color
  • adjusting text sizes a little
  • removing/altering background size on quotes image which is distorting it
  • adjusting vertical space between text
  • changing the h3s to paragraphs
  • placing both lots of quote text into paragraph tags (this one's quite important as it's incorrect html to have text content in a non-meaningful element like divs)
  • reducing card padding on mobile
  • reducing border radius slightly

Most of these are very minor and perfectly fine as they are (in fact, I prefer your text sizes, for example!), but in real projects they're the kind of minor things that get raised as bugs when testers are testing against a design, so it's worth developing that attention to detail.

I hope this is helpful. Keep on coding 😃

2

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