Submitted 9 months ago

QR Code Component by Alfraz Ahmed

Alfrazgit• 50

@Alfrazgit

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

Did I set the widths accurately?
Is there something you find redundant in my code?
Any tips on naming classes.

Thank you

Community feedback

Marcos Travaglini• 4,920

@Blackpachamame

Posted 9 months ago

Good job!

Here are some comments that may help you:

Use min-height: 100vh instead of height; 100vh (with this you are restricting a specific height, it can generate unexpected results)
Use semantic tags such as main, footer, figure, etc, this helps the accessibility and SEO of the site
The <div class="qr-code-container"> should be <main class="qr-code-container">
The <div class="attribution"> should be <footer class="attribution">
You don't need a margin: auto 0; in your .qr-code-container class, to separate the main from the footer, you can simply place a gap: 20px in the body

Marked as helpful

Alfrazgit• 50

@Alfrazgit

Posted 9 months ago

@Blackpachamame Thank you for your kind words and support. I will keep these things in mind. Is it always better to use min-height or min-width when trying to limit the size of things?

Daniel Zeljko• 50

@danielzeljko

Posted 9 months ago

I also have trouble with CSS naming and one of the methodologies I found helpful was BEM. I tried to use this in my most recent solution. I think both height and width for the image was supposed to be 288px.

Great use of root and props for resetting the browser defaults as well!

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