Submitted about 2 months ago

Testimonials grid, BEM, Mobile first approach

Steven Stroud•11,910

@Stroudy

Preview site View code

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?

Hello, I'm Steven and this is my solution for this challenge using SCSS and BEM!😊

🛠️ Built with:

HTML 🧾
Native CSS 🎨
BEM Notation 🅱️

Thank you to the Front-End Mentor team that creates these challenges that help us learning journey to front-end.💟

I gained a lot of valuable insights into CSS Grid during this challenge and experimented with various techniques, including grid-template-areas and other grid features. While I’m pleased with the outcome, I see opportunities for further refinement, such as incorporating more CSS variables to streamline the grid layout. Overall, this experience has deepened my understanding of Grid and broadened my approach to layout design.

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

One of the key challenges I overcame was improving my debugging skills. I’ve become much more confident in troubleshooting, and rather than feeling lost when something doesn’t work, I now dive deeper into understanding the root cause. A particular instance involved identifying default styling that wasn’t covered by the modern reset I was using. This experience has sharpened my ability to diagnose issues effectively and strengthened my overall problem-solving approach.

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

I would appreciate feedback on how I used CSS Grid for the tablet and desktop layouts, particularly in combination with the :nth-child selector. My goal was to minimize the amount of code, as most of the blog cards shared similar styling with only a few differences, which I addressed using :nth-child. While this approach felt efficient, I’d like to ensure it’s the most optimal and maintainable solution.

Community feedback

Grace•31,250
@grace-snowPosted about 2 months ago
I think you need to reconsider the html structure here...

I would expect each of these cards to have one heading - the person's name. Then the verified text is just a paragraph.

The rest of the content is quote content - it's the body of the testimonial just split over 2 paragraphs. So those should be paragraphs inside a blockquote.

Theres no big benefit either way but a common way to structure testimonials like this is using the figure element (instead of article). Then the img, name and verified text can all go inside the figcaption, followed by the blockquote outside of it. None of that is essential, it's just a common and solid way to present this kind of content.

Personally I consider all images in this to be decorative. They don't bring any value to the content in my opinion.

It's very unusual to have margin on the body like this. And it's making the spacing strange when I view on mobile. Cards are hitting screen edges on the sides too... Instead of body margin I'd expect just a little bit of padding somewhere.

I find this css quite hard to read... There are lots of margins and max widths and all sorts on nth child's and from reading the css in isolation it makes it much harder to understand than just using classes on what you want to style. Again, just opinion / personal preference.
Marked as helpful
2
Steven Stroud•11,910
@StroudyPosted about 2 months ago
Hey @grace-snow,

Thank you again for taking the time to review my work and provide valuable feedback.

I initially thought that the "Verified Graduate" text didn’t meet the criteria for a paragraph, and that was my reasoning for choosing a different HTML element. However, I’m currently refactoring my HTML using the figure and figcaption elements. Based on my research, figure should encapsulate the "image, name, and verified graduate" information, with figcaption used to describe the image or other visual content within the figure. I believe this is the correct semantic structure, and I would love to hear your thoughts on this approach.

I’ve also been experimenting with a screen reader to better understand how the content is interpreted. I found that providing a simple description of the person’s name and the emotion they’re displaying is helpful. However, I’m unsure if I should leave the alt attribute empty in this case. I’d appreciate your perspective on this decision.

Regarding the layout, I added padding directly to the HTML element instead of using margins, as margins were causing the cards to shrink. This approach seemed like the best solution to prevent layout issues.

The CSS for the margins on the blog texts aligns with the Figma layout, where the spacing between elements varies between mobile and desktop views. Some articles had different margin adjustments, while others did not, which is why I used :nth-child selectors to achieve the exact layout. I’m open to suggestions on how I could manage this more efficiently without relying heavily on :nth-child.

Moving forward, I agree that adding classes makes sense, and although I haven’t used utility classes much before, I’m eager to incorporate them into my next solution. I’d also like to understand better how to apply classes for different screen sizes using media queries.

I’ve refactored my code based on your feedback, except for the CSS, which I’m still trying to grasp. I’d love to hear more from you regarding how I can improve further.

Looking forward to your thoughts!
1
Grace•31,250
@grace-snowPosted about 2 months ago
@Stroudy no I'm afraid I’ll correct you there. The image is NOT the content of the figure. It would be a decorative image and placed inside the figcaption along with the name (heading) and verified text (paragraph). Together these elements are the caption content for the blockquote. That blockquote is the figure content that is being captioned by the rest.

I'm not sure I follow some of the other reasoning you're trying to explain tbh about paddings and margins. I'm probably struggling to understand because I can't understand what the css is doing, so don't know what you mean by blog texts.
Marked as helpful
1
Steven Stroud•11,910
@StroudyPosted about 2 months ago
Hey @grace-snow,

After further research, I’m beginning to fully understand your point about the image being decorative and the testimonial as the primary content. The figcaption serves to support the figure, which contains the main content. It’s interesting to realize how much more there is to semantic HTML than many of us initially appreciate. I’m definitely learning a lot through this process!

Thank you again for your insights.
0
Grace•31,250
@grace-snowPosted about 1 month ago
@Stroudy you should not be setting any row heights in this. It is causing content to break out of its containers.
Marked as helpful
1
Steven Stroud•11,910
@StroudyPosted about 1 month ago
Hi @grace-snow,

Thank you for revisiting this solution and providing such helpful feedback. I’ve removed the grid-template-rows: 17.75rem 16.625rem; as suggested—I hadn’t realised this was causing the text to overflow. I often get caught up in small details like this and can spend hours trying to troubleshoot why certain elements behave unexpectedly. It does reach a point where I have to move forward to maintain progress. I appreciate your wisdom!
0

Please log in to post a comment

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