Frontend Mentor - QR code component using CSS and HTML

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

CSS 🎨:

• Let me explain, How you can easily center the component for better layout without usage of absolute positioning.

• We don't need to use absolute to center the component both horizontally & vertically. Because using absolute will not dynamical centers our component at all states

• To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.

• For this demonstration we use css Grid to center the component

body {
min-height: 100vh;
display: grid;
place-items: center;
}

• Now remove these styles, after removing you can able to see the changes

#container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

• Now your component has been properly centered.

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Great job on writing this code! You have demonstrated a good understanding of the concepts and applied them effectively to solve the problem. One suggestion I have is to add an alt attribute to the img tag because it provides a text alternative for the image, which is useful in several ways:

Accessibility: Users with visual impairments rely on screen readers to access the content on web pages. The alt text helps the screen reader software to describe the content of the image, which makes the page more accessible.

SEO: Search engine crawlers use the alt text to understand the content of the image, which can help the page to rank better in search engine results.

Display issues: In some cases, the image may not be displayed due to slow internet connection or other technical issues. The alt text can help to provide context and information about the image, even if it's not visible.

So, it's a good practice to always include an alt attribute with a descriptive text for each image in order to improve accessibility and optimize SEO. Here's an example:

<img src="/images/code.png" alt="qr-code">