Skip to content
Submitted almost 2 years ago

Built a qr-code scanner frontpage using html and css

manishde1234•10
@manishde1234
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)
Code

Please log in to post a comment

Log in

Community feedback

  • _nehal💎•6,710
    @NehalSahu8055

    Hello Coder 👋.

    Congratulations on successfully completing the challenge! 🎉

    Few suggestions regarding design.

    • Remove margins from .blue-wrapping as it will not dynamically center the card.

    • To properly center the card

    • USING FLEXBOX

    body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

    • Every site must have one h1 element describing the main content of the page.

    • So, Add a level-one heading instead of h2 to improve accessibility.

    • <h1>Improve you frontend skills by building projects</h1>

    • Use Semantics for the proper design of your code.

    <body>
<main>...</main>
<footer>...</footer>
wrap up `.attribtution` div inside your footer.
</body>

    • For non-decorative images give meaningful and descriptive alt like alt= "QR code to frontend mentor website".

    • Use responsive units(rem, em, %) from next project. Explore respective use cases on google.

    • Replace width with max-width to make your card more responsive.

    link.

    I hope you find this helpful.

    Happy coding😄

    Marked as helpful
  • Abdul Khaliq 🚀•72,360
    @0xabdulkhaliq

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have other recommendations regarding your code that I believe will be of great interest to you.

    QR iMAGE ALT TEXT 📸:

    • The QR Code Component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute which should explain the purpose of the image.
    • The alt with qr-code.png is not even explaining for what the QR image need to be used.
    • So update the alt with meaningful text which explains like QR code to frontendmentor.io
    • Example: <img src="/images/image-qr-code.png" alt="QR code to frontendmentor.io">

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
  • vivekrajput@93•450
    @vivekrajput-93

    Well done...brother , But lot could have done with component like <img> ,providing border-radius and for <p> you could have given some padding and its color , that could make it much better, still look great to me.Congratulations on your first project.

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