pettik--loopstudios-landing-page

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

I am most proud of successfully implementing the CSS Grid and Flexbox layout, ensuring a fully responsive design for various screen sizes. The hover effects on the product images turned out great, adding a nice interactive touch. If I were to do it again, I would improve the mobile navigation menu to make it smoother and enhance accessibility. Additionally, I would optimize the font sizes and spacing more carefully for smaller screens. Lastly, I might experiment with CSS animations to make the page more dynamic.

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

One of the biggest challenges was aligning the section's content box properly on different screen sizes. Initially, it overlapped incorrectly, but I solved this by adjusting relative and absolute positioning and tweaking media queries. Another challenge was ensuring the navigation bar transition works smoothly on mobile—after struggling with the display toggle, I refined it by adjusting CSS display properties and JavaScript event listeners. Finally, handling image scaling on hover required fine-tuning the property to prevent layout shifts.transform

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

I would appreciate feedback on mobile responsiveness, especially how the banner heading scales on smaller devices. Additionally, I am unsure if my CSS custom properties ( variables) are structured efficiently—are there better ways to manage them? Finally, I’d love to hear suggestions on optimizing image loading performance, particularly for the background and product images, without compromising quality.:root