Submitted 7 months ago

QR Code card

nxll0•20

@AllanShima

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Not sure if I got close to the real result, but i should study more tags and elements from css.

What challenges did you encounter, and how did you overcome them?

Confused on how to center the elements on to the screen. But i overcame them by googling possible tags and properties in both html and css.

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

Definitely when you're supposed to move the element somewhere specific on the screen. In this case, i feel like it was way too difficult to center the card exactly in the middle of the site.

Community feedback

Robert•40
@RobertLikesCodingPosted 7 months ago
Hey Allan!

Nice work! I saw you were struggling with the positioning and ended up using absolute positioning. One way I like to use when dealing with these big one page designs with something centered in the middle is setting the section or div elements' height: 100vh. This gives you a full-screen to place your element in. You could then center it using display: flex, justify-content: center, align-items: center for example.

Try it out if you want. :)

One other tiny thing I noticed was your alt tag in the img element. I know this is just a challenge but you could make it more descriptive than just saying "qr-code". I like to imagine a screen reader reading the alt tag back to me and then ask myself "Would I understand what is on the picture?".

I hope this was helpful! Happy coding!
Marked as helpful
1

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