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.
Note: Delete this note and update the table of contents based on what sections you keep.
This solution focuses on the use of Flexbox for the development of this QR code component design, a lot of margin padding and position was also used to achieve the right width and balance in the design.
.jpg)
- Started by applying the proper HTML semantics then some div containers to make the design as easy as it can be, Flexbox was used to achieve the 375px mobile Responsive. After some advice from the first submition I switched px units to em units, and changed relatively a lot of things to make this better
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
Started this design having made up my mind to use flexbox, decided to use Flexbox: 1. For fluidity. 2. for Mobile-first workflow.
- However after the first submition and the advices and suggestions that came along i realised that i could've done it in a better way and that media queries were not necessary for this project and fluidity could be achieved through the use of flexbox alone.
- During the buidling of this proect i realised that i should focus on learning how to properly center a div.
- I plan to also build more designs in hopes of improving my skills with Frontend Mentor challenges.
- Resource 1 - This site helped in general as i could always go back to it if i need aything.
- Resource 2 - This site helped in understanding how to properly center any element in CSS.
- Frontend Mentor - @modade97
- Twitter - @modadegospel
i want to thank these Frontend Mentor users: https://www.frontendmentor.io/profile/@MelvinAguila | https://www.frontendmentor.io/profile/@vanzasetia | https://www.frontendmentor.io/profile/correlucas | for their help, after the first submition they gave valuable advice that helped in recreating this build to what it is now (BETTER).