Frontend Mentor | Testimonials grid section using CSS Grid coding challenge solution

Solution retrospective

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

Nothing

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

Fortunately, nothing.

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

Fortunately, I think it went well. Still, I welcome reviews and suggestions to improve my code and understanding. Thank you.

Community feedback

@gmagnenat

Posted 3 months ago

Hi, congrats on completing the challenge !

By a first look it's a very good solution. It scales well and you have a good management of the breakpoints and font sizes.

I have little suggestions about the code

You could use a blockquote instead of a <p> element for the quotes
You are targetting the quotes with a data-attribute of the user name. If all the quotes change to different users the stylesheet doesn't make much sense and isn't very maintainable. Try to use more generic targetting like nth-of-type for example.

Keep up the good work :) and happy coding !

Marked as helpful

@thisisadityarao

Posted 3 months ago

@gmagnenat Thank you for the suggestions.

You are right. blockquote for testimonials is so obvious and yet I went ahead with p.
Again, I took the easier route by implementing user name based targetting of elements.

I'll update the solution, soon.

UPDATE: 28, June 2024 (12:44 UTC) I have updated the solution with the changes suggested by @gmagnenat above.

I have added blockquote element for quotes
I have removed data-* attribute and selector and replaced it with nth-child selector.

Testimonials grid section using CSS Grid