
Design comparison
Solution retrospective
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@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, makingtestimonial-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 helpful0
Please log in to post a comment
Log in with GitHubJoin 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