Capital
A responsive fashion e-commerce storefront
Capital is a fashion e-commerce storefront I built to practise the patterns a real online store relies on. Product grids, category browsing, promotions, and a layout designed to move a shopper from landing to a product they want.
Technology
Outcomes
- A complete storefront front end covering home, catalogue, and contact
- Reusable product card components and a consistent retail layout
- Responsive across mobile, tablet, and desktop
Case study
How Capital came together
The problem
I wanted to build a full commerce storefront end to end, so I could work through the structure a real shop needs rather than a single isolated page.
Research
I studied common storefront patterns, how product listings, sale promotions, trending sections, and category entry points are arranged to guide a shopper through a catalogue.
Planning
I planned the page flow around a shopper's path. A hero promotion, clear category entry points, a trending products grid, social proof, and newsletter capture.
Design
The interface follows a clean retail layout with prominent product cards, sale badges, and direct calls to action, so the catalogue reads clearly at a glance.
Development
I built the storefront with HTML, CSS, and JavaScript, focusing on a flexible product grid and reusable card structure, and deployed it on Vercel.
Challenges
The main challenge was keeping the product grid and navigation clean and consistent across very different screen sizes.
Solutions
I used a flexible grid and a single repeating card pattern so the catalogue keeps its shape and rhythm on any device.
Outcomes
A complete, responsive storefront front end that demonstrates commerce interface patterns from landing through to product browsing.
What I learned
Building a retail layout sharpened how I structure repeating components and visual hierarchy, which carries into every interface I build.
Keep exploring
All projects