huddle Landing Page using css flex

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

I’m proud of the following: How the layout adapts seamlessly from mobile to desktop. Starting with a mobile-first approach helped me structure the CSS in a scalable way.

The subtle hover effects on the social media icons and the “Register” button add interactivity and polish — small details that make a difference.

Organising colours using root variables made the styling process more efficient and reusable.

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

Getting the layout to look good on both mobile and desktop screens was initially challenging, particularly with image scaling and spacing. I started with a mobile-first approach and then used media queries to adjust layout, spacing, and font sizes for larger screens. Testing the design in the browser's responsive mode was very helpful.

Some elements, such as the social icons and description section, were not aligning properly within the flex container. I utilised Flexbox properties, such as justify-content and align-items, more effectively and ensured that I defined proper widths for containers. Adding margin and adjusting the text-align property helped fine-tune the layout.

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

Are there any improvements I can make to ensure the site is more accessible, particularly for users with screen readers and those who use keyboard navigation?

While I’ve implemented a mobile-first design and added media queries, I would love feedback on how to further improve the responsiveness.

Is my use of semantic tags (main, footer, etc.) appropriate?

Should I restructure parts of the content to improve readability and semantics?

Does the way I’ve structured the CSS make sense and follow best practices?

Are there any suggestions for cleaning up or refactoring the style rules, particularly within the media query section?