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
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Mobile first approach using HTML, SASS, CSS

Shahin NJ 1,190

@SJ-Nosrat

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


Any feedback with respect to the use of CSS Grids and SCSS would be appreciated.

I'm still struggling with how to go about organizing my SCSS files; any recommendations for front-end architecture would be appreciated!

Community feedback

Vanza Setia 27,855

@vanzasetia

Posted

👋Hi Shahin!

👍 Good job on completing this challenge! I have some feedback on this solution:

  • On mobile view (360px * 640px) the Rated 5 Stars in... sentence is not aligned to the center and become two lines.
  • The name of the person, should not be heading. They should be on paragraph tags. Heading is commonly used for titling a section.
  • Also, you need to change the main__cards with ul and li for each card. That way you don't need a heading anymore on each card.
  • In my opinion the person image is important. So, I recommend to use their name as the alt value.

That's it! Hopefully this is helpful!

Marked as helpful

0

Shahin NJ 1,190

@SJ-Nosrat

Posted

@vanzasetia Hi, thank you for taking an in-depth look at my project.

With regards to your first (bullet) point, how would you go about solving that issue? The problem is from the padding that I placed on them; would you give them a width and a height property?

0
Conrad 950

@ConradMcGrifter

Posted

Check out the 7-1 architecture for organizing scss files link

1

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