QR Code Component Using Flex

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

I’m most proud of successfully centering elements using Flexbox and ensuring responsiveness across different screen sizes. Initially, aligning the card perfectly in the center was challenging, but after using display: flex; align-items: center; justify-content: center;, I achieved the desired layout.

Next time, I would explore CSS Grid for layout structuring to see if it provides a more efficient approach, and I’d also focus more on accessibility improvements following WCAG guidelines.

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

a. Centering the Card: I struggled with centering the QR code card properly. I overcame this by learning more about Flexbox and using display: flex; align-items: center; justify-content: center;.

b.Ensuring Responsiveness: The design didn’t scale well on small screens at first. I fixed this by setting a max-width for the .card and applying media queries for better responsiveness.

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

a. Improving Code Efficiency: I’d like feedback on whether my CSS structure could be optimized further, such as reducing redundancy or using best practices.

b. Expanding Layout Techniques: While I used Flexbox effectively, I’d like to understand how CSS Grid could be applied for better structure in future projects.