QR Code Component utilizing CSS Flexbox

Hi @joshua-cornelsen,

This looks really good! Well done using semantic elements, separating your structure and styling, including alt text, clearing default values and using Flexbox.

Minor tweak to your HTML structure, I suggest replacing the first section element (.qr-code) with an article element since you set this up as your card element and it represents "self-contained" content, basically something (like a widget, a card, a blog post) that can be re-used in multiple places, like we could make 3 more QR cards just like this one and use them around the site.

Sections are good for grouping content (which this does), with a few caveats: they almost always need a heading (h1-h6) and they're a second-choice/fallback if a better element exists, like article in this first case. Your second section element (.details) fulfills this, grouping the content and including a heading. There's not a better element for this one, and you could go either way with a section or a div here. Does the difference between those two cases make sense?

Have you tried using variables on the :root? Your CSS is looking good, this is a next step to play with for a future build 😊. On more complex builds, variables can help a lot with keeping styles straight (like if you have a ton of colors) and avoiding repetition of code. Technically they're custom properties and not "real" variables like in other languages since they're computed instead of stored, but they're often referred to as variables, and we use var(--name) for them (go figure ha).

Well-structured and easy to follow, great job!