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

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

The challenge is to build out this QR code component and get it looking as close to the design as possible.

Screenshot

Links

• Solution URL: Git Repository
• Live Site URL: Live Preview

My process

I started out with the html and worked on the positioning and styling afterwards and lastly the animations

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Animation

Note: These are just examples. Delete this note and replace the list above with your own choices

What I learned

I got to learn about the SMACCS and BEM convention and tried implementing it in this project, although it's a relatively small project so might not be much, but looking forward to using more of BEM conventions on future projects

Continued development

There won't be any aditional development on this project

Useful resources

• SMACCS - This helped me understand how CSS can be broken down and modularised
• BEM - This is an amazing docs on BEM convention which helped me finally understand the naming convention in BEM. I'd recommend it to anyone still learning this concept.

Author

• Website - sadly no personal website yet, but you can check out my linked in profile here
• Frontend Mentor - @murytarlah
• Twitter - @murytarlah