Project 03 · February 2023

Online
Groceries
Website

Frontend HTML/CSS/JS Responsive E-Commerce

A responsive online grocery platform with product listings, basic search functionality, and a client-side cart — built entirely with vanilla front-end technologies. The mockup below is interactive — try adding items to the cart!

Interactive Preview

Website Mockup

🔒 freshmart-groceries.com

Fresh. Fast. Delivered.

Shop from thousands of fresh groceries, delivered to your door.

Objective

Create a basic and user-friendly online grocery website for browsing products and managing essential shopping interactions, demonstrating proficiency in core front-end development without frameworks.

Tech Stack
HTML5 CSS3 JavaScript
Features Built
  • Product listing grid with images and prices
  • Basic search and filter functionality
  • Client-side cart with add/remove items
  • Fully responsive layout for mobile and desktop
Learning Outcomes
  • DOM manipulation with vanilla JavaScript
  • CSS Grid and Flexbox for responsive layouts
  • Event handling and state without frameworks
  • Semantic HTML structure for accessibility
Outcome

Delivered a responsive website showcasing core front-end development skills. Demonstrated ability to build functional user interfaces from scratch without relying on frameworks or libraries.

← Back to Portfolio
🛒 Added to cart!