Pensive1 / FEM-qr-code-component

Challenges to reinforce my frontend skills - Challenges by https://www.frontendmentor.io/

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
• Author
• Acknowledgments

Overview

Screenshot

Links

• Solution URL: GitHub Repo
• Live Site URL: GitHub Page

My process

1. I started by building the component markup
2. Defined the styles in the variables partial
3. Defined sass mixins to reduce repetition and lines of code
4. Applied the styles (styles.scss)

Built with

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

What I learned

This challenge was a great refresher after months of job searching and JS tutorials. In this challenge I learnt how to:

1. Fetch and use a Google font in Sass

To do this, I pasted the import link in the variable file then defined each font variation.

_variables.scss:

// FONTS
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
$font-reg: 400;
$font-bold: 700;

From there, I defined the font family in the main scss file as font-family: 'Outfit' and that was it.

2. Adding transparency to hsl values

I added a transparent grey-blue variant by adding a fourth value.

_variables.scss:

$color-gray-blue--trans: hsl(220, 15%, 55%, 20%);

Useful resources

• developerdrive.com - This helped understand how to import custom fonts from Google fonts into Sass.

Author

• Website - Portfolio
• Frontend Mentor - @Pensive1

Acknowledgments

• Kevin Powell – For making me aware of the Frontend Mentor platform.

• Jessica Rodriguez (j-rods) – For mentoring and showing me how to keep my skills sharp. She's also a former colleague who transitioned to web development in 2017.