Submitted 4 months ago

Testimonials grid section (SCSS/BEM/GRID)

Gwenaël Magnenat• 1,210

@gmagnenat

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Testimonials grid section

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 like the way this solution looks and how I could expend the structure with a few elements to simulate a real world scenario.

My idea was :

Profile are linked to users in a database
Testimonials come from a database
User can have different ring color on their profile image based on a role or a member status

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

I found a few inconsistent elements in the design like different spacing between similar components or elements present only on some of the cards. I spent quite some time trying to deal with these various values but at the end after some exchange on the discord, I decided to chose the values and keep them consistant between the cards.

The ring on the profile image is only present on 2 images but I decided to add one on all images.

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

Any feedback is welcome !

Community feedback

Patricio Zarauz• 140

@PatricioZarauz

Posted 2 months ago

Great work on completing the challenge and being almost pixel perfect with the design!!

It was really cool that you used the lightness sass method to determine what the font color should be depending on the background! Also good job on creating multiple partials.

There are some minor code improvements I would suggest:

I believe that the card-styles mixin It's unnecessary since all you do is call the color-scheme mixin, just use that one instead.
For the first card, there is no need to use the before pseudo-element, you could just add the background-image property directly to the card class. Also use background-position to position the element where you want.
You could have used the grid-area-template property to design your grid and then use the grid-area property in each card with it's name to make it easier to read and design multiple layouts.

Once again, great job!

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