Skip to content
Submitted 20 days ago

Testimonials grid section

#sass/scss
P
Matthef•170
@MatFrat95
Preview site (opens in new tab)View code (opens in new tab)
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'm very proud about fact that, it is first challenge I accomplished without any unsolvable problem. I feel like i build solid ground for more complex projects.

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

I belive there is more eficient way of using grid, than placing every single object individualy. My question is, how can i reach that kind of effect - irregullar placement. I tried grid-auto-fill:dense; but it wasn't work too well.

Community feedback

  • P
    KonradJam•430
    @KonradJamPosted 20 days ago

    Hello @MatFrat95!

    You do a good job!

    I have some advice for you:

    • It is hard for me to read your code, and it will probably be hard for you in the future. :D
    @mixin font-grey {
	.card__item-text,
	.card__user-info-status,
	.card__item-title,
	.card__user-info-name {
		color: var(--grey200);
	}
}

    I know what you want to do, but it's hard to maintain this code. It's opposite to BEM methodology and CUBE CSS methodology. I think it will be better if you create a modifier or a utility class and give it only one task:

    .u-color-grey-200 {
   color: var(--grey200);
}

    It's a lot more writing, but it's easier to maintain.

    • You are using Sass, so you can declare variable in Sass style:
    $grey200: hsl(0, 0%, 81%);
    • Use span for connecting rows and columns:
    grid-row: 1 / span 2;

    This means connect two rows, starting from the first.

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

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