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 Flexbox & CSS Grid

P
Dan Marius 625

@danmlarsen

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


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

I really get an appreciation of how difficult it can be to get the correct spacing, colors etc without the design file.

What specific areas of your project would you like help with?

I always appreciate any feedback.

Community feedback

P
Eli Silk 240

@elisilk

Posted

Hi 👋 Dan,

Great solution. Like your product preview card component solution, this one matches the design super well, despite not having access to the design file. 👏

I thought the use of the nth-child selectors to have the different testimonials span different parts of the grid was a very elegant solution. 👍

Like I suggested for the product preview card solution, one method that helps to compare you solution with the design is to install a plugin like PixelParallel or PerfectPixel so you can overlay the design screenshots on to your solution and compare them directly to each other 🔎, and then make adjustments as needed.

I also think you might consider implementing the quotation marks for the violet testimonial as a background image rather than part of the HTML markup. I see the image in this design as purely decorative and not part of the content of the webpage. Something to consider 🤔.

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#css_background_images

Happy coding. 💻

Eli

Marked as helpful

1

P
Dan Marius 625

@danmlarsen

Posted

@elisilk Thank you for reviewing my solution, and for the suggestions! 👏

PixelParallel was a great suggestion. I haven't tried that extension before. I agree on the quotation marks used as a background image is probably the way to go as well 👍

Happy coding. 💻

Dan

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