Skip to content
Submitted 2 months ago

Use SCSS and Grid to create a layout

#sass/scss
P
LuRouFan•130
@angel-retry
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 quite satisfied with the structure of the HTML and SCSS this time, although there might still be room for improvement.

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

I might need to practice using padding and margin a few more times. I used to use padding on the parent element for spacing, but it actually makes more sense to use margin on the child elements．

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

If someone has a better structure for my HTML and SCSS, I'd love to hear it. I think the &:nth-child　parts are a bit redundant. Is there a better way to do this?

Community feedback

  • P
    Huy Phan•3,420
    @huyphan2210Posted 2 months ago

    Hi @angel-retry,

    I saw your question and wanted to share my thoughts:

    In real-world applications, data is typically fetched from an API. For example, if you're fetching testimonials from your backend, how would you manage them if there are many, say 1000 testimonials? Writing .testimonial-card:nth-child([number]) for each one would be impractical.

    Instead, I suggest visualizing how the UI would handle a list of testimonials. For this challenge, consider that every 5 testimonials might follow a specific design pattern. Use meaningful class names to make the structure reusable. Rather than defining .testimonial-card:nth-child([number]) individually, you could introduce additional classes to complement .testimonial-card.

    For instance, you could add a .purple class, making testimonial-card purple represent a specific variation, such as a purple background. Similarly, create other classes for the remaining styles, ensuring reusability and scalability.

    Hope this helps!

    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