QR Code Component With Vanilla HTML/CSS

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

I am proud of how quickly I was able to bang this out. Something like this would have freaked me out just a few months ago, but if I can do this project quickly, I can do so much more if I am patient and persistant.

I am also proud that I only used CSS and HTML. I've always leaned heavily on a CSS framework like bootstrap, so it was nice to be able to show myself I could use just vanilla CSS/HTML.

If I could have done some things differently, these would be it:

1. Use a bit less CSS. I want to actually go back through and see where there are opportunities to apply DRY.
2. Commit more. I didn't commit as many times as I should have, and so it looks like I got this done faster than I did.
3. Improve accessibility. This has always been an issue for me, and I am sure I have areas to improve.

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

This wasn't really challenging for me. I guess one thing I struggled a bit with was how to use the Figma design. I still need to make some minor style changes based on the Figma file and the style guide.

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

Real quick:

I don't have a readme and there are some colors missing. I know, I am working on it.

What I want feedback on:

First, I have always preferred using IDs for styling, but would it have been better to use something else, eg: classes?

Second, I feel like my CSS is very "basic". It's incredibly rigid and hard-coded. What could I have done to make it more flexible, and feel less rigid? I don't know if this makes sense, I hope so.

Finally, accessibility. I am going to work on this, but what would be the lowest hanging fruit accessibility improvements I could make?