
QR-Code-Component using CSS Flexbox
Design comparison
Solution retrospective
I am proud of my determination and resilience in completing this project. When I started, I felt completely lost and unsure of how to proceed. As someone deeply passionate about backend development, transitioning towards becoming a full-stack developer has been challenging, especially in balancing my efforts on frontend development. Despite my initial struggles and thoughts of abandoning the project altogether, I managed to pick myself up and see it through to completion.
I did take some help by referring to others' code and using ChatGPT to overcome certain hurdles. While these resources were valuable, I aspire to rely less on such assistance in the future, focusing more on independently solving problems. My goal is to further strengthen my skills and build confidence in tackling challenges on my own.
Next time, I aim to:
- Dedicate more time to planning and understanding the project requirements upfront.
- Use external resources more judiciously, reserving them as a last resort.
- Improve my knowledge and confidence in frontend development to achieve a more balanced skill set.
This project has been a valuable learning experience, and I’m proud of the progress I’ve made despite the obstacles.
What challenges did you encounter, and how did you overcome them?One of the biggest challenges I faced was my limited knowledge of UI development. Specifically, I struggled with properly organizing and placing elements inside a div
the way I wanted, which left me feeling completely lost at times.
To overcome this, I decided to take a step back and seek out more structured resources. Going through tutorials and documentation helped me gain a better understanding of how to structure and style elements effectively. The more I practiced and applied the concepts, the more confident I became in working with the frontend.
Although it was challenging at first, the process of learning and solving these UI-related problems was incredibly rewarding and has significantly improved my skills in this area.
What specific areas of your project would you like help with?I would appreciate any guidance on improving the quality of my code. Specifically, I’m looking for suggestions on best practices or more efficient approaches to achieve the same outcomes. If there are any tools, patterns, or techniques that could help me write cleaner, more maintainable code, I would be grateful to learn about them.
Community feedback
- @KapteynUniversePosted 4 months ago
Hey Dinesh, nice job.
Landmarks, (or this page) are essencial for accesibility. Every page needs one main. Wrapping your qr-code div or changing the div with a main would be good. Since this would be a single element around others and not the whole content of a real page, wrapping might be better.
Image alt texts needs to be meaningful, unless decorative. Right now a screen reader only sees the qr code img as "image" + "QR code". "QR code to frontendmentor.io" might be better.
For better responsiveness; use rem and max-min values. max-width: 20rem; for the width: 320px; in your qr-code div for example. You don't need to set height most of the times. Use rem especially for font sizes and media queries
i recommend you to use a modern css reset for every project. You can check Andy Bells reset too.
Marked as helpful1P@SaiDineshKopparthiPosted 4 months ago@KapteynUniverse
Firstly, I want to thank you for taking the time to provide such valuable feedback.
Your suggestions were incredibly helpful, and the resources you shared gave me a great starting point for improving accessibility and implementing a CSS reset.
I hadn’t realized the importance of meaningful alt text until you pointed it out, and I will definitely make sure to use more descriptive alt text moving forward.
Additionally, I’ve used
rem
andmin-max
values as you recommended, and I’ve included a simple version of Andy Bell's modern reset. However, I know there’s still a lot for me to learn and improve upon.I’ve bookmarked all the links you shared so that I can revisit them frequently as I continue to grow as a developer.
Once again, thank you for your help, it was extremely valuable!
1 - P@devchris03Posted 4 months ago
Your solution is very good
1P@SaiDineshKopparthiPosted 4 months ago@devchris03
Thank you so much for the feedback! I really appreciate it.
0
Please log in to post a comment
Log in with GitHubJoin 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