Skip to content
  • Learning paths
  • Challenges
  • Solutions
  • Articles
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 3 years ago

Responsive solution using HTML, SASS, BEM and CSS transitions.

bem, sass/scss, parcel
Karol Binkowski•1,620
@GrzywN
A solution to the Testimonials grid section challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


I had so much fun doing this challenge! I recommend you to do it too! For people not feeling solid in CSS Grid I recommend checking out Grid Garden and than this challenge to get some practice in building grid layouts.

In the solution I used md- prefixes to make my layout suitable for medium sized screens. What do you guys think about this idea? I think it makes things more clearer in the markup and code is easier to understand and maintain. Also, I added some animations when the page loads and when the cursor hovers over sections to make this solution more fancy. I made page responsive even for larger sizes with a new clamp() function in CSS3.

I appreciate any feedback!

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Camille•130
    @fyrfli
    Posted about 3 years ago

    Oh! I love the transitions!!!! Bravo!

    Marked as helpful
  • Aadvik•1,250
    @Aadv1k
    Posted about 3 years ago

    Feels like there are soo many ways to approach this problem, from nightmarish "position absolute" to using grid. I Did this challenge using grid-template-areas really enjoyed the simple and intuitive approach to layouts. if you are interested in the code check it out here

    Marked as helpful
  • Shashree Samuel•8,860
    @shashreesamuel
    Posted about 3 years ago

    Hey GrzywN good job completing this challenge. Keep up the good work

    Your solution looks good however I think that your cards look a little bigger than the actual design. You might want to make them just a little bit smaller if you like

    In terms of accessibility your headings can only go up one level which means that if you have an <h1> tag then the next heading tag should be an <h2>.

    I hope this helps

    Cheers Happy coding 👍

  • Naveen Gumaste•10,420
    @NaveenGumaste
    Posted about 3 years ago

    Hello Karol Binkowski ! Congo 👏 on completing this challenge

    Let's look at some of your issues, shall we:

    • your code is missing "level-one heading" that means ' use h1 first and then h2, h3 and so on '

    happy Coding😀

  • Karol Binkowski•1,620
    @GrzywN
    Posted about 3 years ago

    When I did this project, I wanted to make it as easy as possible to implement on the website. I made the <h1> tag with the sr-only class to be for screen readers only. Now it's fixed and validator doesn't detect issues anymore.

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub