HTML, CSS Flexbox, JavaScript, Git, Github, Responsive Web Design

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

I’m most proud of how persistently I tackled layout and responsiveness issues in this project. I went deep into debugging with outlines, tested across screen sizes down to 300px, and refined the mobile version of the design to match the brief almost pixel-perfectly. I also learned how to better structure CSS for flexibility and how small properties like position or overflow can impact layout flow in surprising ways.

If I were to do it again, I’d plan my layout flow more deliberately from the start, especially around flexbox behavior and stacking order in mobile view. I’d also avoid over-relying on fixed heights or top offsets, and instead trust natural content flow with more padding and spacing utilities. That would save a lot of back-and-forth fine-tuning.

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

One of the biggest challenges was managing layout flow and positioning across different screen sizes — especially for the section with overlapping elements like the phones and background gradient. I struggled with text being pushed out of containers, unexpected whitespace, and elements not responding to padding or margin as expected.

I overcame these by inspecting every element visually using colored outlines and systematically testing how properties like position, margin, height, and z-index interacted. I also learned to trust natural document flow more instead of using fixed positioning, and I adjusted my media queries to apply styles only when appropriate. Breaking things down step by step helped me isolate the real issues.

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

I’d love feedback on how to better structure my CSS for maintainability and scalability — especially when dealing with complex responsive layouts. I’m also interested in any best practices for managing overlapping elements and improving layout flow without relying too much on negative margins or absolute positioning. If there are cleaner or more efficient ways to handle the mobile-to-desktop transitions in a layout like this, I’d really appreciate suggestions.