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
• My process
  • Built with
  • What I learned
  • Useful resources
• Author
• Acknowledgments

Overview

Screenshot

1. HTML:
2. CSS-SS-1:
3. CSS-SS-2:

Links

• Live Site URL: QR-Code-Challenge

My process

When starting the project, I started designing the project for the web-layout first. My thought process was to use to use flexbox for responsiveness. I soon realized the problem on starting with a web-layout first, and had to restart the challenge starting with the mobile design first. For responsiveness, I used max-width and max-height for the containers and for the qr code image as well.

Built with

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

What I learned

The important takeaway for me was to start from the mobile-layout first to deal with responsiveness.

Useful resources

• CSS Tricks

Author

• Frontend Mentor - @osamaaabdullah

Acknowledgments

Meyer Web for the CSS Reset code