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

testimonial grid main section using css grid

KahSR 170

@KahSR

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'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

P

@tdimnet

Posted

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

@KahSR

Posted

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