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

Overview

Challenge to replicate a card layout.

Links

• Solution URL: https://onemanbanned.github.io/QR-Challenge/

My process

I started with the HTML. Creating a div to act as my flexbox container.
Then used CSS to style.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• BEM
• Google Fonts

What I learned

The only problem I had with this challenge was centering the text inside the container. I was attempting to use flexbox to center it, eventually I used google to find a solution, and ended up using text-align.

.container__title {
   text-align: center;
}

I also had an opportunity to use git and write markdown for the first time.

Useful resources

• https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA - This is youtube channel had a very useful tutorial on using git.

Author

• Frontend Mentor - @onemanbanned