Responsive QR code component

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

I'm able to achieve the ideal result with minimal code and ensure the image alt text satisfies accessibility standard by changing it from "QR code image" to "Scan to visit Frontend Mentor website". It's also my first time defining CSS variables with :root selector.

If I do it differently, I may try to apply other tools and approaches instead of plain HTML and CSS, and use more class selectors to replace HTML element selectors for accuracy.

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

Noticing that the width of the QR code container is set to Hug Content in Figma, with the image having a fixed width and the text set to Fill Container, I struggled to prevent the container from taking up the full block width. As a workaround, I ended up assigning a fixed width of 320px to the container to ensure a proper layout.

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

• For a simple challenge like QR code component, what possible tools and approaches can I use other than plain HTML and CSS?
• What are the best practices for writing initial CSS styles for a webpage, particularly for the *, html, and body selectors?
• Regarding the challenge I mentioned earlier, is there an alternative way to restrict the width of the QR code container while ensuring other width settings applied correctly to all related elements?