Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted 6 months ago

Recipe page, SCSS mixins and reusable styling

sass/scss, bootstrap
P
Ed Johnson•170
@edjohnsondev
A solution to the Recipe page challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What are you most proud of, and what would you do differently next time?

What I’m most proud of with this project is how I got to experiment with SCSS mixins to make my styles way more reusable. It was satisfying being able to set up mixins for things like breakpoints and typography, so I could keep my code clean and apply styles consistently without repeating myself everywhere. If I were to do it again, I’d probably take some extra time to make my mixins even smarter and more flexible, just to make the workflow smoother and future changes even easier.

What challenges did you encounter, and how did you overcome them?

One of the main challenges I ran into was figuring out the best way to organize my SCSS, especially with all the maps, functions, and mixins I wanted to use. It took a bit of trial and error to get everything working together smoothly without making the code confusing or repetitive. I overcame this by breaking things down into smaller, focused files and testing my mixins on simple elements before applying them everywhere. This approach made it easier to spot issues early and helped keep my styles maintainable as the project grew.

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

If anyone has any suggestions for improving this, I’d love feedback on how I’m organizing my SCSS especially when it comes to managing maps, functions, and mixins for things like colors, spacing, and breakpoints. I’m also interested in any tips for making my mixins or utility functions even more flexible or efficient. Any advice or best practices on structuring larger SCSS projects would be super helpful!

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Ed Johnson's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License