This is my solution to the QR Code Component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
The task in this challenge was to build out a QR code component and get it looking as close to the design as possible.
As an added challenge, I decided to create a theme toggle for this project. I added a separate set of color variables closely related to those for the default theme, and a button to switch between themes:
Light Theme
Dark Theme
- Solution URL: GitHub repo
- Live Preview URL: https://qr-code-component-solution-ajs.netlify.app/
- Vite (Vanilla JS)
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Sass mixins
As another added challenge, even though it's blatant overkill for such a simple component, I took the opportunity to build an accessibility checker into my workflow using pa11y and concurrently. The intention is to use this, going forward, in future challenges and other projects.
I recently started going through Frontend Mentor's formal learning path in order to get extra practice, solidify concepts and techniques I'm already familiar with, and to learn some new things too! This challenge fell under the category: "review of the skills I already have."
However, I did learn some new things along the way -- mostly from building the accessibility checker. It took some trial and error to get things working properly, and in a way that made sense.
- Website - Andrew J Shea | Portfolio
- Frontend Mentor - @ashea29
- GitHub - ashea29
- LinkedIn - Andrew J Shea