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

Responsive testimonials card using CSS Grid

Eugen 200

@psdesignro

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 are you most proud of, and what would you do differently next time?

I haven't used CSS grid for a while, but I'm glad I managed to do it correct from start. Of course, I have chosen the most basic approach, but I will refine my CSS grid skills for the next projects. I also start to understand better the use of SASS and how it can keep my code clean.

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

I wanted to get the most out of SASS and to use the mobile first approach. I learnt how to use @mixin for media queries and will use this approach for my further projects.

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

I am ok for now, thanks

Community feedback

HamzeKabi 100

@HamzeKabi

Posted

Hi bro, good job.

You could write this: grid-template-columns: repeat(4, 1fr);

instead of grid-template-columns: 1fr 1fr 1fr 1fr;

Look into grid-template-areas. It's makes writing grid much easier

Marked as helpful

1

Eugen 200

@psdesignro

Posted

@HamzeKabi

yeah, on my new challence I'm doing it (repeat) and grid-template-areas a awesome, but I wanted to do without googling for help with areas, but will definetely use in more complex layouts

1

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