This is a solution to the QR code component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
This is my first Frontend Mentor challenge!
Kevin Powell recommended this site in his responsive design series, and now I know why. I like the feel of finally being able to apply my CSS/HTMLl skills with a css-friendly challenge.
- Solution URL: https://github.com/TheMcnafaha/frontend-mentor-qr-code/
- Live Site URL: https://themcnafaha.github.io/frontend-mentor-qr-code/
Challenge felt easy enough to code "on the fly."
Felt no need to follow CSS conventions either.
- Semantic HTML5 markup
- Flexbox
- Mobile-first Design
- Vanilla CSS
Honestly, the most difficult part was doing the box shadows. Everything else involved process that I was already familiar with; and while I've done box shadows before (even have them in an anki card), I've never done subtle shadows. At first this seemed trivial, but it took me quite some time to figure out that you need to have a spread radius of 0 to make the effect work.
Lesson learned: Google first when it comes to new CSS
box-shadow: 2px 8px 16px 0px rgba(0,0,0,0.2);At some point, I want to redo this challenge with Tailwind as I'm intrigued by the idea of always using utility classes.
-Good ol' MDN