Frontend Mentor - QR code component solution

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.

Table of contents

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

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Box Model
• Flexbox
• CSS Grid
• Mobile-first workflow
• Styled Components - For styles

Note: These are just examples. Delete this note and replace the list above with your own choices

What I learned

This project really helped me implement my learnings of HTML and CSS. It was insightful to just eyeball the measurements of certain properties like margin, padding, relative positioning etc, and helped me develop an understanding of aspects and ratios of the page and visual weight of the different elements. My concept of Box Model had never been clearer!

Continued development

This project wasn't very difficult to make responsive due to the very few elements though this project is further extendible and could be made much more visually appealing by adding more elements like a paralax scroll in the background and much more information about Frontend Mentor. The code could also be made much cleaner and organised.

Useful resources

• MDN Web Docs - This was the site I used to read documentation from whenever I needed help. I really liked this pattern and will use it going forward.
• Google Fonts - This is an amazing page to get cool fonts from.

Author

• LinkedIn - Prachi Jha
• Twitter - @loonymetzi