May 2025(2 weeks) / Maintained in June 2026
Why I built this
I built a small-scale responsive e-commerce website as my second web project after creating a static website. The goal was to simulate a simple online shopping experience with basic interactivity and responsive layout design.
How it came together
This project expanded on the fundamentals from my first static website. A grid-based layout was used to structure product listings. I organised a category-based product structure within the directory, with navigation linking main and subcategories. JavaScript was used for login form validation and a homepage slideshow, while CSS handled dynamic hero section animations.
Troubleshooting
Combining multiple layout sections caused overlapping issues between the grid content and the footer.
Building a smooth, multi-level dropdown menu within a fixed sidebar was challenging.
Managing the mobile hamburger menu-including its dynamic height, full-width layout, and background overlay-presented several structural challenges.
It was challenging to create a visually engaging first homepage that smoothly combined a slideshow with CSS animations.
Restructured the CSS positioning and established a strict z-index hierarchy to ensure navigation elements always remain on top of the grid content and footer.
Designed a two-tier fly-out dropdown menu that expands to the right on hover, using a nested <div> inside each main menu <li> to contain the submenu (<ul>).
Used JavaScript to control the hamburger menu and ensure it opened correctly above the page content.
To combine both the hero animations and the slideshow, Swiper was used to manage slide transitions, while CSS animations were controlled through media queries.
Learned to manage complex layouts by combining semantic HTML, CSS layout techniques, and JavaScript to deliver a consistent, responsive user experience across desktop and mobile devices.