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.

• Overview
  • Screenshot
  • Demo
• My process
  • Built with
  • Timeframe
  • What I learned
  • Useful resources
• Author
• Acknowledgments

The challenge of this project was to build out a QR code component and get it looking as close to the design as possible.

• Live Site

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

This project took 30 minutes to complete.

• How to use Lighthouse to audit this project's performance
• How to center a div element for all screen sizes

  .content-wrapper {
      position: fixed;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
}

• Microsoft Live Preview VS Code extention - An extenstion that hosts a local server to preview projects instantly
• Markup Validation Service - Checks site against W3C standards
• Lighthouse - Google Chrome's DevTools auditing tools for website performance, accessibility, and more
• README Editor - Easy way to organize README files

• Frontend Mentor - @KelsiePaige
  

• Frontend Mentor - For awesome coding challenges