Created a webpage for QR code using HTML and CSS

Solution retrospective
What I’m most proud of: I’m proud that I was able to create a clean and functional webpage using just HTML and CSS, without relying on frameworks or complex tools. It was satisfying to see the QR code displayed exactly as intended, and it gave me confidence in my foundational web development skills.
What I’d do differently next time: Next time, I’d like to make the page more dynamic by adding JavaScript so users can input their own text or links to generate a custom QR code. I’d also spend more time on improving the responsiveness and accessibility of the page to make sure it works better across all devices and for all users.
What challenges did you encounter, and how did you overcome them?One of the main challenges I faced was positioning the QR code exactly where I wanted it on the page using only HTML and CSS. Without using layout tools like Flexbox or Grid, I relied on position: relative and position: absolute to place elements precisely. I used properties like top, left, and right to fine-tune the placement and ensure the QR code appeared in the desired location.
Another challenge was making sure the layout remained clean and consistent across devices. I overcame this by adjusting the positioning values through trial and error and previewing the page on different screen sizes to maintain a balanced design.
What specific areas of your project would you like help with?I’d like help with making the webpage more responsive across different screen sizes using better positioning techniques. Since I used relative and absolute positioning, it works well on certain devices but may not scale properly on all screen sizes.
I’m also interested in learning how to add JavaScript to make the QR code dynamic—allowing users to enter a link or text and generate a QR code instantly. Additionally, any suggestions on improving accessibility (such as for screen readers) or optimizing the page for faster loading would be appreciated.
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on ganispydev's solution.
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