/FEM-qr-code-component-main

Primary LanguageHTML

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

Links

My process

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.

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox

What I learned

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.

Continued development

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.

Author