Skip to content
Submitted about 2 years ago

Responsive QR Code Page

Mohit Soneja•30
@sonejamohit
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 Mohit Soneja,

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

    • Page should contain <h1>. In this challenge , as it’s supposed to be a part of a whole page, you may use<h1> for class="head" .
    • 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.
    • 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: 320px an explicit width is not a good way to have a responsive layout. Consider using max-width to the card in rem instead.
    • 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.
    • Remember a css reset on every project. That will make all browsers display elements the same.
    • Last , It's a good practice to have the styles in separate file he reason for this is that the CSS exists for the purpose of defining the presentation style of the document. The HTML file exists to define the structure and content of the document also it's useful If multiple pages on your site have the same look and feel.

    Aside these, Great work! Hopefully this feedback helps

    Marked as helpful
    1
    Mohit Soneja•30
    @sonejamohitPosted about 2 years ago

    @PhoenixDev22 Thanks for your great suggestions! I'd surely work upon exacting this pages!

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

    @sonejamohit Glad to hear that it was helpful. Happy coding!

    1

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