Frontend Mentor - QR code component solution

This is a solution to the QR code component challenge on Frontend Mentor.

Table of contents

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

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: https://bha-qr-code-component.netlify.app/

My process

First I made a layout of the component structure dividing it by sectors and assigning the necessary DIVs with their corresponding classes in the HTML code. Then I edited and applied the styles according to the suggestions. In addition to the reference measurements, I used measurements obtained with Photoshop.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Grid
• Normalize.css used

What I learned

In order to carry out this project, it was necessary to review and revise knowledge about the alignment of the elements.

Continued development

This practice allowed me to realize that sometimes a little goes a long way, starting with small and achievable projects is better training.

Useful resources

• Normalize.css - Normalize.css helped me to make browsers represent all elements more consistently.
• Paul Irish Snippet - This snippet helped me to give the box model I wanted. It applies to all elements.

Author

• Frontend Mentor - @burgosha
• Twitter - @burgosha_ok