Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Your session has expired please log in again.
Your session has expired please log in again.
Your session has expired please log in again.
Not Found
Your session has expired please log in again.
Not Found
Not Found
Your session has expired please log in again.
Not Found
Not Found
Not Found

Submitted

Testimonial grid section (SCSS, BEM, Semantic HTML, Mobile first)

Franco A. 200

@franco-a

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


Hey! I'll admit this took longer than usual, css grid can be a headache at times. If anyone has tips and tricks when it comes to css grid then I'd appreciate it if you could share them!

Community feedback

P
tediko 6,680

@tediko

Posted

Hello, Franco A! 👋

Congratulations on finishing another challenge! Again, good job! Grid is really powerful when it comes to layout things. In your solution there's only mobile version and desktop version. Try to add some media query and made your grid to take 2 columns and 3 rows in tablets resolution. Take a look at minmax notation that defines a size range greater than or equal to min and less than or equal to max for grid-template-columns. This is my solution to this challenge. I know it is a bit old but you'll see my idea.

  • Change the alt attributes for the .testimonials__author-image avatars, as they don't add any extra context for screen reader users. Changing to alt="" will make screen readers skip those avatar images.

Good luck with that, have fun coding! 💪

1

Franco A. 200

@franco-a

Posted

Hey @tediko , thanks again for the feedback! I'll be trying to create a tablet layout

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