DEV Community

Cover image for Challenge 3 - QR code component - Frontend Mentor
Abhishek Baliyan
Abhishek Baliyan

Posted on

Challenge 3 - QR code component - Frontend Mentor

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

QR code challenge by Frontend Mentor, Coded by Abhishek Baliyan. In this challenge I use flexbox for centering vertically and horizontally. I used CSS variables.

Screenshot

Desktop View

Mobile View

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • Mobile-first workflow

What I learned

I learned CSS variables, Min-width, Max-width.

Continued development

How to implement responsive font size.

Author

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Instrument, monitor, fix: a hands-on debugging session

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️