Skip to content
Submitted 19 days ago

Grid-tesimonials

#post-css#react#sass/scss#accessibility
Mpass•200
@Benson0721
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’ve been working on another grid challenge. To be honest, I don’t think the grid layout itself is too difficult.

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

However, I’ve realized that I have some misunderstandings about basic CSS concepts while using grid. This practice requires applying identical color designs to each section, and organizing the CSS has been a challenge for me. I think that’s why I’ve spent almost four hours on it!

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

I believe I have done my best to organize my code structure and address some minor issues. If there are still any mistakes, please feel free to point them out!

Community feedback

  • Jye Harry•140
    @jyeharryPosted 17 days ago

    You should look into using BEM class names. You'll be able to make more reusable styles rather than having to target things by id. In real production applications you'd rarely be styling by id, if ever.

    Using BEM would help in situations where you're hardcoding data. For example, in src/Section.jsx you have Nickname == "daniel" ? (<svg>) : "". So instead of adding all of the data used in these testimonials into an array and iterating over that array to render each card, you could just instantiate each individual card and apply modifier classes that change the appearance of them. So you might have a .section--with-bg-img class that applies the quote mark background image, instead of using that ternary operator and checking for "daniel". You could also have a modifier class called .section--span-2 which is what makes the section span 2 rows or columns. This way the styles are more reusable instead of relying the exact data that goes in them. The styles shouldn't care about the data.

    Marked as helpful
    1
  • Mpass•200
    @Benson0721Posted 7 days ago

    Thanks a lot! BEM is new concept to me, I will correct my project to follow that format, and keep it as a habit in future!

    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