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.
Note: Delete this note and update the table of contents based on what sections you keep.
- Solution URL: GitHub Repository
- Live Site URL: Live Site
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
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first
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.
- Website - Matheus Fernandes
- Frontend Mentor - @xtirian
- LinkedIn - @mf-cunha