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 grid testimonials section

@BekzodIsakov

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?

  1. Tried my best to make my solution pixel perfect and responsive

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

  1. BEM & SCSS to make the code clean and well structured
  2. Divided SCSS code into different files to make working with styles and debugging easier
  3. Added h1 heading for accessibility reason and hid it from UI with .sr-only class
  4. Used aria-label attribute for article elements to enhance accessibility
  5. Used grid-template areas to position cards inside the grid

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

Would love to receive feedback on how clean and well structured my code is. Other than this, I'm always open to any other feedbacks!

Community feedback

P

@JamesLaviron

Posted

  • Does the solution include semantic HTML?

Yes it does. Maybe you could have use section and header tags but overall it's great.

  • Is it accessible, and what improvements could be made?

It is accessible. I loved the fact that you used aria labels but I assume it's not enough meaningful.

  • Does the layout look good on a range of screen sizes?

Yes it does. Good job!

  • Is the code well-structured, readable, and reusable?

Yes it is, loved the way you used grid-are instead of grid-template properties.

  • Does the solution differ considerably from the design?

It's very close to the design. Nice :)

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