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.
Note: Delete this note and update the table of contents based on what sections you keep.
- Solution URL: https://github.com/jeeheezy/FEM-QR-code-component
- Live Site URL: https://jeeheezy.github.io/FEM-QR-code-component/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
I learned how to center items using CSS Flexbox.
It was also a nice refresher on distinguishing padding and margins and how they impact the different ways elements interact.
I'd like to get more used to writing CSS in general, as the concepts are familiar but putting them to use resulted in spacing and sizing issues that I did not forsee. Flexbox does seem very powerful but the use case for this was relatively simple, so I'm interested in testing it out on more complex layouts.
- W3Schools - My go-to when looking for a starting point for structure and basic how-to's on CSS.