Submitted 14 days ago

QR Code Component using CSS Flexbox

Vivek954sahu• 50

@Vivek954sahu

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’m most proud of how I was able to translate the design specifications into a fully responsive web page component. It was rewarding to see my initial sketches and ideas come to life with HTML and CSS. I also enjoyed experimenting with responsive design techniques, ensuring the layout looked good on different screen sizes. Completing the project gave me a deeper understanding of flexbox principles and how to effectively use CSS properties. Next time, I would allocate more time for planning and prototyping before jumping into coding. While I was able to finish the project, I realized that a more structured approach could help streamline the process. I’d also like to focus more on accessibility features to ensure a better experience for all users.

Community feedback

AmmIjaz• 30

@AmmIjaz

Posted 12 days ago

The solution uses semantic HTML to a decent extent, but additional elements like <main> and <section> could improve it.
The solution is accessible but could benefit from alt text for the QR image and better heading structure.
The layout adapts well to different screen sizes due to the use of flexbox, though additional media queries could optimize smaller screens.
The code is well-structured but could improve readability by adding more comments and separating concerns (moving inline styles to the stylesheet).
The solution largely aligns with the original design, with no major deviations detected.

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