This is a solution to the QR code component challenge on Frontend Mentor.
Mobile view of QR component page.
- GitHub: GitHub Repo
- Netlify: Live Site
- Vanilla HMTL & CSS written in VS code.
- GitHub for tracking changes.
- Netlify for deployment.
I took a mobile first approach to this project, using the mobile image to create initial HTML and CSS code. I styled the divs first, then images and text. Once the mobile view was completed, I created a desktop and tablet view to ensure responsivity across all devices. I also incorporated the following:
- Semantic HTML elements for accessibility.
- CSS flexbox for responsiveness.
- Media queries to ensure the website displayed properly across all devices.
One of the biggest challenges I faced was using media queries across desktop and tablet. It took me a while to wrap my head around the different viewports required and how to re-size divs based on these viewports.
I would like to incorporate more SCSS/SASS into more complex projects in future. In addition, continue working on understanding media queries for faster code writing.
- W3Schools - This helped me learn how to center an image in a div, and reminded me of how to implement a border radius.
- Portfolio Website - Karla Bucoy
- Frontend Mentor - @KarlaB3
- GitHub - @KarlaB3