QR code component using HTML & CSS only

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

I'm most proud of refactoring my CSS to follow BEM methodology properly. My initial version used element selectors like .qr-code-card h2 which doesn't follow BEM. I caught this and rewrote everything using proper __element classes like .qr-card__title and .qr-card__image.

Next time I'd plan my BEM class names before writing any CSS, rather than refactoring after the fact.

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

The main challenge was understanding BEM correctly. I initially thought chaining element selectors onto a block class was acceptable, but learned that every child element needs its own explicit BEM class. I overcame this by reviewing the BEM documentation at getbem.com and refactoring my markup and styles accordingly.

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

I'd love feedback on my BEM naming, specifically whether .qr-card__body is the right way to name a generic wrapper div inside a block, or if there's a better convention for that. Also open to any feedback on my HTML structure and whether it's semantic enough.