Skip to content

Latest commit

 

History

History
71 lines (44 loc) · 1.79 KB

README.md

File metadata and controls

71 lines (44 loc) · 1.79 KB
Raw

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

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

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.