diff --git a/E-commerce/Readme.md b/E-commerce/Readme.md
new file mode 100644
index 00000000..5cc45fc2
--- /dev/null
+++ b/E-commerce/Readme.md
@@ -0,0 +1,71 @@
+# Colorful Socks E-commerce Platform
+
+This is a simple e-commerce platform built using **Vanilla JavaScript**, **HTML**, and **CSS**, featuring a collection of colorful socks. The platform allows users to view available socks, add them to a cart, and proceed to checkout. It showcases a clean layout with a grid system and modern styling.
+
+## Table of Contents
+- [Features](#features)
+- [Technologies Used](#technologies-used)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Folder Structure](#folder-structure)
+
+## Features
+- **Product Display**: View colorful socks in a responsive grid format.
+- **Add to Cart**: Select socks to add to the shopping cart.
+- **Cart Management**: See items in the cart and calculate the total price.
+- **Checkout**: Proceed to checkout, displaying a purchase confirmation.
+- **Responsive Design**: Adjusts to different screen sizes.
+
+## Technologies Used
+- **HTML5**
+- **CSS3** (Grid layout, Shadows, Responsive Design)
+- **Vanilla JavaScript**
+
+## Installation
+
+1. Clone the repository:
+    ```bash
+    git clone https://github.com/DhanushNehru/Ultimate-Web-Development-Resources.git
+    ```
+2. Navigate to the project directory:
+    ```bash
+    cd E-commerce
+    ```
+
+3. Ensure the `index.html`, `styles.css`, and `images` folder are in the same directory.
+
+## Usage
+
+1. Open `index.html` in your browser to launch the e-commerce platform.
+
+Here is a screenshot of the homepage:
+
+![Homepage Screenshot](./assets/screenshot-homepage.png)
+
+2. Browse the available socks, and click **Add to Cart** to include them in your shopping cart.
+
+Here is a screenshot of the cart:
+![Cart Screenshot](./assets/screenshot-cart.png)
+
+3. Click **Checkout** to simulate a purchase.
+
+Here is a screenshot of the checkout functionality:
+![Checkout Screenshot](./assets/screenshot-checkout.png)
+
+## Folder Structure
+
+```bash
+.
+├── images/                  # Contains product images
+│   ├── red-socks.jpg
+│   ├── blue-socks.jpg
+│   └── green-socks.jpg
+├── socks-ecommerce-platform.html  # Main HTML file
+├── socks-ecommerce-styles.css     # Main CSS file
+└── README.md                # Project documentation
+```
+
+## Feel Free to Connect with Me
+
+You can find me on GitHub: [Areeb Niyas](https://github.com/areebniyas)
+
diff --git a/E-commerce/assets/screenshot-cart.png b/E-commerce/assets/screenshot-cart.png
new file mode 100644
index 00000000..8ddca98c
Binary files /dev/null and b/E-commerce/assets/screenshot-cart.png differ
diff --git a/E-commerce/assets/screenshot-checkout.png b/E-commerce/assets/screenshot-checkout.png
new file mode 100644
index 00000000..e4c378a3
Binary files /dev/null and b/E-commerce/assets/screenshot-checkout.png differ
diff --git a/E-commerce/assets/screenshot-homepage.png b/E-commerce/assets/screenshot-homepage.png
new file mode 100644
index 00000000..346de38c
Binary files /dev/null and b/E-commerce/assets/screenshot-homepage.png differ
diff --git a/E-commerce/images/blue-socks.jpg b/E-commerce/images/blue-socks.jpg
new file mode 100644
index 00000000..78d5d35a
Binary files /dev/null and b/E-commerce/images/blue-socks.jpg differ
diff --git a/E-commerce/images/green-socks.jpg b/E-commerce/images/green-socks.jpg
new file mode 100644
index 00000000..8214952c
Binary files /dev/null and b/E-commerce/images/green-socks.jpg differ
diff --git a/E-commerce/images/red-socks.jpg b/E-commerce/images/red-socks.jpg
new file mode 100644
index 00000000..61911471
Binary files /dev/null and b/E-commerce/images/red-socks.jpg differ
diff --git a/E-commerce/img/cloud.png b/E-commerce/img/cloud.png
deleted file mode 100644
index a1a58a3a..00000000
Binary files a/E-commerce/img/cloud.png and /dev/null differ
diff --git a/E-commerce/index.html b/E-commerce/index.html
deleted file mode 100644
index b498f826..00000000
--- a/E-commerce/index.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<!-- ... (previous HTML code) ... -->
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>My Unique E-Commerce Website</title>
-    <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-    <header>
-        <h1>Welcome to My Unique E-Commerce Store</h1>
-        <p>Discover Amazing Products</p>
-    </header>
-    <section class="product-list">
-        <div class="product">
-            <img src="img/cloud.png" alt="Product 1">
-            <h2>Product 1</h2>
-            <p>Description of Product 1.</p>
-            <p>Price: ₹600</p>
-            <button class="add-to-cart" data-product="Product 1" data-price="600" data-image="img/cloud.png">Add to Cart</button>
-        </div>
-        <div class="product">
-            <img src="img/cloud.png" alt="Product 1">
-            <h2>Product 2</h2>
-            <p>Description of Product 2.</p>
-            <p>Price: ₹300</p>
-            <button class="add-to-cart" data-product="Product 2" data-price="300" data-image="img/cloud.png">Add to Cart</button>
-        </div>
-        <div class="product">
-            <img src="img/cloud.png" alt="Product 1">
-            <h2>Product 3</h2>
-            <p>Description of Product 3.</p>
-            <p>Price: ₹400</p>
-            <button class="add-to-cart" data-product="Product 3" data-price="400" data-image="img/cloud.png">Add to Cart</button>
-        </div>
-        <div class="product">
-            <img src="img/cloud.png" alt="Product 1">
-            <h2>Product 4</h2>
-            <p>Description of Product 4.</p>
-            <p>Price: ₹500</p>
-            <button class="add-to-cart" data-product="Product 4" data-price="500" data-image="img/cloud.png">Add to Cart</button>
-        </div>
-        <!-- Add more product listings here -->
-    </section>
-    <section class="cart">
-        <h2>Your Cart</h2>
-        <ul id="cart-items">
-            <!-- Cart items will be displayed here -->
-        </ul>
-        <p>Total: $<span id="cart-total">0.00</span></p>
-    </section>
-    <footer>
-        <p>&copy; 2023 My Unique E-Commerce Store</p>
-    </footer>
-    <script src="script.js"></script>
-</body>
-</html>
diff --git a/E-commerce/script.js b/E-commerce/script.js
deleted file mode 100644
index 1847ee20..00000000
--- a/E-commerce/script.js
+++ /dev/null
@@ -1,44 +0,0 @@
-// JavaScript for the shopping cart functionality
-
-const cartItems = document.getElementById("cart-items");
-const cartTotal = document.getElementById("cart-total");
-const addToCartButtons = document.querySelectorAll(".add-to-cart");
-
-let cart = [];
-let total = 0;
-
-addToCartButtons.forEach((button) => {
-    button.addEventListener("click", () => {
-        const productName = button.getAttribute("data-product");
-        const productPrice = parseFloat(button.getAttribute("data-price"));
-        const productImage = button.getAttribute("data-image");
-
-        cart.push({ name: productName, price: productPrice, image: productImage });
-        total += productPrice;
-
-        updateCart();
-    });
-});
-
-function updateCart() {
-    cartItems.innerHTML = "";
-    cart.forEach((item, index) => {
-        const listItem = document.createElement("li");
-        listItem.innerHTML = `<img src="${item.image}" alt="${item.name}" /> ${item.name} - $${item.price.toFixed(2)} <button class="delete-item" data-index="${index}">Delete</button>`;
-        cartItems.appendChild(listItem);
-    });
-
-    cartTotal.innerText = total.toFixed(2);
-
-    // Attach click event listeners to delete buttons
-    const deleteButtons = document.querySelectorAll(".delete-item");
-    deleteButtons.forEach((deleteButton) => {
-        deleteButton.addEventListener("click", () => {
-            const index = parseInt(deleteButton.getAttribute("data-index"), 10);
-            const deletedItemPrice = cart[index].price;
-            cart.splice(index, 1);
-            total -= deletedItemPrice;
-            updateCart();
-        });
-    });
-}
diff --git a/E-commerce/socks-ecommerce-platform.html b/E-commerce/socks-ecommerce-platform.html
new file mode 100644
index 00000000..98081a61
--- /dev/null
+++ b/E-commerce/socks-ecommerce-platform.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colorful Socks E-commerce Platform</title>
+    <link rel="stylesheet" href="socks-ecommerce-styles.css">
+</head>
+<body>
+    <h1>Colorful Socks E-commerce Platform</h1>
+    <div id="products"></div>
+    <div id="cart"></div>
+    <button id="checkout">Checkout</button>
+
+    <script>
+        const products = [
+            { id: 1, name: 'Red Socks', price: 9.99, image: 'images/red-socks.jpg' },
+            { id: 2, name: 'Blue Socks', price: 9.99, image: 'images/blue-socks.jpg' },
+            { id: 3, name: 'Green Socks', price: 9.99, image: 'images/green-socks.jpg' }
+        ];
+
+        let cart = [];
+
+        function displayProducts() {
+            const productsDiv = document.getElementById('products');
+            productsDiv.innerHTML = products.map(product => `
+                <div class="product">
+                    <img src="${product.image}" alt="${product.name}">
+                    <h3>${product.name}</h3>
+                    <p>Price: $${product.price}</p>
+                    <button onclick="addToCart(${product.id})">Add to Cart</button>
+                </div>
+            `).join('');
+        }
+
+        function addToCart(productId) {
+            const product = products.find(p => p.id === productId);
+            cart.push(product);
+            updateCart();
+        }
+
+        function updateCart() {
+            const cartDiv = document.getElementById('cart');
+            cartDiv.innerHTML = `
+                <h2>Shopping Cart</h2>
+                ${cart.map(item => `<p>${item.name} - $${item.price}</p>`).join('')}
+                <p><strong>Total: $${cart.reduce((sum, item) => sum + item.price, 0).toFixed(2)}</strong></p>
+            `;
+        }
+
+        function checkout() {
+            if (cart.length === 0) {
+                alert('Your cart is empty!');
+            } else {
+                const total = cart.reduce((sum, item) => sum + item.price, 0).toFixed(2);
+                alert(`Thank you for your purchase! Total: $${total}`);
+                cart = [];
+                updateCart();
+            }
+        }
+
+        displayProducts();
+        document.getElementById('checkout').addEventListener('click', checkout);
+    </script>
+</body>
+</html>
diff --git a/E-commerce/socks-ecommerce-styles.css b/E-commerce/socks-ecommerce-styles.css
new file mode 100644
index 00000000..2c4c2736
--- /dev/null
+++ b/E-commerce/socks-ecommerce-styles.css
@@ -0,0 +1,88 @@
+body { 
+    font-family: Arial, sans-serif; 
+    max-width: 1000px; 
+    margin: 0 auto; 
+    padding: 20px; 
+    background-color: #f0f0f0;
+}
+
+h1 { 
+    color: #333; 
+    text-align: center;
+}
+
+/* Grid system for products */
+#products {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Responsive grid */
+    gap: 20px; /* Space between grid items */
+}
+
+.product { 
+    border: 1px solid #ddd; 
+    padding: 20px; 
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Increased shadow for more emphasis */
+    text-align: center; /* Center content */
+    transition: transform 0.2s; /* Smooth animation */
+}
+
+.product:hover {
+    transform: translateY(-5px); /* Slight hover effect */
+}
+
+.product img {
+    width: 100%; /* Make image take full width of container */
+    max-width: 200px; /* Constrain the image size */
+    height: 200px; /* Set height to match the width */
+    object-fit: cover; /* Maintain aspect ratio */
+    margin-bottom: 10px;
+}
+
+.product h3 {
+    color: #2c3e50;
+}
+
+.product p {
+    color: #34495e;
+}
+
+.product button {
+    background-color: #3498db;
+    color: white;
+    border: none;
+    padding: 10px 15px;
+    cursor: pointer;
+    border-radius: 4px;
+}
+
+.product button:hover {
+    background-color: #2980b9;
+}
+
+/* Styling for cart and checkout */
+#cart { 
+    margin-top: 20px; 
+    background-color: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+#checkout {
+    display: block;
+    width: 100%;
+    padding: 15px;
+    background-color: #2ecc71;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 18px;
+    margin-top: 20px;
+}
+
+#checkout:hover {
+    background-color: #27ae60;
+}
diff --git a/E-commerce/styles.css b/E-commerce/styles.css
deleted file mode 100644
index fa353dd7..00000000
--- a/E-commerce/styles.css
+++ /dev/null
@@ -1,112 +0,0 @@
-/* General Styles */
-body {
-    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    background-color: #f6f6f6;
-}
-
-header {
-    background-color: #866c9c;
-    color: #fff;
-    text-align: center;
-    padding: 20px;
-    font-size: 24px;
-}
-
-header p {
-    font-size: 18px;
-}
-
-/* Product Listings */
-.product-list {
-    display: flex;
-    justify-content: space-around;
-    flex-wrap: wrap;
-    padding: 20px;
-}
-
-.product {
-    background-color: #fff;
-    border: 1px solid #e2e2e2;
-    border-radius: 5px;
-    padding: 20px;
-    margin: 10px;
-    width: 300px;
-    text-align: center;
-    box-shadow: 0px 0px 10px #888888;
-}
-
-.product img {
-    max-width: 100%;
-    border-radius: 5px;
-}
-
-button.add-to-cart {
-    background-color: #00a86b;
-    color: #fff;
-    border: none;
-    padding: 10px 20px;
-    border-radius: 5px;
-    cursor: pointer;
-    font-size: 16px;
-}
-
-button.add-to-cart:hover {
-    background-color: #007f52;
-}
-
-/* Shopping Cart */
-.cart {
-    background-color: #fff;
-    border: 1px solid #e2e2e2;
-    border-radius: 5px;
-    padding: 20px;
-    margin: 20px;
-    text-align: center;
-    box-shadow: 0px 0px 10px #888888;
-}
-
-.cart h2 {
-    font-size: 24px;
-    margin-bottom: 10px;
-}
-
-#cart-items {
-    list-style-type: none;
-    padding: 0;
-}
-
-#cart-items li {
-    font-size: 16px;
-    margin: 5px 0;
-    display: flex;
-    align-items: center;
-    position: relative;
-}
-
-#cart-total {
-    font-size: 18px;
-    font-weight: bold;
-}
-#cart-items img {
-    max-width: 50px; /* Adjust the desired width */
-    max-height: 50px; /* Adjust the desired height */
-}
-
-#cart-items img {
-    max-width: 50px; /* Adjust the desired width */
-    max-height: 50px; /* Adjust the desired height */
-    position: relative;
-    padding-right: 25px;
-    padding-left: 610px;
-}
-
-#cart-items li button {
-    margin-left: 10px;
-}
-
-footer {
-    background-color: #866c9c;
-    color: #fff;
-    text-align: center;
-    padding: 10px;
-}
\ No newline at end of file