Skip to content
Submitted 7 months ago

QR code component

accessibility, fresh, pure-css, web-components, less
Favour Hesed Abaye•30
@FavourAbaye
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I'm most proud of creating a functional QR code component purely using CSS and HTML, how I was able to handle the challenge, making it responsive. In the future, I would focus on improving the responsiveness and accessibility of the QR code component.

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

Challenge: Ensuring that the elements aligned correctly, maintained consistent spacing, and captured the essence of a real QR code was a challenge.

Solution: I did multiple iterations of adjusting the borders and spacing to make it look visually accurate.

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

I would like help with media queries or other CSS techniques to scale the QR code appropriately. Also, on making the CSS flexbox layout responsive, particularly how to adjust the QR code’s size without distorting its pattern.

Code

Please log in to post a comment

Log in

Community feedback

  • Pelumi Aiyebola•80
    @Pelumi72

    I think the height added to the Qr-code image isn't really necessary or it can be adjusted to look like the original design but every other thing from my point of view is good. It is also a good use of bootstrap. I think for scaling it is best to use percentages because with pixels the images might be static, so it might not be responsive to the change in screen width but with percentages, the image becomes more responsive to the difference in screen-width.

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