responsive QR code component - HTML - CSS - Responsive design

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

I’m proud to have completed this project entirely on my own, without relying on external support—human or otherwise. I was able to overcome every challenge that came up during the development process, which gave me a deeper sense of confidence in my skills.

As for the final result, I believe it closely resembles the original design, and I’m happy with how it turned out.

Moving forward, I’d like to incorporate more modern tools such as frameworks to streamline development and explore more advanced workflows.

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

Challenges I Faced During Development

Learning and applying advanced HTML properties
I explored and implemented lesser-known attributes of the <img> tag, such as referrerpolicy, crossorigin, loading="lazy", and decoding="async". This required additional research to understand how these attributes can enhance security and improve performance.

Responsive design without relying on media queries
One of the main challenges was achieving a fully responsive layout. I experimented with the clamp() function to handle fluid font sizing, which allowed me to maintain a consistent experience across screen sizes without writing multiple media queries.

Creating a custom CSS reset
Writing my own CSS reset from scratch was both challenging and enlightening. It forced me to understand how browsers apply default styles and how to neutralize them without breaking the overall layout and structure.

First-time use of Git and GitHub for version control
This was my first time managing a complete project using Git. While the basics were straightforward, learning how to properly commit changes, push updates, and keep the repository organized required patience and practice.

Building layouts with Flexbox and Grid
While I successfully used Flexbox and CSS Grid for layout structure, I realized there's still a lot to learn to use them more effectively. Understanding their full potential is something I aim to improve in future projects.

Fully independent development
Completing the project on my own—with no human or AI assistance—was one of the biggest challenges. It required constant self-research, troubleshooting, and decision-making. Despite the obstacles, I was able to get very close to the original design and gained a lot of confidence in the process.

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

What I’d Like Help With

While I’m proud of completing this project independently, there are a few specific areas where I’d really appreciate feedback:

Responsiveness techniques
I used clamp() to handle responsive typography without media queries. Does this approach scale well across different resolutions and devices? Are there edge cases I might have missed?

Image performance and security attributes
I applied several <img> attributes like referrerpolicy, crossorigin, decoding, and loading. Are these the best choices for this type of project, or are there better practices I should consider?

CSS structure and organization
I wrote my own CSS reset and tried to keep variables and layout code well-organized. Are there any improvements you’d suggest for clarity, maintainability, or scalability?

Accessibility
I attempted to use semantic HTML wherever possible. Are there accessibility improvements I should implement for a better user experience, especially for screen reader users?

General code quality
Any recommendations on improving my code readability, file structure, or adherence to modern front-end development standards are more than welcome!