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.
- Solution URL: ((https://jubileelin.github.io/QR-Code-Display/))
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
I initially struggled with centering the qr card om the page, and the only way I could figure out how to make the website look the same was to use margins to estimate the center of the page. However, this was not effective since it would not respond to changing the size of the page. Then, after researching CSS styles further, I figured out how to use vh measurements to allow my container to span the entirety of the website and center the card. Then, I was able to mimic the styles of the qr card easily with the use of flexbox and other CSS styles.
I am still learning some HTML and CSS semantics as well as how to efficiently design responsive webpages.
- Video Resource - This is how I learned the basics of HTML and CSS. I hope I can continue to expand on this knowledge as I work through more challenges and eventually develop my own designs.
- Frontend Mentor - @jubileelin