QR Code Component using SCSS and Flexbox

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

I'm especially proud of how clean and modular my SCSS structure turned out. While this isn't my first time using SCSS, I made a conscious effort to improve how I organize my styles using partials, variables, and mixins. I also liked how effective Flexbox was in keeping the layout centered and responsive with minimal code.

Next time, I would:

• Try using CSS Grid to explore alternative layout strategies.
• Add more responsive breakpoints to further polish the mobile-first approach.
• Move from @import to @use/@forward to align with modern SCSS best practices.
• Set up a linter (like Stylelint) or a formatter (like Prettier) to maintain consistent code style across files.

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

One challenge was making the layout perfectly centered and responsive across different screen sizes. At first, I tried using only Flexbox, but I realized combining some max-width constraints and padding was necessary to keep the QR code and text balanced without stretching or shrinking awkwardly.

Another challenge was organizing my SCSS partials and mixins efficiently. Since I’ve used SCSS before, I aimed to improve my structure for better maintainability, which took some trial and error. I overcame this by breaking styles into smaller, logical parts and reusing variables and mixins for typography and colors.

Finally, making sure the fonts loaded correctly and looked consistent involved properly preconnecting to Google Fonts and testing across browsers.

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

Specific areas I’d like help with

• Advanced responsive design: Tips on handling multiple breakpoints or fluid typography for better adaptability on different devices.
• CSS Grid: While I used Flexbox effectively, I want to deepen my understanding and practical use of CSS Grid layouts.
• SCSS best practices: Advice on modern SCSS architecture, including using @use and @forward instead of @import.
• Performance optimization: Ideas to optimize loading times and reduce CSS payload without sacrificing design quality.