QR-Code component

Hi John,

Congratulation on completing this challenge. Your solution looks great. I have some suggestions regarding your solution if you don’t mind:

• You can use <main> for the card and <footer> for the attribution. HTML5 landmark elements are used to improve navigation.

• Page should contain <h1>. In this challenge , as it’s supposed to be a part of a whole page, you may use<h1> visually hidden with .sr-only class.You can find here.

• In my opinion, the alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor. The alternate text should not be hyphenated, it should be human readable.

• Adding rel="noopener" or rel="noreferrer" to target="_blank" links. When you link to a page on another site using target=”_blank” attribute , you can expose your site to performance and security issues.

• You have used <br> , using <br> is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology. Screen readers may announce the presence of the element. This can be a confusing and frustrating experience for the person using the screen reader. You can read more in MDN.

• You don’t need to use <br> to limit the maximum width, you can use max-width rule.

• There are so many arguments against changing the root font size. It state that you should never change the root font size because it harms accessibility.

• To center the component on the middle of the page you may use the flex/grid properties with min-height 100vh; to the body. Also you can add a little padding to the body to prevent the card from hitting. Then you can remove the large margins.

• width: 300px an explicit width is not a good to have a responsive layout. Consider using max-width to the card instead.

• height: 480px It's not recommended to set height to component, let the content of the component define the height.

Aside these, Great work! Hopefully this feedback helps

👾Hello John, congratulations for your new solution!

The value you’ve used for the shadow make it too much dark and strong, to create a smooth shadow you need to give it less opacity and more blur the correct value for this shadow is box-shadow: 5px 5px 15px 5px rgb(0 0 0 / 3%);

If you’re not familiar to box-shadow you can use this site to create the shadow design and then just drop the code into the CSS: https://html-css-js.com/css/generator/box-shadow/

👋 I hope this helps you and happy coding!