Amazon Clone Project

Project Description (Live link)

The Amazon Clone is a replica of Amazon's e-commerce website built for learning purposes. This project focuses on implementing precise design standards using HTML and CSS, closely mimicking Amazon's UI layout and responsiveness. It serves as a hands-on learning exercise to master web development fundamentals, including layout techniques, typography, scroll behavior, and interactive UI components.

---

Implementation Learnings

HTML

Semantic tags like <header>, <footer>, <main>, and <aside>were used for proper content hierarchy.

CSS

Flexbox:

• Used extensively for the navigation bar, product display grid, and footer.

Typography:

• Font sizes, weights, and spacings were matched precisely to the provided design.

Responsive Design:

• Media queries were utilized to ensure compatibility across various screen sizes.

Hover Effects:

• Added interactive hover effects on buttons, links, and images.

---

Project Structure

amazon-clone/
├── index.html
├── style.css
├── index.js
├── assets/
│   ├── card-images/       
│   ├── carousel-images/
└── README.md    

---

Author

The Amazon-clone is developed and maintained by Mahesh Mali.

---

Conclusion

This project has been an excellent exercise in mastering HTML and CSS while focusing on design accuracy and web development best practices. It provides a solid foundation for transitioning to advanced web development concepts like JavaScript, frameworks, and backend integration.

---