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 Testimonial Grid

ParthUON 100

@ParthUON

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 take pride in completing a recent HTML and CSS challenge using grid layout. For future challenges, I aim to enhance responsiveness and explore more advanced styling techniques.

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

I'm pleased to share that this time, I encountered no significant challenges. The task went smoothly, and I was able to complete it without any major obstacles.

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

animation

Community feedback

matbac85 600

@matbac85

Posted

Good job !

I'm a beginner so I can't be much help, but here are my comments

  • It's best practice to create a separate file for CSS styles.
  • Instead of a div for the part with the profile image, name and profession, you can use <figure> and <figcaption> elements.
  • Your "alt" attribute lacks information.
  • You forgot the shadow on each card.
  • In your .container, I think it's unnecessary:
        grid-auto-columns: 1fr;
        grid-template-areas: 
        'one'
        'two'
        'three'
        'four'
        'five';
        gap: 2.5rem;```

In mobile view, the cards are one below the other. This is the basic behaviour of the elements. With the code above, you're just repeating what exists by default. You can simply add this information when the screen width is larger and you need to position your cards according to a specific template.

I hope it helps !
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