This is a solution to the QR code component challenge on Frontend Mentor. Done by igafshell
This is a stylish qr code component that can be used in all sorts of layouts.
- Live Site URL: Here
I started with writing the html layout. The basic structure consists of a <main> element that serves the role of a container with 2 children elements - the qr code <img> element and a <div .text> containing all the text.
Then I started with the css. First, I centered the <main> using flexbox on the <body> and gave the container a fixed size. Then I went on to arranging the elements inside the container and for that I used flexbox too. I gave the <img> width: 100%; to fit the size of the container and the .text some margins and styling.
- Semantic HTML5 markup
- Basic Flexbox
- Flexbox
I learned how to use basic flexbox proprieties and how to arrange elements inside a container using flexbox, paddings and margins. Also, I learned how to use frontendmentor.com, which has been a very interesting experience, and learn how to use Git and GitHub, which I haven't used before.
For my next projects, I will focus more on:
- Mastering basic css, flexbox and grid
- Getting more familiar with Git
- Writing more readable code
- Github - igafshell
- Frontend Mentor - @igafshell