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
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author
• Acknowledgments

Overview

Links

• Live Site URL: https://qr-code-component-by-vrlclk.netlify.app/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Native CSS global variables
• CSS Grid

What I learned

• Use a CSS reset template to avoid browser's initial values
• How to use Google Fonts and link the fonts to your stylesheet
• Placing elements to the center using Grid instead of Flexbox
• Giving every element a specific meaning using 'BAM naming conventions'
• Use global CSS variables to avoid setting the same values mutiple times
• Only one change of the values of the CSS variables required than searching every single value and change them one by one.
• How to commit your work to GitHub with Visual Studio Code (no CLI, no GitHub Desktop)
• How to deploy your work/creation with Netlify

Useful resources

• Josh Comeau's CSS reset - Kevin Powell recommends this CSS reset because it has less code than Eric Meyer's CSS Reset and it's new.
• Naming BAM naming conventions - Use this to specify every element you want to edit.
• Practical example of BAM naming conventions - Kevin Powell shows some examples of using BAM naming conventions - Timestamp: 8:24
• Center an element using Grid - I use number four with place-items: center;, you save a line of code instead of the famous flex way with align-items: center; justify-content: center;
• Upload your project to GitHub and release them with Netlify - Kevin Powell shows you step-by-step on how to do it.

Author

• Frontend Mentor - @vrlclk
• GitHub - @vrlclk

Acknowledgments

• Kevin Powell - "The CSS god"