Submitted 6 months ago

QR code component solution using HTML and CSS.

Samim Kabiru• 260

@samimkabiru

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

Solution retrospective

What specific areas of your project would you like help with?

All opinions on how to write cleaner code are welcome.

Community feedback

Daniel 🛸• 44,230

@danielmrz-dev

Posted 6 months ago

Hello there! 🙋🏽‍♂️

Your solution looks excellent!

I have a suggestion that might interest you:

📌 If you don't have the Figma design files, I recommend using a browser extension called Perfect Pixel.

It allows you to compare your finished project with the design images that come along when you download the project and check the (almost exact) dimensions. It's very useful!

I hope it helps you in future projects! 😊

Other than that, great job!

Marked as helpful

Samim Kabiru• 260

@samimkabiru

Posted 6 months ago

Thanks alot @danielmrz-dev

Grace• 29,310

@grace-snow

Posted 6 months ago

This appears a bit broken to me. I haven't looked at the code but expect you have limited the body height to 100vh. Never do that. Never limit the height of elements that contain text, including the body. Change to min height instead so the body can grow when it needs to.

Grace• 29,310

@grace-snow

Posted 6 months ago

The html needs adjustment too.

main can't be wrapped in sections. This is a single card component. It would sit within main.
this does not have a header. Make sure you understand what landmarks are for. A header is definitely not for wrapping an image.
the alt text on the image needs to say what the image is (QR code) and'where it's going (to FrontendMentor.io). Alt shouldn't include words like "picture" or "image" because it's already on an image.
similar to above, remember the context of how this component would be used. It would sit within a page. If would not be the title for the page. That means it shouldn't have a h1. Use h2 instead.
all content should be contained within landmarks. Put the attribution in a footer.

Marked as helpful

Samim Kabiru• 260

@samimkabiru

Posted 6 months ago

thank you for the feedback. I would revisit it and make some changes.

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