Desktop-First QR Code Component Using HTML, CSS, and Flexbox

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

What I'm most proud of:

-Use of Flexbox for Layout: I'm really proud of how I implemented Flexbox to center the QR code and text. It was my first time using Flexbox extensively for layout, and it made the component fully responsive across different screen sizes.

-Simplified HTML and CSS: I kept the code clean and simple, avoiding unnecessary complexity while still achieving the desired outcome. This reflects the principles of good web development by writing readable and maintainable code.

What I would do differently next time:

-Optimizing Images for Web: Next time, I would focus more on optimizing images for faster load times. The QR code image could be compressed to reduce its size without losing much quality, improving performance, especially on slower networks.

-More Complex Layouts: While this was a relatively simple layout, I would challenge myself to incorporate more advanced CSS techniques, such as CSS Grid or custom animations, to make the project more engaging and dynamic.

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

I was unable to place the image properly inside the border. But with enough searching on the internet, I found out the object-fit: cover; method to fix it

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

One area I didn’t focus on in this project was implementing shadows, and I would love some feedback on how to add and style shadows effectively. How can I implement subtle box shadows to enhance the design of the QR code and the card container without overdoing it? Are there any tips or best practices for using shadows in a way that adds depth while keeping the design clean and modern? I appreciate any suggestions or examples!