QR-Code component

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  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

  Marked as helpful

  1

  ---

  

  Philipp•190

  @hermi72Posted about 2 years ago

  @PhoenixDev22 Thank you very much for this great feedback! Your suggestions are very helpful and I'm going to integrate them into my future workflow.  Thank you :)

  0

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  @hermi72

  Glad to hear that it was helpful. Happy coding!

  1
• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾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!

  Marked as helpful

  1