Modern QR-Code component with Semantic HTML and CSS

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

I was proud of the time I spent in patiently studying the designs. One detail that I would have missed was the component shadow. Chiefly because it seemed subtle.

That ability to have carefully noted and implemented the design was my proudest moment.

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

I positioned the component horizontally fairly easy by using margin: 0 auto but when I had to center the component vertically and tried margin: auto auto I was met with no change.

I figured out that the height of a webpage is usually not defined and trying to use such tricks wouldn't work. So, I decided to position the component absolute in relation to the container.

position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

This totally centred the component both vertically and horizontally.

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

I would like help, knowing what the best practices are in ordering styles, custom properties, when to bother using them and when they could be unnecessary.

I would also appreciate help, knowing what to always look out for in tackling a problem especially in ways that are industry best practices. Are there ways I could make my code cleaner etc.