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

Testimonials Grid

EK 100

@EuphoriaCXI

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


This was to test my Grid skills and I also learnt to figure / figcaption properly. As always, please feel free to give feedback should there be any.

Thank you!

Community feedback

Bruce B 505

@bbsmoothdev

Posted

Great job. This looks just like the original. Just a few recommendations for you to consider.

  • You didn't use any headings. I definitely think there are headings on this page. Where do you think they are? Headings are very important for people who can't see your page and are using a screen reader to listen to your page.

  • The responsiveness is almost perfect but has some issues at the edges. One test you should always do is to set your browser width to 1280px and height to 1024px and then zoom in 400%. At that zoom level you should be able to read all the content on the page without having to horizontal scroll. As you will see, there is a slight horizontal scroll at 400%. The alternative is to use the dev tools responsive design mode to shrink the view port down to 320px width by 256px height with normal 100% zoom. This will give you the same proportions as the 400% method.

  • I will add that the design is using inaccessible color combinations, such as the light gray text on purple. I'm not going to knock you for that since you are just following the design specs. But in the real world you would need to make the text darker so that it meets minimum contrast ratio requirements.

Marked as helpful

1

EK 100

@EuphoriaCXI

Posted

@bbsmoothdev

Thank you Bruce, I will keep your feedback in mind for my next project.

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