diff --git a/My_First_Website.html b/My_First_Website.html
new file mode 100644
index 000000000..2c69ce127
--- /dev/null
+++ b/My_First_Website.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8"/>
+        <style>
+
+            body {
+              background-color: brown;
+            }
+        
+            h1 {
+              color: white;
+              text-decoration: underline;
+            }
+        
+            h2, h3, p {
+              color: yellow;
+            }
+        
+            p, li {
+              font-size: 24px;
+              font-family: cursive;
+            }
+        
+            .almond {
+              color: white;
+            }
+        
+            .butterfinger {
+              color: orange;
+            }
+        
+            .ferrero {
+              color: gold;
+            }
+        
+            .all {
+              color: blue;
+            }
+        
+          </style>
+          
+        <title>Hello World!</title>
+    </head>
+    <body>
+        <h1> Vaquita Fan Page!</h1>
+        <p>
+            I LOVE VAQUITAS!!! I LOVE VAQUITAS!!! I LOVE VAQUITAS!!! I LOVE VAQUITAS!!! I LOVE VAQUITAS!!!
+        </p>
+        
+        <h2> Reasons I like Vaquitas:</h2>
+
+        <ul>
+            <li>They are small</li>
+            <li> They are cute</li>
+            <li>They are Mammals</li>
+        </ul>
+
+        <img src="https://www.fisheries.noaa.gov/s3//styles/full_width/s3/dam-migration/vaquita.jpg?itok=MtAb1NJL"
+        alt="Cute Vaquitas"
+        />
+
+        <br />
+
+        <a href = "https://vivavaquita.org/wp-content/uploads/2020/04/Vaquita-Brochure-Spanishv3-2017.pdf">Vaquita Information!</a>
+    </body>
+</html>
\ No newline at end of file
diff --git a/chocolate.html b/chocolate.html
new file mode 100644
index 000000000..04ca0db7c
--- /dev/null
+++ b/chocolate.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <style>
+
+        body {
+          background-color: brown;
+        }
+    
+        h1 {
+          color: white;
+          text-decoration: underline;
+        }
+    
+        h2, h3, p {
+          color: yellow;
+        }
+    
+        p, li {
+          font-size: 24px;
+          font-family: 'Lucida Handwriting';
+        }
+    
+        .almond {
+          color: white;
+        }
+    
+        .butterfinger {
+          color: orange;
+        }
+    
+        .ferrero {
+          color: gold;
+        }
+    
+        .all {
+          color: blue;
+        }
+    
+      </style>
+
+    <title>Ode to Chocolate</title>
+</head>
+<body>
+
+<h1>An Ode to Chocolate</h1>
+
+<h2>A Chocolatey Reflection</h2>
+
+<p>I love chocolate soooooo much. If I could, I would eat chocolate every single day, every single hour, every single second. I am so obsessed about chocolate that I dream about it every single night. People tell me I have a problem, but I say, "How can chocolate be a problem? Chocolate IS the ANSWER."</p>
+
+<img src="https://images.unsplash.com/photo-1511381939415-e44015466834?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600" alt="chocolates">
+
+<h2>Favorite Chocolates</h2>
+<ul>
+    <li class="almond">Almond Joy</li>
+    <li class="butterfinger">Butterfinger</li>
+    <li class="ferrero">Ferrero Rocher</li>
+    <li class="all">But I also love all kinds.</li>
+</ul>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index a169a449c..b85a27830 100644
--- a/index.html
+++ b/index.html
@@ -13,21 +13,21 @@
 <body>
     <header class='masthead'>
         <p class='masthead-intro'>Hi I'm</p>
-        <h1 class='masthead-heading'>Your Name Here</h1>
+        <h1 class='masthead-heading'>Giovanni Sosa</h1>
     </header>
     <section class="details">
       <h1>Introduction</h1>
-      <p>Details here...</p>
+      <p>I am an aspiring software developer.</p>
       <h1>Where I'm From</h1>
-      <p>Details here...</p>
+      <p>El Centro, Ca.</p>
       <h1>What are your favorite hobbies?</h1>
-      <p>Details here...</p>
+      <p>Learning languages, playing video games, learning guitar/piano</p>
       <h1>What's your dream job?</h1>
-      <p>Details here...</p>
+      <p>To create my own medical related business.</p>
       <h1>Where do you live?</h1>
-      <p>Details here...</p>
+      <p>Currently living in Heber.</p>
       <h1>Why do you want to be a web developer?</h1>
-      <p>Details here...</p>
+      <p>To demonstrate to myself that I am capable of continuing to learn new technologies and skills that would prepare me for new experiences in the future.</p>
     </section>
 
     <footer id="footer">
diff --git a/javscrpt.html b/javscrpt.html
new file mode 100644
index 000000000..69704112b
--- /dev/null
+++ b/javscrpt.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Jiggle Into JavaScript</title>
+</head>
+<body>
+
+    <p>Press the buttons to move the box!</p>
+
+    <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>
+
+    <button id="shrinkBtn">Shrink</button>
+    <button id="growBtn">Grow</button>
+    <button id="resetBtn">Reset</button>
+
+    <script type="text/javascript">
+
+        document.getElementById("shrinkBtn").addEventListener("click", function(){
+
+            document.getElementById("box").style.height = "25px";
+
+        });
+
+        document.getElementById("growBtn").addEventListener("click", function(){
+
+            document.getElementById("box").style.height = "250px";
+
+        });
+
+        document.getElementById("resetBtn").addEventListener("click", function(){
+
+            document.getElementById("box").style.height = "150px";
+
+        });
+
+    </script>
+
+</body>
+</html>
\ No newline at end of file
