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
    • Continued development
    • Useful resources
  • Author

Overview

Screenshot

Links

• Solution URL: Github repo
• Live Site URL: QR Code Component

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• SCSS stylesheet

What I learned

It was fun working on this challenge. One major thing I learned was to keep it simple without overstyling the elements too much. Learned about a new CSS property value fit-content for the height and width property. Also inherit value for different properties like border-radius, padding etc.

To see how you can add code snippets, see below:

img {
  max-width: 100%;
  max-height: 100%;
  border-radius: inherit;
}

Continued development

I want to continue learning about CSS properties and using HTML markup correctly.

Useful resources

• Fitting an image inside a container - This solution helped me to fit the QR image inside a div.
• Trimming images with border radius set on parent div - This solution shows how to trim the images with border radius set on the parent div.

Author

• Frontend Mentor - @BasicallyMe
• Twitter - justAbajit