Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
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

Social Proof Section using CSS Grid

@rontoyhacao

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello, this is what I did with the challenge. I used css grid and I did my very best to make it close to the design as possible. Though there is one thing that bothers me because as the resolution goes higher it gets messed up. I wasn't able to make it intact like how it should. Maybe because of the css grid? Do you guys know the reason? Any feedback would do a big help.

Community feedback

T
Matt Studdert 13,611

@mattstuddert

Posted

Nice work on this challenge! Your overall layout looks good. Here are some pointers I've got after taking a look at your project:

  • You've got a paragraph tag with a class of .heading for the heading. It's much better to use actual heading tags to create a proper content hierarchy. In this design, I'd say the "10,000+ of our users..." content would be a h1, and the names of the people would be h2 elements. Creating a content hierarchy is especially important for accessibility purposes as screen readers use them to structure the content.
  • For the star images, you've got alt="star" on each of them. This means screen readers would read out the word "star" 5 times before each review. To improve accessibility, I'd recommend leaving the value blank. This means the screen readers would skip the images and jump straight to the content to read the review.
  • Beware of nesting selectors unnecessarily in Sass as it can lead to overly specific selectors in the generated CSS file. For example, you have this selector .container .wrapper .ratings-container .rating .rating-description which could be this .rating-description.
  • Avoid using IDs as CSS selectors. They have high specificity and can't be reused on the page, so they're not good for styling. Instead, I'd recommend sticking to class, attribute, pseudo, and type selectors. Using these will help keep your CSS more maintainable.
  • Small details, like line heights and spacings, go a long way to refining a project and getting it closer to the design. You can see in the design comparison slider where some of these differences are.
  • The responsiveness could also do with a few tweaks, especially at tablet sizes where the content looks quite squashed in places.

I hope these tips help. Let me know if you have any questions. Keep up the great work! 👍

1

@rontoyhacao

Posted

@mattstuddert Yayy thank you so much for your advice I really appreciate it, I'll surely apply them next time. I always get confused on which element to use on my projects especially with short texts like names.

0
T
Matt Studdert 13,611

@mattstuddert

Posted

@rontoyhacao you're welcome! Knowing what element to use where is something that will come with practice and experience. So just keep at it 🙂

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