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: Frontend Mentor Solution
• Live Site URL: QR Code Component

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Netlify

What I learned

1. Importing Font Styles to CSS File
2. Write clean code and don't use 'div' if not necessary.
3. Limiting Body Height using vh and use min-height.
4. use weight instead of b for Text.
5. Prefer using px for Border Radius than %

Continued development

Moving ahead, I want to create more complex projects by improving grasp on Flexbox, positioning and typography. I'll be exploring Mobile first approach to make my projects highly responsive. I will revise and use Box-Model i.e, Padding and Margin to my advantage in next projects.

Useful resources

• Learn FlexBox - Kevin Powell - This Video by the CSS Guru Kevin helped me to understand the basics of FlexBox.
• CSS Course on FreeCodeCamp - This is a amazing all in one course for CSS by Dave Gray.
• Netlify - Netlify allows you to deploy your project live on web for free.
• Solutions on Frontend Mentor - I refer other's solution to same project when I got stuck.

Author

• Website - Aviral Sharma
• Frontend Mentor - aviralsharma07
• Twitter - _aviral07