Hello!👋 This QR Code Component is a challenge from Frontend Mentor. Feel free to click the links below to compare the challenge's design vs. my solution.
This challenge was completed purely with HTML/CSS.
- Solution URL: https://www.frontendmentor.io/
- Live Site URL: https://qr-code-component-mauve-omega.vercel.app/
My process for this challenge was quite simple. First, I outlined the HTML elements and filled in the content that was necessary to complete the solution. Then, I added class names to the elements that I knew would need styling - however, this changed slightly as I was coding the CSS. Then, I went to work on styling using CSS, referencing the Figma design for the various styles.
- Semantic HTML5 markup
- CSS custom properties
This was a great refresher on basic HTML/CSS. For my day job I typically use MUI components - so, although the CSS is syntactically similar, it was great to get back to the roots and write basic CSS outside of an sx prop.
- px-to-rem converter - This converter helped we convert the fontsizes based in px on the Figma file to rem so that the page respects the user's text size preferences.