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

The solution is made up of mainly and index.html file and a style.css file, with some images. As seen in the screenshot below, there is a qr code image which when scanned takes you to the frontend mentor official website.

Screenshot

Links

• Solution URL: "QR Code Component Preview"
• Live URL: "QR Code Component Live Implementation"

My process

Built with

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

What I learned

• After learning gulp workflow, sass i decided to update this component

Continued development

In my future projects i want to continue on learning how to make good use of css variables, and also how to work more on a mobile first outlook for my website designs

Useful resources

• W3schools Box Shadows reference - This helped me look into how to work with box-shadows.
• The Outfit Font - This is font i used for this solution. I got it from google fonts

Author

• Website - RabbitMaid
• Frontend Mentor - @Agbortoko
• Twitter - @agbortoko_arrey