Submitted about 1 year ago

Built a qr-code scanner frontpage using html and css

manishde1234• 10

@manishde1234

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Community feedback

_nehal💎• 6,710

@NehalSahu8055

Posted about 1 year ago

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,660

@0xabdulkhaliq

Posted about 1 year ago

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

Posted about 1 year ago

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.

Please log in to post a comment

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