Submitted 5 months ago

Flexbox & Grid Mobile First Testimonials Grid Section

Oswaldo Castro• 240

@tufcoder

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Testimonials grid section

HTML
CSS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

It's fun to use display: grid to put the cards in a good desktop layout.

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

Definitelly using display grid. It's my first time using that property. The other thing is to put the symbol "left quotation mark" inside the first card as a background and adjust the position.

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

I'm not so sure about display grid tecniques, so if I like to get some help.

Community feedback

Anthony Becarne• 160

@Abecarne

Posted 5 months ago

Hello @tufcoder !

You really did a great job on this even if it was your first time using the grid display.

If I had to share any advice for learning this display, I would recommend this website : https://cssgridgarden.com/ It really helped me a lot to understand the fundamentals of it.

Also, I fell like the images are a bit too big compared to the design. Finally, the breakpoint should be set for a more narrow screen size, like maybe 1200px ? I don't have a perfect answer for this haha it was just a feeling.

Good luck for the next challenges !! :)

Oswaldo Castro• 240

@tufcoder

Posted 5 months ago

@Abecarne Tks, I like w3schools to study about grid, they have good examples and explanations.

I'm a backend developer, all the work was done by eye so I'm happy to have come close to the example layout. It wasn't the same, but it was similar :)

Please log in to post a comment

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