Submitted over 4 years ago

HTML, SASS (Grid / FlexBox), Javascript

Steven Saunders• 235

@stevenCsaunders

Preview site View code

This is a solution for...

Base Apparel coming soon page

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I went through and updated the styles and JS to achieve a cleaner solution to this problem.

Any feedback on the SASS and suggestions on a cleaner way to achieve this layout would be greatly appreciated.

Thanks!

Community feedback

Steven Saunders• 235

@stevenCsaunders

Posted about 4 years ago

@mattstuddert I made the suggested changes and went with the ITCSS structure. Just looking for some feedback on the structure of the files as well as the cleaned up SASS.

Thanks!

Matt Studdert• 13,611

@mattstuddert

Posted about 4 years ago

@stevenCsaunders it looks great! Much cleaner and really well structured. Nice work! Did it feel better working in that way?

Steven Saunders• 235

@stevenCsaunders

Posted about 4 years ago

Yes, it took some getting used to, but I can definitely see the benefit in working with partials. I can see how that will be good with JS as well as SASS! Looking forward to doing some of the more complicated solutions with these ideas in mind.

Thanks again for the help.

Matt Studdert• 13,611

@mattstuddert

Posted over 4 years ago

Nice work on this challenge, Steven! Sorry, it's taken me a little while to take a look! Your Sass code looks fine. One thing I'd warn against is nesting selectors unnecessarily. When you nest, it adds to the selector specificity in the compiled CSS. For example, you've got .wrapper main .email-form form .email-reject-img as a generated CSS selector when it could just be .email-reject-img.

Also, I'd recommend starting to practice using partials to break out your code into separate files. Two great architectural patterns for CSS are ITCSS and SMACSS. I'd recommend taking a look at those and trying to use them in some projects.

Let me know if you have any questions. Keep up the great work!

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