Skip to content
Submitted about 2 years ago

qr code component

Ben Scattergood•230
@BenScattergood
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

  • Travolgi 🍕•31,400
    @denieldenPosted about 2 years ago

    Hi Ben, congratulations on completing the challenge, great job! 😁

    Some little tips for optimizing your code:

    • img element must have an alt attribute, it's very important!
    • centering a div with absolute positioning is now deprecated, it uses modern css like flexbox or grid
    • use flexbox to the body to center the card. Read here -> best flex guide
    • after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
    • instead of using px use relative units of measurement like rem -> read here

    Hope this help! Happy coding 😉

    Marked as helpful
    1
    Ben Scattergood•230
    @BenScattergoodPosted about 2 years ago

    @denielden Thanks! I was struggling to center things vertically...

    1
    Travolgi 🍕•31,400
    @denieldenPosted about 2 years ago

    @BenScattergood you are welcome! Keep going :)

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

    Hi Ben Scattergood,

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

    • You should use <footer> for the attribution. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.
    • Images must have alt attribute. 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.
    • 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 class=”sr-only”. You can find it here
    • 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 flexbox properties and min-height: 100vh for the <body> add a little padding to the body that way it stops the card from hitting the edges of the browser.
    • width: 320px an explicit width is not a good way to have responsive layout . Consider using max-width to the card in rem .

    • Consider using rem and em units as they are flexible, specially for font size better to use rem. 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 do things like set the images to display block and make all browsers display elements the same.

    Overall, Excellent work! Hopefully this feedback helps.

    Marked as helpful
    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