Frontend Mentor | QR code component

Hello AomSirawit 👋,

well done with the challenge, especially as it's your first one.

Responsive design

Let me first answer to your first question - how to do a responsive design in general. Well, in this particular case (QR code component), you don't need to worry much about the mobile/desktop sizes. The component size should be unified across any device screen.

But in general, my recommendation is to start thinking about your layouts with a mobile first approach. Which means, from practical point of view, you start with the smallest possible design (mobile screens) and all the styles you write down, will apply to that. And once you are done, you start adding media queries to your styles and try to address the tablet/desktop sizes.

The media queries for this approach will have min-width... It might take a while to fully understand that. but it's definitely a worth to do it.

here is a good article explaining this concept for you: https://zellwk.com/blog/how-to-write-mobile-first-css/

You had used max-width which is usually used when you work with desktop first design (other direction). It is a good approach too, but I personally find it more difficult, especially for beginners. The reason for that is that the desktop versions usually contain more elements. It's important to position them well, but then you can be more overwhelmed, as you try to style the stuff for smaller displays.

If you apply the mobile first approach, you will have much better time as a developer.

General feedback

I also checked your style sheet and here is a general feedback which can help you make your styling better.

• Don't use px (absolute size) for fonts sizes in particular - when you use pixels, you prevent users to adjust the font size in case they have some especial disability needs. They can adjust the default font size in the browser and your styles have to react to it. Use rem or em units instead - https://www.freecodecamp.org/news/why-use-rem-to-set-font-size-in-css/.

• you can also consider using relative units in other places where you normally use pixels.

• In your HTML template, you are using an img for QR code which is not there for a decorative purpose. The alt attribute should be populated by some text to inform the user about the meaning of the image (in case the image is disabled).

• you can use CSS properties aka CSS variables for your repeating elements, colors in particular. They are easy to implement and make your code more maintainable: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

Good luck with other challenges 🍀

Could you kindly tell me how you got the shadow?