Tech-Book-Club-Landing-Page

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

Reflection What I’m most proud of: I’m particularly proud of how I used Flexbox to create a responsive layout that adapts smoothly across desktop, tablet, and mobile screen sizes. The process of refining the design through media queries allowed me to enhance the user experience on all devices, staying true to the original design intent.

What I’d do differently next time: Next time, I’d implement the practice of adding a CSS reset at the start of the project to ensure consistent styling across different browsers. Additionally, I’d consider incorporating a CSS framework, specifically SCSS, to improve efficiency and maintainability. By leveraging SCSS features like variables, nesting, and mixins, I could streamline the styling process and make it easier to scale and manage the CSS code.

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

One of the key challenges I faced during the project was structuring the footer to ensure responsive adaptability for the mobile layout. The desktop footer design featured multiple elements aligned horizontally, which didn’t translate well to smaller screen sizes.

To overcome this:

I used Flexbox to create a flexible structure for the footer, allowing it to stack elements vertically when the screen size reduced. I adjusted the alignment, spacing, and font sizes through media queries to ensure the footer remained legible and visually balanced on mobile devices. I tested the footer extensively on various screen sizes to ensure a seamless transition between layouts. This iterative approach helped me create a functional and visually consistent footer across all devices.

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

I would like to receive feedback to ensure that the code is functional across multiple browsers. Additionally, I’d appreciate advice on whether the programming language image for adaptability purposes would be better placed in its own div element within its section on desktop or as a standalone img to allow more flexibility for responsive adaptability.