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
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources

Overview

"Your challenge is to build out this QR code component and get it looking as close to the design as possible."

Links

• Solution URL: https://www.frontendmentor.io/solutions/htmlcss-qr-code-component-iouZvH1oto
• Live Site URL: https://hobbycoder7.github.io/qr-code-component-main/

My Process

I overlayed the mobile design image using PerfectPixel by WellDoneCode (pixel perfect) in Google Chrome and while using the developer tools edited styles.

Built with

• Semantic HTML5 markup
• CSS

What I learned

CSS variables and a bit of CSS grid.

Useful resources

• Center a grid container vertically and horizontally
• Using CSS custom properties (variables)