kensparby/fem-qr-code-component

Frontend Mentor challenge solution

Frontend Mentor - QR code component solution

My over-engineered solution to the QR code component challenge from Frontend Mentor.

Challenges from Frontend Mentor help you improve your coding skills by building realistic projects, and in this case an easy one was chosen mainly to get familiar with and practice setting up and using Webpack.

To run it yourself, clone this repo and run yarn dev from within its folder. You will need Yarn installed for this.

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Overview

Screenshot

Links

• Solution URL: https://github.com/kensparby/fem-qr-code-component
• Live Site URL: https://kensparby-fem-qr-code-component.netlify.app/

My process

Built with

• Tailwind
• Webpack
• Love
• Flexbox

What I learned

I set out to practice setting up and using Webpack with this project, and decided to also check out Tailwind again for the first time since its infancy. I will be adding both technologies to my toolbox from now on, for certain.

Webpack is exceedingly useful, and I say that having barely dipped my toes in. There's little more I feel well-equipped enough to say about it yet.

Tailwind I had liked initially years back, but grew to dislike in favor of pure (S)CSS. I can certainly see the appeal of Tailwind, and will likely find myself using it again from time to time.

Useful resources

• Youtube: Webpack 5 Crash Course | Frontend Development Setup (Traversy Media) - This video really spurred me into action to try this out. I'd put off Webpack for the longest time before Brad's video.

Author

• Website - https://ken.sparby.dev/
• Twitter - @kensparby
• Frontend Mentor - @ksparb