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

Social proof section master

Andreea Angelescuโ€ข 120

@AngAnda

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


I've used HTML and SCSS to build this project. I would appreciate any feedback on my code and suggestions about what I could to in order to make it more efficient and readable.

Concerning the semantic of HTML I don't know if using an article for the purple card components was a good choice but I couldn't think of any other alternative aside from a plain div. Also, for the five stars rating cards I've used an aside to encapsulate all the card components.

In this project I've tried to follow the BEM standards for naming classes.

Community feedback

Lucas ๐Ÿ‘พโ€ข 104,420

@correlucas

Posted

๐Ÿ‘พHello Andrea, congratulations for your solution!

The solution design elements are really good done and the all elements are responsive, this is really nice, I liked the media query you've add to change the content flow a bit before mobile.

The only thing I think you can change, is the background-size to cover or contain in the body, I saw that you've used a shorthand for the background, but this goes out.

About semantics you did a good work using main and article isn't everyone that pay attention to these details, for the paragraph with the quote you can use <blockquote> instead of p, to have the perfect tag.

Andrea! The rest is just perfect, congrats!

Marked as helpful

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