Skip to content
Submitted 9 months ago

Social Proof - Mobile first, SCSS, Grid, Flexbox

John•410
@MiyaoCat
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social proof section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I'm decided to incorporate SCSS with this challenge (and future challenges going forward). I tried using mixins and an extension, just for practice. I really like the nesting capability.

I had some trouble with the background-image again. I wasn't quite sure on the framing of it all. I measured the height/width of the entire desktop image to bet 800x1440. All of the content measured out to be about 556x1100. I think I messed up and set the social-proof div to 800x1100 with padding, but in reality I should probably have set the social-proof div to 800x1100. If anyone has best practices on this or corrections for me, send them my way!

Community feedback

  • John•410
    @MiyaoCatPosted 9 months ago

    I updated the size of the social-proof div and made it smaller. I also moved the background-images to main instead of within the social-proof div.

    0
    TK-PJ06•160
    @TK-PJ06Posted 9 months ago

    @MiyaoCat Hi, could you suggest me something to learn SCSS? Thank you very much.

    0
    John•410
    @MiyaoCatPosted 9 months ago

    @TK-PJ06 Hey, unfortunately I haven't really looked up any sites or videos to learn it. I learned a bit from the online class I took through Perpetual Education.

    For this project, I used the actual SASS website's guide https://sass-lang.com/guide/ to learn how to use mixins and Extend/Inheritance. I think the hardest part for me is getting it setup because you have to use terminal and make sure you have the latest npm downloaded. Once you get that setup, you create an output file which combines all of your CSS into a single file (the output file) which the server reads from.

    Let me know if you need any help getting setup!

    0

Please log in to post a comment

Log in with GitHub

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