Skip to content
Submitted about 2 years ago

Fully responsive QR Code Component designed using Html and CSS.

Samarth Goyal•220
@geekSamarth
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • PhoenixDev22•16,950
    @PhoenixDev22Posted about 2 years ago

    Hi Samarth Goyal,

    Congratulation on completing this frontend mentor challenge. Your solution looks great. I have some suggestions regarding your solution:

    • In my opinion, the image is an important content. The alternate text is needed on this image. The alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor not describes the image. For future use, the alternate text should not be hyphenated, it should be human readable.
    • Page should contain <h1>. In this challenge , as it’s supposed to be a part of a whole page, you may use<h1> instead of <h4>.
    • Adding rel="noopener" or rel="noreferrer" totarget="_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.
    • In order to center the card on the middle of the page , you can use the flex or grid properties and min-height: 100vh to the <body>. Add a little padding to the body that way it stops the component from hitting the edges of the browser.
    • width: 350px an explicit width is not a good way to have responsive layout . Consider using max-width to the card in rem.

    Overall, Excellent work! Hopefully this feedback helps.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord