diff --git a/index.html b/index.html
index 566ce56..63840e1 100644
--- a/index.html
+++ b/index.html
@@ -1,19 +1,25 @@
 <!DOCTYPE html>
 <html>
 <head>
+    <!-- The title of the webpage -->
     <title>My Simple Wikipedia</title>
+    <!-- Link to the external CSS file for styling -->
     <link rel="stylesheet" href="style.css"> 
 </head>
 <body>
 
     <div class="container"> 
+        <!-- Main heading of the webpage -->
         <h1>Welcome to My Simple Wikipedia</h1>
 
+        <!-- Introduction paragraph -->
         <p>This is a basic example of a simple Wikipedia-like page. 
             It demonstrates how to structure information using HTML.</p>
 
+        <!-- Subheading for the first article -->
         <h2>Article 1: The History of the Internet</h2>
 
+        <!-- Paragraphs containing information about the history of the Internet -->
         <p>The Internet began as a project funded by the United States Department of Defense 
             in the 1960s. Its initial purpose was to create a decentralized network that could 
             withstand a nuclear attack.</p>
@@ -21,8 +27,10 @@
         <p>Over time, the Internet evolved into the global network we know today, connecting 
             billions of devices and people worldwide.</p>
 
+        <!-- Subheading for the second article -->
         <h2>Article 2: The Life Cycle of a Butterfly</h2>
 
+        <!-- Paragraphs containing information about the life cycle of a butterfly -->
         <p>Butterflies undergo a fascinating transformation known as metamorphosis. 
             It begins with an egg, which hatches into a larva (caterpillar).</p>
 
@@ -31,6 +39,7 @@
             emerging as a beautiful butterfly.</p>
     </div>
 
+    <!-- Link to the external JavaScript file for functionality -->
     <script src="script.js"></script> 
 </body>
 </html>
\ No newline at end of file
diff --git a/script.js b/script.js
index 4799b2d..b75fd82 100644
--- a/script.js
+++ b/script.js
@@ -1,21 +1,26 @@
 window.onload = function() {
+    // Select all paragraphs that immediately follow an h2 element
     const articles = document.querySelectorAll('h2 + p');
 
     articles.forEach(article => {
+        // Set initial opacity of each article to 0 (hidden)
         article.style.opacity = '0';
 
+        // Function to gradually increase the opacity of the article
         const fadeIn = () => {
             let opacity = 0;
             const interval = setInterval(() => {
                 opacity += 0.05;
                 article.style.opacity = opacity;
 
+                // Stop the interval when opacity reaches 1 (fully visible)
                 if (opacity >= 1) {
                     clearInterval(interval);
                 }
             }, 30);
         };
 
+        // Delay the fade-in effect based on the article's index
         setTimeout(fadeIn, 500 * articles.indexOf(article)); 
     });
 };
\ No newline at end of file
diff --git a/style.css b/style.css
index 96600ef..4a18e0e 100644
--- a/style.css
+++ b/style.css
@@ -1,5 +1,5 @@
 body {
-    font-family: sans-serif;
+    font-family: sans-serif; /* Use sans-serif font for the body */
     margin: 0; /* Remove default top and bottom margins */
     padding: 0; /* Remove default top and bottom padding */
     height: 100vh; /* Set body height to 100% of viewport height */
@@ -11,44 +11,44 @@ body {
 }
 
 .container {
-    max-width: 800px;
-    padding: 20px;
-    background-color: #fff;
-    border-radius: 5px;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 0 10px rgba(255, 255, 255, 0.2); 
+    max-width: 800px; /* Set maximum width of the container */
+    padding: 20px; /* Add padding inside the container */
+    background-color: #fff; /* Set background color to white */
+    border-radius: 5px; /* Round the corners of the container */
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 0 10px rgba(255, 255, 255, 0.2); /* Add shadow effects */
 }
 
 h1 {
-    color: #333;
-    text-align: center;
-    margin-bottom: 30px;
-    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); 
+    color: #333; /* Set text color */
+    text-align: center; /* Center align the text */
+    margin-bottom: 30px; /* Add margin below the heading */
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); /* Add subtle text shadow */
 }
 
 h2 {
-    color: #007bff; 
-    margin-top: 40px;
-    border-bottom: 2px solid #007bff; 
-    padding-bottom: 5px; 
+    color: #007bff; /* Set text color */
+    margin-top: 40px; /* Add margin above the heading */
+    border-bottom: 2px solid #007bff; /* Add bottom border */
+    padding-bottom: 5px; /* Add padding below the heading */
 }
 
 h1, h2 {
-    background-image: none; 
-    color: #007bff; 
+    background-image: none; /* Remove background image */
+    color: #007bff; /* Set text color */
 }
 
 p {
-    color: #555;
-    line-height: 1.6;
-    text-indent: 20px;
+    color: #555; /* Set text color */
+    line-height: 1.6; /* Set line height */
+    text-indent: 20px; /* Indent the first line of each paragraph */
 }
 
 a {
-    color: #007bff;
-    text-decoration: none;
+    color: #007bff; /* Set link color */
+    text-decoration: none; /* Remove underline from links */
 }
 
 a:hover {
-    text-decoration: underline;
-    color: #0056b3; 
+    text-decoration: underline; /* Add underline on hover */
+    color: #0056b3; /* Change color on hover */
 }
\ No newline at end of file
