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

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

Overview

Screenshot

Links

• Solution URL: GitHub Repository
• Live Site URL: Live Site

My process

At first sight I draw in a paper the page dividing the divs an figured out how to mantain the effects. So I coded the HTML and then the CSS. The only issue I had wa to maintain the size of the card in the mobile and web version. The solution was add the property below:

.card {
 max-width: 290px
 }

I choose to stay this in a static width so it don't grow too much when pass from mobile to web; and I preferred to use the 'max-width' instead the width in case of any device with frame below 375px

Built with

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

Continued development

I'd still learning about how to name classes and id, how to organize that and improve my workflow.

It's a simple things but when I'm writing the HTML, my mind give me insight to what to do in the CSS, so I go and code the CSS. I know this is wrong and sometimes this take my time alway while I just look for the code thinking about different ways to do the same thing.

Author

• Website - Matheus Fernandes
• Frontend Mentor - @xtirian
• LinkedIn - @mf-cunha