Getting Set Up

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

Updated on 01/06/2025.

Screenshot

Links

• Solution URL: https://ridge-runner.github.io/qr-code-component-main/

My Process

Focused on using Flex Box in the positioning of the component. Vanilla CSS was used.

Built with

• Semantic HTML 5 markup (where possible)
• CSS custom properties
• CSS Flexbox

What I learned

1. I got a better grasp on layout methods by combining Flex.
2. Sometimes, things are left out of the desgin system docs and you have to either improvise (or call someone.)

Continued Development

1. Keep working on Grid and Flex layouts.
2. Use modern best practices like @layer and modular layouts.

Useful Resources

• Kevin Powell's Youtube Channel - The guy's channel is a great resource for all things CSS.
• MDN - for obvious reasons. Now better since they've started including demos like W3 Schools.

Author

I'm a longtime tech enthusiast, learning frontend web dev and low-level programming. I'm currently helping folks in my local community with teck issues.

From Virginia in the USA.

• Frontend Mentor profile - @bvandyke

• Github - @ridge-runner