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

Overview

Screenshot

Links

• Solution URL: [https://www.frontendmentor.io/solutions/qr-code-component-with-flexbox-bem-rLGuYuTnNw]
• Live Site URL: [https://hchao7.github.io/QR-code-component/]

My process

Built with

• Semantic HTML5 markup
• Flexbox
• BEM Methodology

What I learned

I learned that it can be helpful to start out with a CSS reset. I used Josh Comeau's CSS reset, which "undos" certain browser defaults. For example, box-sizing: content-box is set to border-box, which makes CSS much easier to work with.

I also learned about the BEM methodology. I know this is a very simple and small project to be applying a methodology to, but since there are so many ways to style a page, I thought following a methodology might guide my planning.

/* Block */
.card {}

/* Elements */
.card__qr-code {}
.card__heading {}
.card__sub-heading {}

Continued development

I would like more experience with layout-related properties, such as Flexbox. For the project, I only used Flexbox to center a main element, which was pretty simple to figure out.

I did use Sass for this project, but my CSS is quite simple, so I did not use it very effectively. I will try to take better advantage of Sass when writing more advanced CSS syntax.

Useful resources

• Custom CSS Reset - This helped me reset the browser default styles.
• BEM Methodology - This helped me understand the basics of BEM. Hopefully I applied it correctly!

Author

• Frontend Mentor - @hchao7