Skip to content
Submitted about 2 years ago

QR Code Challange

VMahluza•10
@VMahluza
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

Solution retrospective

I was struggling with the positioning part of css

Community feedback

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

    Hi VMahluza,

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

    • You should use <main> for the card. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.
    • 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.
    • 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. Then you can remove the large margin.

    Overall, great job on this one. Hopefully this feedback helps.

    Marked as helpful
    1
  • Abdullah•340
    @ASH2001princePosted about 2 years ago

    Hello VMahluza welcome to the frontend mentor community _here are some tips for aligning the card.

    1. instead of using the <div> element everywhere you use the <main> as a container and <section> .
    2. for aligning the card you give the body selector these values:
    body{
        min-height: 100vh;
        display: flex;
        justify-content: center;
        flex-flow: nowrap column;
        align-items: center;
        align-content: center;
      }

    --keep it up

    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