Submitted 6 months ago

qr code component

Damilola Emmanuel• 140

@Damilordz

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 are you most proud of, and what would you do differently next time?

I am most proud of how I successfully implemented the QR code component according to the specifications provided by Frontend Mentor. Next time, I would like to enhance the responsiveness of the component to ensure it displays optimally across various devices and screen sizes.

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

One challenge I encountered was styling the QR code component to achieve the desired layout and design. To overcome this challenge, I utilised CSS flex-box and experimented with different properties until I achieved the desired result.

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

I would appreciate feedback on the overall design and user experience of the QR code component. I would like suggestions on how to improve the visual appeal and usability of the component.

Community feedback

Darkstar• 1,000

@DarkstarXDD

Posted 6 months ago

You should have a <main> landmark element. Reference
Your attribution should go inside a <footer> landmark.
Currently your component is not properly responsive. One main reason for that is you have set fixed widths for the .card. You shouldn't set fixed widths for containers. It takes away the containers ability to dynamically resize. To fix that, on your .card, instead of width use max-width.
Remove the height of the .card. Let the content inside the card decide it's height. No need to specify fixed heights.
Change the width of the image to be 100% instead of a fixed size in px. Also remove the height of the image or set it to auto. Now if you use the browsers developer tools and resize the screen size you will see it's properly responsive.

Jan Kotvaš• 260

@DrakeHermit

Posted 6 months ago

Looks good, but in the future I would have a separate file for the CSS styling, having it all in the HTML file can make it hard to discern what's what. But overall your design looks clean. Also maybe remove the div with attribution class. One more thing you don't need to deploy the design folder I would put that in my gitignore file.

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