Responsive QR Code Solution Using CSS Flexbox

What are you most proud of, and what would you do differently next time?

I'm proud of completing my first frontend mentor challenge. Although it was a simple one and I only used HTML and CSS, I learned a lot about CSS positioning and Flexbox and I feel more confident styling HTML elements moving forward. I also recently went back and fixed up my old solution, making it responsive so I'm pretty proud of this new solution. Next time, I would try to practice using a CSS preprocessor like Sass or a framework like Bootstrap or Tailwind.

What challenges did you encounter, and how did you overcome them?

I've always struggled with positioning HTML elements. I understood what Flexbox is but haven't actually applied my knowledge much in practice. Originally, I thought I had to combine Flexbox with absolute and relative positioning to position elements exactly how I wanted, however I soon realized that using absolute positioning kind of messed up the behavior of the card once the screen size shrunk. I went over my old solution and was able to find a way to produce the design with only Flexbox. I realized that I had to adjust the way I was thinking about positioning to the way Flexbox worked. I was too fixated about positioning the QR code 16px from the top of the container, which is why I thought absolute positioning made sense. Instead, since things were already centered in flexbox, I just had to adjust the spacing in-between components to push it more to the top of the container.

What specific areas of your project would you like help with?

I know it's ideal to not use pixel values in order to make a website responsive. However, is it ok for border-radius to be in pixels or do people usually change that to a responsive unit as well?