🛍️ Amazon Clone
A front-end clone of Amazon’s homepage built with HTML, CSS, and JavaScript to practice responsive web design and dynamic UI functionality. This project focuses on recreating key features of the Amazon shopping experience, including product display, a working cart system, and delivery-based pricing logic.
🚀 Live Demo
🧰 Technologies Used
- HTML5 – Semantic structure and content layout
- CSS3 – Styling, layout (Flexbox & Grid), responsiveness
- JavaScript (Vanilla) – DOM manipulation, cart logic, interactivity
- Git & GitHub – Version control and hosting
- GitHub Pages – Live project deployment
✅ Features
- Responsive Amazon-style UI using Flexbox, Grid, and media queries
- Add-to-cart functionality with quantity selection
- Update or remove items from the cart
- Real-time price calculation based on quantity
- Dynamic delivery options (slower = cheaper, faster = more expensive)
- Modular product card layout with images and details
- Clean, maintainable, and beginner-friendly code
📁 Project Structure
updated-amazon-clone/
├── index.html
├── style.css
├── script.js
├── /images
└── README.md
📚 Lessons Learned
- Working with JavaScript to manipulate the DOM dynamically
- Building a cart system from scratch with quantity logic and price updates
- Using Flexbox and CSS Grid for responsive layouts
- Hosting static websites using GitHub Pages
🚧 Future Improvements
- Local storage support for cart persistence
- Product filtering and search functionality
- Integration with a backend for real-time inventory
👨💻 Author
Joffrey James M. Pajaron
📧 joffreypajaron@gmail.com
📍 Mandaue City, Cebu
🔗 GitHub Profile