Frontend Mentor - QR code component solution

This is my first FEM challenge solution: a simple, minimally responsive, QR Code.

Challenge link: https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H

Table of contents

• Overview
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

FEM Challenge, mainly about styling and correctly centralizing a QR Code. Responsive.

My process

• Eyeball the design png for a couple of minutes to determine how many divs the project will require and what hierarchy they'll have;
• Open VS Code, generate basic HTMl file;
• Create CSS, first line is always:
  • { box-sizing: border-box; }
• Try to keep track of which elements have layout styling and what children are being affected;
• Use relative measure units as much as possible;
• Commit and push to git repo when I'm satisfied with the result;
• Edit readme

Built with

• Semantic HTML5 markup
• CSS
• Flexbox
• CSS Grid

What I learned

The importance of box-sizing: border-box for responsive designs.

Continued development

Responsive design is the challenge of the moment. Media querry is my next focus.

Useful resources

• (https://w3schools.com/) - Barely needed anything else, very complete website.

Author

• Website - In construction;
• Frontend Mentor - @Dian-New-Dev
• Twitter - Don't have yet;

Acknowledgments

I'd like to thank the creators of this amazing project, as well as the very welcoming discord server community. I can already see how FEM will be integral to my journey.