Frontend Mentor - QR code component solution
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.
Table of contents
Overview
Screenshot
Links
- Solution URL: github.com/thinhlevn/qr-code-component-main
- Live Site URL: thinhlevn.github.io/qr-code-component-main/
My process
Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
What I learned
-
<meta name="theme-color" content="#ecd96f" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#0b3e05" media="(prefers-color-scheme: dark)">
-
Accessibility
- Document should have one main landmark
- Page should contain a level-one heading
- All page content should be contained by landmarks
-
HTML
- Bad value 100% for attribute width on element img: Expected a digit but saw % instead. Ref to fix: https://rocketvalidator.com/html-validation/bad-value-x-for-attribute-width-on-element-img-expected-a-digit-but-saw-instead
Author
- Website - thinh.xyz
- Frontend Mentor - @thinhlevn
- Twitter - @fatbug97