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
  • Useful resources

Overview

Screenshot

Links

• Live site: https://michahuhn.github.io/frontendmentor-qr-code-component
• Challenge solution: https://www.frontendmentor.io/solutions/qr-code-component-using-vue-GY2aMwezmc

My process

Built with

• Vue
• SCSS
• Custom CSS properties

What I learned

I've learned how to calculate the inner and outer border-radius and used this technique in this project:

.qr-code-card {
  --padding: var(--spacing-200);
  --inner-border-radius: 10px;

  padding: var(--padding);
  border-radius: calc(var(--inner-border-radius) + var(--padding));

  img {
    border-radius: var(--inner-border-radius);
  }
}

I also used Figma.

Useful resources

• Get your stylesheets more organized with Sass partials - My SCSS folder structure is inspired by this video.