QR-Code Component using HTML, CSS, and Vercel Deployment

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

I'm proud of using CSS Variables and using Semantic HTML, where I brokedown the design into different <div> tags, to control styling the different HTML elements. This helped me to overcome my fears.

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

I had a little challenge of putting the QR-Code component in the middle of the body element.

I managed to overcome this, by using Flexbox and the flex-direction property was set with the column value, and finally, applied the justify-content and align-items properties to be at center.

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

I would like to know if there was a better way to structure my HTML code, and if any header level would be used for the first sentence used in the QR-code component.

Also, I used CSS Variables and tried my best in styling the component, but I feel there always could be better. Are there any guides or rules to follow that I've missed in my approach to style the HTML elements? Could they be less verbose, if applicable?