Submitted 8 months ago

Responsive Testimonial Grid

ParthUON•100

@ParthUON

Preview site View code

This is a solution for...Testimonials grid section

HTML
CSS

2junior

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

@matbac85Posted 8 months ago

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 !

Please log in to post a comment

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