/frontend-mentor-qrcode

QR code component built using HTML and CSS

Primary LanguageCSS

Frontend Mentor - QR code component solution

This is a solution to the QR code component challenge on Frontend Mentor.

Overview

Screenshot

Mobile view of QR component page.

Links

Tech Stack

  • Vanilla HMTL & CSS written in VS code.
  • GitHub for tracking changes.
  • Netlify for deployment.

Process

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.

Challenges

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.

Continued development

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.

Resources

  • W3Schools - This helped me learn how to center an image in a div, and reminded me of how to implement a border radius.

Author