CSS3, Flexbox, Bootstrap, Margin, Padding, Transition

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

Most proud of: I’m most proud of creating a clean and centered card layout that closely matches the design. I was able to use Flexbox to center the card both vertically and horizontally, implement proper spacing with padding and margin, and maintain a mobile-first, responsive design. The typography hierarchy and footer styling also turned out neat and consistent.

What I would do differently next time: Next time, I would avoid using fixed heights (height: 499px) and absolute positioning, which initially made spacing and vertical centering tricky. Instead, I’d rely fully on flexible layouts so the card adapts naturally to different screen sizes. I’d also experiment with CSS Grid or small hover animations to make the component feel more interactive.

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

One of the main challenges was centering the card both vertically and horizontally while keeping the layout responsive. Initially, I used a fixed height and absolute positioning for the image, which made it difficult to add consistent spacing below the content and keep everything aligned on different screens. Another minor challenge was structuring the footer so that it appeared neatly below the card without breaking the layout.

How I overcame them: I solved these issues by switching to a flexbox-based layout, using flex-direction: column, justify-content: center, and align-items: center on the body. This allowed the card to stay perfectly centered, and removing fixed heights made spacing easier. For the footer, I used margin-top and text-align: center, which kept it visually aligned without interfering with the card’s placement.

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

Responsive design improvements :I’d like feedback on how to make the QR card scale better on larger screens, like tablets and desktops, without breaking the layout or spacing.

CSS best practices : I want to know if my use of flexbox, margin, and padding is optimal, or if there’s a cleaner way to structure the layout.