QR Code Component

Hi Ruth! 👋 Congratulations on completing your first challenge! 🎉

I have some suggestions regarding your code

• In CSS always try to use relative units like em or rem instead of absolute units like px. Using these relative units will improve the responsiveness. Read this to understand better 👉 Should we use Rem, Em, or Pixel?.
• You used the grid as well as flex for centering the card, I think you should use only one either flex or grid.

Otherwise! You did a great job! 👏

I hope these suggestions will help you to improve! 😄

Happy Coding!

Hello Ruth 👋, Congratulations on completing the challenge 🎉 I have some interest and feedback with your code

That I like:

1. I appreciate the similarity of your results with the design, pretty cool
2. HTML code was pretty clean with combination of semantic HTML👍
3. i like how you use css variables 👌

My Feedback:

1. you can use combination width:100% and max-width to make it responsive in small device, that's make width dynamic in small device
2. you can seperate file by folder to be more structured, for example:

public/
├─ images/
│  ├─ image-qr-code.png
├─ styles/
│  ├─ main.css
├─ favicon.png
index.html

1. the semantic html is good, but css naming can be improve, your css naming has not represented its use, specific to img-container, In front end development, containers are usually used as wrappers, not as single element / tag.

anyways overall is good, nice solution, hope it useful 🙌