QR code component (Pure CSS)

Hello Muhammad, great work! 😁

Some little tips to improve your code:

• centering a element with absolute positioning is now deprecated, it uses modern css like flexbox or grid
• use flexbox or grid to the body to center the card. Read here -> best flex guide
• after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container

Keep learning how to code with your amazing solutions to challenges.

Hope this help! Happy coding!

Hi Muhammad Adam, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

Consider using rem for font size .If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

if you want to continue coding with px, you can download a very useful extension in vscode, it converts px to rem! link -> px to rem

To improve the accessibility of the project you could have put an h1. Every page must contain a level 1 header, for people who use screen readers, identity what the main title is and follow the sequence h1-h5

<h1>Improve your front-end skills by building projects</h1>

The rest is great!

I hope it helps... 👍