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

cucumerisā€¢ 160

@cucumerisGIT

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


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

Could I improve the layout of the cards without relying on :nth-child? Also, did I use @mixin effectively and could other @mixins also be applied elsewhere? Any other feedback on the page is appreciated. Thanks!

Community feedback

Anublissā€¢ 460

@Anubliss-0

Posted

Hey there, great job on the challenge! And well done expanding your knowledge to explore using sass mixins.

I took a look at your structure and I had a couple notes on what could potentially be improved in the future...

In terms of semantics You have used header for the top half of the page and main for the bottom half. Personally this entire document could be in a main tag, the content in the header is too important for the context of the page to be in a header. It can be a matter of preference, but I would put them both in sections. However, the fact you are using semantic html is great! Really important to consider.

You asked for tips on styling, especially using sass for styles. The use of mixins and variables is good! Especially since the card is getting reused. If you want to continue using these tools for future projects one of things I like to use mixins for are utility styles for commonly used styles or media queries.

For example...

@mixin flex-column-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

Then call it in another style

.some-class {
  @include flex-column-center;
  border: 1px solid green;
}

This is a good place to start when using mixins, but sass is actually far more powerful and later down the line you can start giving arguments to mixins like you would a JS function

@mixin flex-center($direction: row, $justify: center, $align: center) {
    display: flex;
    flex-direction: $direction;
    justify-content: $justify;
    align-items: $align;
}

But dont worry about this for now :)

And lastly, since I noticed it as I was finishing up. on my display the cards are almost aligned with one another. It looks like you may have used rem to set the size of the container/page. This is generally good practice, however if no base font size for rem specifically set in your styles then the layout will look strange on different machines/browsers due to the base font size set by them rather than specified by you, the developer.

All in all a great finished project, and the desire to expand your knowledge to something new (sass) is commendable! Well done

Marked as helpful

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