Static webpage using HTML and Basic CSS properties

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

I'm particularly proud of successfully completing this project and applying my front-end development skills to create a visually appealing and responsive QR Code component. I learned a lot about structuring clean, semantic HTML, and using CSS Flexbox for layout, which greatly improved my understanding of responsive design. The final result is simple yet effective, and I’m happy with the clean, professional look it achieved. Next time, I would focus on making the project more dynamic by integrating JavaScript to allow users to customize the QR code with different URLs. Additionally, I would explore advanced CSS techniques, such as animations, to add subtle interactivity to the component.

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

One challenge I faced during the development of this project was the issue of page section overflow when I initially used 100vh (100% of the viewport height) for the height of the body and container elements. On some devices, especially mobile, the 100vh value caused overflow problems due to dynamic changes in the viewport height caused by UI elements like address bars or scroll bars. This resulted in unexpected layout issues where content would be cut off or excess scrolling would occur.

How I Overcame It To solve this issue, I switched from using height: 100% to min-height: 100vh for the html and body elements. This adjustment allowed the content to take up at least the full height of the viewport but also to expand when necessary, preventing overflow problems.

The use of min-height: 100vh provided flexibility, particularly on mobile devices, by ensuring the layout could adapt as needed without being constrained by a fixed height. This solution helped me maintain a clean and responsive design across different devices.

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

While I’m satisfied with the progress on this project, there are a few areas where I could use further guidance:

Cross-browser Compatibility: Ensuring the project looks and functions consistently across all browsers, especially on older versions of Internet Explorer and mobile browsers, remains a challenge. Any tips on handling browser-specific bugs or testing methodologies would be greatly appreciated.

Responsive Design: Although the layout adapts well to most screen sizes, I’d appreciate feedback on how to further refine the responsiveness, especially on very small or very large devices.

Accessibility: I’m striving to make this project more accessible for users with disabilities. Any recommendations for improving accessibility, would be helpful.