Skip to content
Submitted over 5 years ago

HTML, SASS (Grid / FlexBox), Javascript

Steven Saunders•235
@stevenCsaunders
A solution to the Base Apparel coming soon page challenge
Preview (opens in new tab)Code (opens in new tab)

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!

Code

Please log in to post a comment

Log in

Community feedback

  • Steven Saunders•235
    @stevenCsaunders

    @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

    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!

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