diff --git a/README.md b/README.md
new file mode 100644
index 0000000000000..1729ea1943605
--- /dev/null
+++ b/README.md
@@ -0,0 +1,48 @@
+🛠️ How to Use
+Download the code
+Save the provided HTML code as studyplanner.html.
+
+Open in a browser
+Double-click the file or open it with Chrome, Firefox, or Edge.
+
+Add tasks
+
+Enter your study task in the input box.
+
+Click Add.
+
+Mark tasks as completed
+
+Click on a task to mark it done or undone.
+
+Check your progress
+
+The progress percentage updates automatically.
+
+
+
+🎨 Technologies Used
+HTML5 – Structure of the website.
+
+CSS3 – Styling and responsive layout.
+
+JavaScript – Task functionality, progress calculation, and localStorage.
+
+
+
+🚀 Future Improvements
+Add delete button for tasks.
+
+Add categories/subjects for better organization.
+
+Add dark mode toggle.
+
+Add reminder notifications for tasks.
+
+
+
+📌 Notes
+This website works completely offline.
+
+Your tasks are saved only in the browser you use. Clearing browser data will delete all tasks.
+
diff --git a/index.html b/index.html
new file mode 100644
index 0000000000000..4f5df54f6a2b1
--- /dev/null
+++ b/index.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>The study planner</title>
+  <style>
+    body {
+      font-family: Arial;
+      background: linear-gradient(to right, #4facfe, #00f2fe);
+      text-align: center;
+      color: white;
+    }
+    h1 {
+      margin-top: 20px;
+    }
+    .container {
+      background: white;
+      color: black;
+      width: 90%;
+      max-width: 400px;
+      margin: auto;
+      padding: 20px;
+      border-radius: 10px;
+    }
+    input {
+      width: 70%;
+      padding: 8px;
+      margin: 5px;
+    }
+    button {
+      padding: 8px 12px;
+      background: #4facfe;
+      border: none;
+      color: white;
+      cursor: pointer;
+      border-radius: 5px;
+    }
+    li {
+      list-style: none;
+      padding: 8px;
+      margin: 5px;
+      background: #f1f1f1;
+      border-radius: 5px;
+      cursor: pointer;
+    }
+    .completed {
+      text-decoration: line-through;
+      background: lightgreen;
+    }
+    .progress {
+      margin-top: 15px;
+      font-weight: bold;
+    }
+  </style>
+                                                            </head>
+
+                                                            <body>
+
+                                                            <h1>📚 Smart Study Planner</h1>
+                                        <div class="container">
+                                                    <input type="text" id="taskInput" placeholder="Enter your task">
+                                                        <button onclick="addTask()">Add</button>
+                                                <ul id="taskList"></ul>
+
+                                                    <div class="progress" id="progressText">
+                                                            Progress: 0%
+                                                                </div>
+                                                                </div>
+                                                <script>
+                                                            let tasks = JSON.parse(localStorage.getItem("tasks")) || [];
+                                                            function saveTasks() {
+                                                                        localStorage.setItem("tasks", JSON.stringify(tasks));
+                                                                            }
+                                                            function renderTasks() {
+                                                                        const list = document.getElementById("taskList");
+                                                                                list.innerHTML = "";
+
+                                                                                        let completed = 0;
+                                                            tasks.forEach((task, index) => {
+                                                                            const li = document.createElement("li");
+                                                                                        li.textContent = task.name;
+                                                            if (task.done) {
+                                                                                li.classList.add("completed");
+                                                                                                completed++;
+                                                            }
+                                                                                                         li.onclick = () => {
+                                                                                                                                                    tasks[index].done = !tasks[index].done;
+                                                                                                                                                saveTasks();
+                                                                                                                                                                renderTasks();
+                                                                                                                                                                            };
+                                                                                                                                                                            list.appendChild(li);
+                                                            });
+
+                                                                                                                                                let percent = tasks.length === 0 ? 0 :
+                                                                                                                                                            Math.round((completed / tasks.length) * 100);
+                                                                                                                                                            document.getElementById("progressText").textContent =
+                                                                                                                                                            "Progress: " + percent +"%" ;
+                                                                                                                                                                            }
+
+                                                                                                                                                                            function addTask() {
+                                                                                                                                                                                  const input = document.getElementById("taskInput");
+                                                                                                                                                                                  const name = input.value.trim();
+                                                                                                                                                                                  if (!name) return;
+                                                                                                                                                                                  tasks.push({ name: name, done: false });
+                                                                                                                                                                                  saveTasks();
+                                                                                                                                                                                  input.value = "";
+                                                                                                                                                                                  renderTasks();
+                                                                                                                                                                            }
+
+                                                                                                                                                                            // initialize
+                                                                                                                                                                            renderTasks();
+                                                                                                                                                                          </script>
+
+                                                                                                                                                                                                                          </body>
+                                                                                                                                                                                                                          </html>
diff --git a/study.html b/study.html
new file mode 100644
index 0000000000000..8fd4ed98bfaa0
--- /dev/null
+++ b/study.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>The study planner</title>
+  <style>
+    body {
+      font-family: Arial;
+      background: linear-gradient(to right, #4facfe, #00f2fe);
+      text-align: center;
+      color: white;
+    }
+    h1 {
+      margin-top: 20px;
+    }
+    .container {
+      background: white;
+      color: black;
+      width: 90%;
+      max-width: 400px;
+      margin: auto;
+      padding: 20px;
+      border-radius: 10px;
+    }
+    input {
+      width: 70%;
+      padding: 8px;
+      margin: 5px;
+    }
+    button {
+      padding: 8px 12px;
+      background: #4facfe;
+      border: none;
+      color: white;
+      cursor: pointer;
+      border-radius: 5px;
+    }
+    li {
+      list-style: none;
+      padding: 8px;
+      margin: 5px;
+      background: #f1f1f1;
+      border-radius: 5px;
+      cursor: pointer;
+    }
+    .completed {
+      text-decoration: line-through;
+      background: lightgreen;
+    }
+    .progress {
+      margin-top: 15px;
+      font-weight: bold;
+    }
+  </style>
+                                                            </head>
+
+                                                            <body>
+
+                                                            <h1>📚 Smart Study Planner</h1>
+                                        <div class="container">
+                                                    <input type="text" id="taskInput" placeholder="Enter your task">
+                                                        <button onclick="addTask()">Add</button>
+                                                <ul id="taskList"></ul>
+
+                                                    <div class="progress" id="progressText">
+                                                            Progress: 0%
+                                                                </div>
+                                                                </div>
+                                                <script>
+                                                            let tasks = JSON.parse(localStorage.getItem("tasks")) || [];
+                                                            function saveTasks() {
+                                                                        localStorage.setItem("tasks", JSON.stringify(tasks));
+                                                                            }
+                                                            function renderTasks() {
+                                                                        const list = document.getElementById("taskList");
+                                                                                list.innerHTML = "";
+
+                                                                                        let completed = 0;
+                                                            tasks.forEach((task, index) => {
+                                                                            const li = document.createElement("li");
+                                                                                        li.textContent = task.name;
+                                                            if (task.done) {
+                                                                                li.classList.add("completed");
+                                                                                                completed++;
+                                                            }
+                                                                                                         li.onclick = () => {
+                                                                                                                                                    tasks[index].done = !tasks[index].done;
+                                                                                                                                                saveTasks();
+                                                                                                                                                                renderTasks();
+                                                                                                                                                                            };
+                                                                                                                                                                            list.appendChild(li);
+                                                            });
+
+                                                                                                                                                let percent = tasks.length === 0 ? 0 :
+                                                                                                                                                            Math.round((completed / tasks.length) * 100);
+                                                                                                                                                            document.getElementById("progressText").textContent =
+                                                                                                                                                            "Progress: " + percent +"%" ;
+                                                                                                                                                                            }
+
+                                                                                                                                                                            function addTask() {
+                                                                                                                                                                                  const input = document.getElementById("taskInput");
+                                                                                                                                                                                  const name = input.value.trim();
+                                                                                                                                                                                  if (!name) return;
+                                                                                                                                                                                  tasks.push({ name: name, done: false });
+                                                                                                                                                                                  saveTasks();
+                                                                                                                                                                                  input.value = "";
+                                                                                                                                                                                  renderTasks();
+                                                                                                                                                                            }
+
+                                                                                                                                                                            // initialize
+                                                                                                                                                                            renderTasks();
+                                                                                                                                                                          </script>
+
+                                                                                                                                                                                                                          </body>
+                                                                                                                                                                                                                          </html>                                                                                                  
+                                                                                                                                                                                                                                                                                                                            
+                                                                                                                                                                
+                                                                        
+                                                            
+
+
+                                                        
\ No newline at end of file
