Skip to content
Submitted 6 months ago

testimonial grid main section using css grid

KahSR•170
@KahSR
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 proud of the notion I'm gaining on how to develop my CSS better.

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

I used this challenge to explore possible solutions with CSS grid and review the properties. First I solved it using just grid-template-columns, grid-row and grid-column, but I found it difficult to make the page responsive. With grid-template-areas it was much simpler

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

.

Community feedback

  • Thomas Dimnet•250
    @tdimnetPosted 6 months ago

    Hi @KahSR,

    Great work with your project! Your design looks particulary sharp on different screen sizes. It looks perfect on my 4k monitor :).

    Here are some feedbacks if you want to improve your code:

    • I noticed you use BEM when designing your layout. This is great but I think you could improve some of it. Here is an example: card__username card__username--color. I think the name of this modifier could be improve. You could for example specify the color or the kind of color. For example, card__username--primary or card__username--secondary. BEM is great but it can be tedious sometimes ^^.
    • Be aware of your namming conventions. For example, grid_card5: is it a element or a block? Most of the time with CSS, we tend to use kebab-case.

    I know that these are just tinny details and I am sorry for that. The thing is your project is really good 🙂.

    Have a nice day, Tom.

    Marked as helpful
    0
    KahSR•170
    @KahSRPosted 6 months ago

    Hi @tdimnet

    I was very happy for your feedback

    I adjusted the points you suggested, they are small details but they make a difference. Sometimes I get lost in how to name using BEM 😅

    Thank you very much for the comment! 😊

    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