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

• Frontend Mentor - QR code component solution
  • Table of contents
  • Overview
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Useful resources
  • Author

Overview

Screenshot

Desktop screen

Mobile screen

Links

• Solution URL: https://github.com/evertzner/qr-code-component-main
• Live Site URL: https://friendly-otter-7649bc.netlify.app/

My process

Built with

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

What I learned

How to adapt sizes depending on the viewport.

@media only screen and (max-width: $bp-mobile) {
  width: 85vw;
  padding: 4vw;
  border-radius: 4vw;
  gap: 3vw;
}

Useful resources

• Kevin Powell - Amazing YouTube channel to learn all about CSS.

Author

• GitHub - evertzner
• Frontend Mentor - @evertznerd like to share.**