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
  • Screenshot
  • Links
• Our process
  • Built with
  • What I learned
• Author

Overview

The goal of this project was to manipulate CSS and HTML to display a QR code to scan, and make it simple, beautiful, accessible and responsive.

Screenshot

Links

• Solution URL: FrontEnd Mentor
• Live Site : Vercel App

Our process

• Create boxes to contain both image and text, and a larger one which will be at the center of the screen
• Center every elements inside their respectives boxes
• Center boxes
• Add finishing touches like fonts, border radius, colors...

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

• CSS is really just boxes that we create and customize as we wish
• It's possible to make a element size sensible to which size the screen is, instead of just doing it with percentage :

@media (max-width: 500px) {
    .container {
        min-width: 275px;
        max-width: 275px;
        width: 90%;
    }
}

Author

• Linkedin - Nathan CAZARD
• Frontend Mentor - @nathanc8