Responsive QR Code

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

I am particularly proud of my ability to create a visually appealing and responsive design using HTML and CSS. Using Flexbox to center elements both vertically and horizontally was a significant achievement for me as it improved the overall user experience. Additionally, I successfully implemented a mobile-first approach, allowing me to ensure the card looked good on devices of all sizes. The project also helped me hone my skills in typography and design.

If I were to tackle a similar project again, I would explore using CSS Grid in addition to Flexbox to better understand the layout options and capabilities. I would also consider adding interactivity using JavaScript, such as hover animations on the card or a function that dynamically changes the content displayed on the card. Finally,

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

Challenges faced:

Adaptive design : One of the biggest challenges was to ensure that the QR code card looked good on different screen sizes. Balancing the design between mobile and desktop layouts required careful consideration of padding, margins and font sizes.

Consistency in style: maintaining a consistent design language across the different elements of the card was also a challenge. I had to pay attention to colour schemes, font choices and spacing to make sure everything was consistent.

Understanding Flexbox: While I had some experience with Flexbox, using it effectively to centre elements both vertically and horizontally took practice. I had moments of frustration when elements didn't line up as I expected.

How I overcame them:

Adaptive design : To meet the adaptive design challenge, I used media queries to adjust the card layout based on screen size. I tested the design on various devices and emulators to make sure it was easy to use on all platforms.

Style consistency: I created a style guide for the design elements of the card, including colour codes, font sizes and spacing guidelines. This helped me maintain consistency throughout the project and made it easy to make adjustments as needed.

Understanding Flexbox: To improve my knowledge of Flexbox, I consulted online tutorials and documentation. I practised creating small test layouts before applying the concepts to the card component, which helped me gain confidence and understanding.