diff --git a/TableContents3.html b/TableContents3.html
new file mode 100644
index 0000000..803bf5c
--- /dev/null
+++ b/TableContents3.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Table of Contents</title>
+</head>
+<body>
+    <div >
+        <h3>Table of Contents</h3>
+    </div>
+    <hr/>
+    <div >
+        <h1>Fruits</h1>
+        <h2>Red Fruits</h2>
+        <h3>Apple</h3>
+        <h3>Raspberry</h3>
+        <h2>Orange Fruits</h2>
+        <h3>Orange</h3>
+        <h3>Tangerine</h3>
+        <h1>Vegetables</h1>
+        <h2>Vegetables Which Are Actually Fruits</h2>
+        <h3>Tomato</h3>
+        <h3>Eggplant</h3>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/TableContentsDOM.html b/TableContentsDOM.html
new file mode 100644
index 0000000..c27ab4a
--- /dev/null
+++ b/TableContentsDOM.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>Table of Contents</title>
+
+    <!-- <script> -->
+        <!-- function myFunction() { -->
+          <!-- document.getElementById("tableofcontents").innerHTML = "Table of Contents."; -->
+        <!-- } -->
+        <!-- </script> -->
+</head>
+
+<body>
+    <!-- <div > -->
+        <h1>Table of Contents</h1>
+   <!-- </div> -->
+    <!-- <hr/> -->
+    <!-- <div > -->
+        <!-- <h1>Fruits</h1> -->
+        <!-- <h2>Red Fruits</h2> -->
+        <!-- <h3>Apple</h3> -->
+        <!-- <h3>Raspberry</h3> -->
+        <!-- <h2>Orange Fruits</h2> -->
+        <!-- <h3>Orange</h3> -->
+        <!-- <h3>Tangerine</h3> -->
+        <!-- <h1>Vegetables</h1> -->
+        <!-- <h2>Vegetables Which Are Actually Fruits</h2> -->
+        <!-- <h3>Tomato</h3> -->
+        <!-- <h3>Eggplant</h3> -->
+    <!-- </div> -->
+
+    <ul id="Red Fruits">
+        <h2>Red Fruits</h2>
+        <li>Apple</li>
+        <li>Raspberry</li>
+    <ul id="Orange Fruits"> 
+        <h2>Orange Fruits</h2>
+        <li>Orange</li>
+        <li>Tangerine</li>
+    <ul id="Vegetables"> 
+        <h1>Vegetables</h1>
+        <p>Vegetables Which Are Actually Fruits</p>
+        <li>Tomato</li>
+        <!-- <li>Eggplant></li> -->
+      </ul>
+      <br>
+      <p>Click the button to append an item to the end of the list.</p>
+      <br>
+      <button onclick="myFunction()">Try it</button>
+      
+      <script>
+      function myFunction() {
+        var node = document.createElement("LI");
+        var textnode = document.createTextNode("Eggplant");
+        
+        node.appendChild(textnode);
+        document.getElementById("Red Fruits").appendChild(node);
+      }
+      </script>
+      
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/about.html b/about.html
new file mode 100644
index 0000000..f5aa145
--- /dev/null
+++ b/about.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>About me</title>
+</head>
+         <h1>About me</h1>
+<body>
+
+    <img src="image/myself.jpg.jpg" alt ="My Photo" width="250" height="250">
+
+    <ul class ="about-me">
+        <li>Nickname: <span id="nickname"></span>coopcool</li>
+        <li>Favorites: <span id="favorites"></span>House music, Italian food, Seinfeld</li>
+        <li>Hometown: <span id="hometown"></span>Brooklyn, New York</li>
+        <li>Random Fact: <span id="random-fact"></span>I like new sports cars.</li>
+    </ul>
+
+    <button type="button" onclick="myFunction(li)">Set font</button>
+
+    <script>
+        function myFunction() {
+            document.getElementById("nickname").style.fontFamily = "Arial,sans-serif";
+            document.getElementById("favorites").style.fontFamily = "Arial,sans-serif";
+            document.getElementById("hometown").style.fontFamily = "Arial,sans-serif";
+            document.getElementById("random-fact").style.fontFamily = "Arial,sans-serif";
+}
+        </script>
+        
+
+</body>
+    <script src="main.js"></script>
+
+</html>
\ No newline at end of file
diff --git a/image/myself.jpg.jpg b/image/myself.jpg.jpg
new file mode 100644
index 0000000..db949f5
Binary files /dev/null and b/image/myself.jpg.jpg differ
diff --git a/js-dom.html b/js-dom.html
new file mode 100644
index 0000000..1dd6f4a
--- /dev/null
+++ b/js-dom.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>Document</title>
+</head>
+<body>
+  <p id="myP">We are coders</h2>
+  <p id="myP2">Developers for life!</p>
+  
+  <br>
+  
+  <button type="button" onclick="myFunction()">Set text color</button>
+  
+  <script>
+  function myFunction() {
+    document.getElementById("myP").style.color = "blue";
+    document.getElementById("myP2").style.color = "orange";
+    
+  }
+  </script>
+  
+    
+</body>
+
+</html>
+
+    -
\ No newline at end of file
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..24d5222
--- /dev/null
+++ b/main.js
@@ -0,0 +1,8 @@
+
+        function myFunction() {
+          document.getElementById("nickname").style.fontFamily=Arial;
+          document.getElementById("favorites").style.fontFamily;
+          document.getElementById("hometown").style.fontFamily;
+          document.getElementById("random-fact").style.fontFamily;
+        }
+   
\ No newline at end of file
