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

• Frontend Mentor - QR code component solution
  • Table of contents
  • Overview
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Useful resources
  • Author

Overview

Screenshot

Links

• Solution URL: www.frontendmentor.io/solutions/qr-code-component-challenge-using-flexbox-5IP-nZSlL
• ✨ Live Site URL: qr-code-component-challenge-alpha.vercel.app/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• SASS/SCSS
• Flexbox
• Mobile-first workflow
• React - JS library

What I learned

This challenge was a good occasion to practice aligning elements using flexbox.

Useful resources

• Pixel Perfect Pro - This helped me to display a screenshot on top of the webpage to easily check if dimensions were accurate. This is super useful is you need to create pixel perfect work.
• PX: Viewport Dimensions - This add-on will show you the dimensions of your viewport while resizing your browser.
• Gimp - This helped me resize screenshots provided in the project
• Figma - This helped me create a rapid mockup to get dimensions of components.

Author

• 🚀 Frontend Mentor - @melwynt
  
• 🐦 Twitter: @melwyncode
  
• 🧑‍💻 LinkedIn: melwynturbant