# Project Documentation: Shoe Shopping Website

## 1. Project Overview

The **Shoe Shopping Website** is a simple yet interactive online store built with HTML, CSS, and JavaScript. It allows users to browse featured shoes, explore a product catalog, learn about the brand, and get in touch through a functional contact form. The project demonstrates responsive design, dynamic form validation, and user interaction.

---

## 2. Objectives

* Provide a visually appealing platform to display shoes.
* Implement a responsive layout for desktop and mobile devices.
* Enhance user experience through JavaScript interactivity.
* Validate user input in the contact form.

---

## 3. Features

* **Homepage with navigation** to Featured, Products, About, and Contact sections.
* **Featured shoes section** highlighting top picks with images, names, and prices.
* **Products catalog** in a table format, showing multiple shoe brands, features, and prices.
* **About section** describing the business mission.
* **Contact form** with:

* Input validation (name, email, message).
* Success and error messages.
* Integration with email client using `mailto`.
* **Interactive buttons**:

* Subscribe button changes state after click.
* Thank-you button triggers an alert.

---

## 4. Tech Stack

* **HTML5** – Structure of the website.
* **CSS3** – Styling, responsive design, and animations.
* **JavaScript (Vanilla JS)** – Interactivity, form validation, event handling.

---

## 5. File Structure

project-folder/
│── index.html       # Main HTML structure
│── style.css        # Styling and layout
│── script.js        # Form validation and interactivity

---

## 6. Key Functionalities

### Contact Form Validation

* Ensures **name is at least 3 characters**.
* Checks **valid email format**.
* Verifies **message has at least 10 characters**.
* Displays error or success messages dynamically.
* Opens default email client with pre-filled subject and body when successful.

### Subscribe Button

* On click, changes text to “Subscribed” and becomes disabled.

### Responsive Design

* Layout adjusts for devices with screen widths under 900px and 600px.

---

## 7. How to Run

1. Download the project folder.
2. Open `index.html` in any modern browser.
3. Interact with navigation, forms, and buttons.

---

## 8. Future Improvements

* Add a backend for actual form submissions and subscriptions.
* Implement a real product database instead of static data.
* Include a shopping cart and checkout process.
* Improve accessibility features (ARIA labels, better contrast).

---