Frontend Mentor - QR code component solution

This is a solution to the QR code component challenge on Frontend Mentor.

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

Screenshot

Links

• Solution URL: Frontend Mentor: QR code component using Flexbox
• Live Site URL: GitHub Pages

My process

Built with

• HTML
• CSS

What I learned

For this first HTML/CSS mini-project I reinforced the basic fundamentals learned from SuperSimpleDev's "HTML & CSS Full Course - Beginner to Pro" course found on YouTube. I then reworked the component to be more responsive and accessible, as well as use proper HTML semantics and landmarks.

Continued development

In the future I would like to complete more of these mini-projects to further strengthen my fundamentals. I also intend to learn more complex techniques and tools, allowing me to take on more advanced projects.

Useful resources

• "HTML & CSS Full Course - Beginner to Pro" - This course taught me the basic fundamentals of HTML and CSS.
• "Top 3 Ways to Center a DIV with CSS" - This video introduced me to several useful techniques for centering divs.
• "Why font-size must NEVER be in pixels" - This article helped introduce me to more responsive and accessible design through the usage of rem, em, %, and unitless measurements.
• "A Modern CSS Reset" - For a set of more "preferable" defaults.

Author

• Website - alyoshin.dev
• GitHub - danielalyoshin
• Frontend Mentor - @danielalyoshin
• Twitter - @danielalyoshin
• LinkedIn - in/danielalyoshin

Acknowledgments

Thank you to Grace Snow for introducing me to proper semantic HTML and more responsive and accessible design.