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.
- Solution URL: View Solution
- Live Site URL: View Live
I always start by doing the mark up first. I started by wrapping my elements in semantic html rather than divs. Then, I added trhe styles to the text and sizing to the image. I also started with a mobile first approach.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
I learned that max-width is not always appropriate in a project because when I used it to size the card, it was a bit hard to control. I wanted the card to remain the same size for both, mobile and desktop. In this case, using a fixed width worked just fine. Especially considering it was meant to be an easy project to get started that wouldn't require a lot of manipulation.
I think I still need to work on responsiveness at different screen sizes. I simulated many different screen sizes using the dev tool and it kept getting cut off. I ended up adding a nested media query to try and fix it. However, I realized I was over thinking the project and the solution was quite simple. I removed the height from main, which eliminated the need for media queries entirely.
- Frontend Mentor - @perezjprz19
- Twitter - @t0xicm0nkey93