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

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

Overview

Screenshot

Links

• Solution URL: GitHub
• Live Site URL: QR Code Component

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow

What I learned

Through this challenge, I was able to learn the following concepts:

• CSS Reset
• Use of rem for font-size instead of px
• Mobile-first development
• HTML5 Landmarks
• Use of flex properties to center elements

Continued development

In future projects, I'd like to continue my learning and application of the following:

• Flexbox
• CSS Grid
• HTML5 Markup
• Best practices in frontend development

Useful resources

• Accessible Landmarks | scottohara.me - This gave a good introduction on what HTML5 landmarks are, providing use cases and examples that are really helpful
• Should I change the default HTML font-size to 62.5%? - FED Mentor - This was really insightful on when and how to use rem instead of px, as well as providing additional techniques to make this conversion easier
• For the CSS reset, the following resources proved to be very helpful:
  • Andy Bell's A Modern CSS Reset
  • Modern CSS Reset / Global Styles by Joshua Comeau

Author

• Frontend Mentor - @mbdelarosa