Submitted over 3 years ago

Gulp workflow with Pug and SCSS

Felipe OG• 730

@felipeog

Preview site View code

This is a solution for...

Social proof section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I used Gulp to process the Pug and SCSS files.

I think Pug's mixins really make it easier to write DRY code, and the SCSS's nesting goes well with BEM methodology.

Any feedback is appreciated!

Community feedback

Arturo Simon• 1,785

@artimys

Posted over 3 years ago

Nice job on the challenge. I haven't tried Gulp but yea SCSS really does help with writing out BEM.

My only suggestion is maybe reduce the max-width a tad in your media query. 1300px ish....

Overall nicely done sir 👍

Felipe OG• 730

@felipeog

Posted over 3 years ago

Hello, @artimys!

You are right, I made it too big again, haha! I need to pay more attention to the size.

Thanks for the feedback.

jemeneradev• 580

@jemeneradev

Posted over 3 years ago

I noticed that in your ratings components, you included 5 svg links on each instance. You should consider using a repeating background image approach.

https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat

Felipe OG• 730

@felipeog

Posted over 3 years ago

Hello, @jemeneradev!

Great tip! It is a better approach for sure.

Thank you.

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

Hey, Felipe Oliveira! 👋

Nice job, once again! Your solution looks good and scales well! 🙌

I only suggest,

Adding a tiny bit of more space (using margin or padding) to the left and right sides of the page so that the content of the page isn't so close to the edges of the screen when the screen width decreases in the desktop layout.

Keep coding (and happy coding, too)! 😁

Felipe OG• 730

@felipeog

Posted over 3 years ago

Hello, @ApplePieGiraffe!

Thanks for the feedback.

Happy coding!

Please log in to post a comment

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