diff --git a/index.md b/index.md
index 2a17e84..2c8df60 100644
--- a/index.md
+++ b/index.md
@@ -6,29 +6,6 @@ permalink: /
 ---
 
 # TritonHacks Web Development <br> Starter Kit
-The following are the different callouts you can use. Reference the source code to use them.
-
-{: .important}
-If you are more comfortable with the dark theme, press the top right icon to switch. 
-
-{: .warning}
-text holder
-
-{: .hint}
-text holder
-
-{: .note}
-text holder
-
-{: .tip}
-text holder
-
-{: .caution}
-text holder
-
-{: .attention}
-text holder
-
 Welcome to Triton Hacks - your gateway to coding and tech exploration! This is the starter kit for those who want to learn about web development and how we can create websites!
 
 Get set for an exciting journey through some awesome modules that'll show you everything about the internet, how websites operate, and how they're built. We'll first explain web development, the different areas of it, and then go into the nitty gritty of creating one. 
diff --git a/source/Example/Example.md b/source/Example/Example.md
index 5c732f3..081fa3e 100644
--- a/source/Example/Example.md
+++ b/source/Example/Example.md
@@ -7,7 +7,7 @@ has_toc: false
 has_children: true
 ---
 
-# Designing our Website
+# Creating our Website
 {: .no_toc }
 
 ## Table of contents
@@ -18,6 +18,7 @@ has_children: true
 
 ---
 
+We've given you a high-level course of web development as well as a tutorial on each topic. Most of the technologies described won't be used in this web starter kit but were explained so that if you're interested, you could endeavor in it. For example, we highly recommend creating a minimal, low intense website.
 
 [Previous: RESTful](Backend/RESTful){: .float-left .v-align-text-top}
 [Next: Getting Started](Example/Getting Started){: .float-right .v-align-text-top}
diff --git a/source/Tutorials/Getting Started.md b/source/Tutorials/Getting Started.md
index 114edef..475222a 100644
--- a/source/Tutorials/Getting Started.md	
+++ b/source/Tutorials/Getting Started.md	
@@ -28,13 +28,14 @@ Once it is installed, it will look like this.
 ![Visual Studio Code Welcome Page](../source/assets/images/vsc_welcome_page.png)
 
 Head over to the [Python Website](https://www.python.org/downloads/) and download the latest version.
-Once you get this pop up, make sure to check the second box.
+Once you get this pop up, make sure to check the second box of `Add python.exe to PATH`
 
 ![Python Install](../source/assets/images/python_install.png)
 
-After you've installed Python, you have to set your interpreter so that it uses the installed Python. To do so, press ``` CTRL + SHIFT + P ``` inside of your visual studio code and type Python: Select Interpreter and press enter. You should see an option to select the interpreter you just installed.
+After you've installed Python, you have to set your interpreter so that it uses the installed Python. To do so, press ``` CTRL + SHIFT + P ``` inside of your visual studio code and type Python: Select Interpreter and press enter. You should see an option to select the interpreter you just installed. Don't worry about the other options, you should only see one.
+
+![Python Interpreter](../source/assets/images/interpreter.png)
 
-![Python Interpreter](add image here later)
 
 You've just finished setting up your environment!
 ## Dependencies
diff --git a/source/Tutorials/HTML_CSS_JS.md b/source/Tutorials/HTML_CSS_JS.md
index 884aa40..2eb6bb8 100644
--- a/source/Tutorials/HTML_CSS_JS.md
+++ b/source/Tutorials/HTML_CSS_JS.md
@@ -15,12 +15,6 @@ has_toc: true
 1. TOC
 {:toc}
 
-{: .note }
-
-## Introduction
-
-Welcome to the world of Web development! Whats the website you visit the most? What browser do you use to surf with? Have you ever wondered all these websites are made, or wanted to create your own? Despite all the different content and design you see in the web, webpages are primarily be broken down to three major components, namingly HTML ("Hypertext Markup Language"), CSS ("Cascading Style Sheets") and JS ("JavaScript"). Ultimately, these are all texts that are translated to tell the computer how to structure (HTML), style (CSS), and define and implement functionality (JS). We use these three separate technologies to add each component to the website and work very closely. Whether you are builing a simple personal webpage about yourself, or a complicated web application, you will need the same three core languages.
-
 ### HTML
 If we imagine the web as a house, HTML lays the foundation and blueprint of the house. Essentially its just text It consists of "tags" enclosed in angle brackets, like ``<tag>``. Tags define structure and content. There are so many different types of tags, from defining lines and headings, links, forms, images and videos down to a simple text as the ones you are reading right now. These tags create a layout of the webpage.
 
@@ -28,32 +22,7 @@ If we imagine the web as a house, HTML lays the foundation and blueprint of the
 - **Content Elements**: HTML offers various elements for content like headings (`<h1>` to `<h6>`), paragraphs (`<p>`), lists (`<ul>`, `<ol>`, `<li>`), links (`<a>`), images (`<img>`), and more.
 - **Semantic HTML**: Semantic HTML elements convey meaning, aiding accessibility and SEO.
 
-### CSS
-Every house has an architecture style, or a color scheme. All the rooms would follow that scheme according to the what the house should look like. Wouldn't it be nice to define that in once place? If we have the scheme defined in some place, all the pages we create with HTML would have that style without  specifying them repeteadly. This is where CSS comes in. It adds colors, fonts, spacing and styles of the elements used in HTML.
-
-- **Selectors**: CSS selectors target HTML elements for styling. They can be simple (like element selectors), class-based (using `.class`), or ID-based (using `#id`).
-- **Box Model**: CSS box model comprises content, padding, border, and margin, influencing element layout.
-- **Styling Properties**: CSS properties like `color`, `font-size`, `background`, `margin`, and `padding` offer control over appearance.
-- **Selectors Specificity**: Specificity determines which styles apply when multiple rules target the same element.
-
-### JavaScript
-Now that we've created a structure and style, we would want functionality and interaction. If we turn on the switch, what parts of the rooms will light up? Do you want your house to have automatic temperature adjusting to which part of the room you are in? JavaScript is the "code" of the webpage that defines and adds that functionality and behavior. It responds to the inputs and actions user gives, and creates outputs.
-
-- **Basic Syntax**: JavaScript syntax includes variables, data types, operators, functions, and control structures like `if` statements and loops.
-- **DOM Manipulation**: JavaScript interacts with the DOM (Document Object Model), enabling dynamic content updates and element manipulation.
-- **Event Handling**: JavaScript responds to user interactions like clicks and keystrokes, triggering actions or behavior changes.
-- **Asynchronous Operations**: JavaScript handles asynchronous tasks like fetching data from servers or APIs using promises or async/await.
-
-
-
-
-
-
-
-
-> By [Victor Hsiao](https://www.linkedin.com/in/hsiaovictor/) 
-
-### **The `<head>` tag**
+#### **The `<head>` tag**
 
 The head tag represents the set up for our HTML page
 
@@ -65,7 +34,7 @@ We use the `<link>` tag for when we want to link a CSS stylesheet to our page, f
 
 We will outline the multiple components that every HTML website has:
 
-### **The header tags**
+#### **The header tags**
 
 Header tags represent the titles of our HTML
 
@@ -77,7 +46,7 @@ To use a header tag, you would do:
 
 ![](https://th.bing.com/th/id/R.f31151c9930cad0b53977ddf32d16c4d?rik=RvEoDf4v8g7cUA&riu=http%3a%2f%2fictacademy.com.ng%2fwp-content%2fuploads%2f2017%2f10%2fHeading-Tag-Hierarchy.jpg&ehk=38aWjqrzDxhB1GMnv1P4RIyBArTDY3czYf0xm8uapJw%3d&risl=&pid=ImgRaw&r=0)
 
-### **The `<p>` tag**
+#### **The `<p>` tag**
 
 The `<p>` tag is used for big blocks of text, or paragraphs. We use it when we want to include big blocks of text on our website, like for a blog or article
 
@@ -85,7 +54,7 @@ The `<p>` tag is used for big blocks of text, or paragraphs. We use it when we w
 
 ![p tag](https://blog.hubspot.com/hs-fs/hubfs/Google%20Drive%20Integration/Using%20the%20%3Cp%3E%20Tag%20in%20HTML-1.png?width=657&name=Using%20the%20%3Cp%3E%20Tag%20in%20HTML-1.png)
 
-### **The `<a>` tag**
+#### **The `<a>` tag**
 
 The `<a>` tag is a tag is used to link other webpages or websites. 
 
@@ -95,14 +64,14 @@ To use an `<a>` tag, you have to specify the href attribute, which is the url th
 
 In between the opening and closing `<a>` tags, you insert some text that serves as the link. The default blue color text with the underline shows that the text is a link.
 
-### **The list tags**
+#### **The list tags**
 
 There are two types of lists in HTML:
 
 1. ordered lists
 2. unordered lists
 
-### **Ordered Lists**
+#### **Ordered Lists**
 
 To specify an unordered lists, you use the `<ol>` tag.
 
@@ -112,7 +81,7 @@ With ordered lists, your list items would be in a certain order, going from 1, 2
 
 Same as ordered lists, to add items to your unordered list you use the `<li>` tag.
 
-### **Unordered Lists**
+#### **Unordered Lists**
 
 To specify an unordered lists, you use the `<ul>` tag.
 
@@ -124,7 +93,7 @@ Unordered lists would look like this:
 
 ![unordered list](https://th.bing.com/th/id/OIP.HfkBXgQPgATQswMMF43-bwHaEJ?rs=1&pid=ImgDetMain)
 
-### **The `<img>` tag**
+#### **The `<img>` tag**
 
 The `<img>` tag is used to add images to our website.
 
@@ -134,11 +103,21 @@ Unlike the other tags, the image tag does not have a self-closing tag, so instea
 
 ![](https://www.codewithfaraz.com/img/image%20tag%20in%20html%20how%20to%20add%20images%20in%20html%20-%20a%20beginners%20guide.jpg)
 
-## CSS
+For more HTML tags, visit the link below:
+
+[More HTML Tags](https://www.w3schools.com/tags/)
+
+### CSS
+Every house has an architecture style, or a color scheme. All the rooms would follow that scheme according to the what the house should look like. Wouldn't it be nice to define that in once place? If we have the scheme defined in some place, all the pages we create with HTML would have that style without  specifying them repeteadly. This is where CSS comes in. It adds colors, fonts, spacing and styles of the elements used in HTML.
+
+- **Selectors**: CSS selectors target HTML elements for styling. They can be simple (like element selectors), class-based (using `.class`), or ID-based (using `#id`).
+- **Box Model**: CSS box model comprises content, padding, border, and margin, influencing element layout.
+- **Styling Properties**: CSS properties like `color`, `font-size`, `background`, `margin`, and `padding` offer control over appearance.
+- **Selectors Specificity**: Specificity determines which styles apply when multiple rules target the same element.
 
 When we want to add CSS styling to any of our HTML elements, to select the specific HTML elements we want to style, there are a few different type of CSS selectors we can use
 
-### **Element Selectors**
+#### **Element Selectors**
 
 Element selectors are the most basic type of CSS selector. To use an element selector, we just get the tag that we want to apply our CSS to
 
@@ -154,7 +133,7 @@ h1 {
 }
 ```
 
-### **ID Selectors**
+#### **ID Selectors**
 
 You would use id selectors if you only want to apply CSS styling to one HTML element
 
@@ -172,7 +151,7 @@ And in your CSS, you would use the `#` tag to select the element with a certain
 
 Only one element can have a certain id, you cannot have two elements with the same id
 
-### **Class Selectors**
+#### **Class Selectors**
 
 Class selectors allow you to apply the same style attributes to multiple elements
 
@@ -197,7 +176,7 @@ To add style attributes to a class, we use the `.` tag instead
 }
 ```
 
-### **Basic Style Attributes**
+#### **Basic Style Attributes**
 
 There are many different types of style attributes, but we'll lay out some basic ones.
 
@@ -227,9 +206,60 @@ For a full list of CSS properties, visit the link below:
 
 [All CSS properties](https://www.dofactory.com/css/properties)
 
-## JavaScript
+### JavaScript
+Now that we've created a structure and style, we would want functionality and interaction. If we turn on the switch, what parts of the rooms will light up? Do you want your house to have automatic temperature adjusting to which part of the room you are in? JavaScript is the "code" of the webpage that defines and adds that functionality and behavior. It responds to the inputs and actions user gives, and creates outputs.
+
+- **Basic Syntax**: JavaScript syntax includes variables, data types, operators, functions, and control structures like `if` statements and loops.
+- **DOM Manipulation**: JavaScript interacts with the DOM (Document Object Model), enabling dynamic content updates and element manipulation.
+- **Event Handling**: JavaScript responds to user interactions like clicks and keystrokes, triggering actions or behavior changes.
+- **Asynchronous Operations**: JavaScript handles asynchronous tasks like fetching data from servers or APIs using promises or async/await.
+
+#### **Variables and Data Types**
+
+JavaScript allows you to store and manipulate data in variables. It supports several data types including strings, numbers, booleans, objects, and arrays.
+
+```javascript
+var name = "Anthony"; // String
+var age = 30; // Number
+var isDeveloper = true; // Boolean
+```
+
+#### **Operators**
+
+| Type          | Operators        | Description                         |
+|---------------|------------------|-------------------------------------|
+| Arithmetic    | `+`, `-`, `*`, `/` | Used to perform basic mathematical operations such as addition, subtraction, multiplication, and division. |
+| Logical       | `&&`, `||`, `!`   | Used to perform logical operations. `&&` is logical AND, `||` is logical OR, and `!` is logical NOT. |
+| Comparison    | `==`, `!=`, `===`, `!==` | Used to compare two values. `==` and `!=` check for equality and inequality without type coercion, whereas `===` and `!==` check for equality and inequality with type coercion. |
+
+#### **Functions**
+Functions are reusable blocks of code that perform a specific task. They can be called as needed, accept parameters, and return results.
 
+```javascript
+function greet(name) {
+    return "Hello, " + name + "!";
+}
+console.log(greet("Anthony"));  // Outputs: Hello, Anthony!
+```
 
+#### **Event Handling**
+You can make things happen when buttons are clicked:
+
+```javascript
+<button id="clickMe">Click me!</button>
+<script>
+    document.getElementById('clickMe').addEventListener('click', function() {
+        alert('Thanks for clicking!');
+    });
+</script>
+```
+
+#### **DOM Manipulation**
+You can modify the content without needing to reload the page. 
+
+```javascript
+document.getElementById('welcome').textContent = 'Welcome to our website!';
+```
 
 _______________________________________________________________
 
diff --git a/source/Tutorials/Python.md b/source/Tutorials/Python.md
index 97c5e30..3f9abaf 100644
--- a/source/Tutorials/Python.md
+++ b/source/Tutorials/Python.md
@@ -17,12 +17,10 @@ has_toc: false
 {:toc}
 
 ---
-
-## What is Python?
-
+### Python
 Python is a popular high-level programming language that is used in various fields such as web development, data science, and software engineering. Python is known for its readability, simplicity, and versatility.
 
-## Print Statements
+#### **Print Statements**
 
 In python and like many programming languages, they have print statements. These are what you can use to make the program display an output to the computer screen when you are programming.
 
@@ -38,7 +36,7 @@ Hello World
 
 --- 
 
-### Comments
+#### **Comments**
 {: .no_toc }
 
 In python there are these things called comments. Comments are like notes or reminders that we write in our code to help us understand it better. 
@@ -60,7 +58,7 @@ Hello World
 As we can see comments dont effect the code in any way and they are just there for you as the programmer to see. 
 
 
-## Variables and Data Types
+#### **Variables and Data Types**
 
 Variables in Python are like containers that hold information. Imagine a box with a label on it. You can put different things in the box, and the label helps you remember what's inside. Similarly, a variable has a name (like the label) and can store different types of information, such as numbers, words, or true/false values.
 
@@ -156,9 +154,9 @@ Output:
 ```
 
 
-## Operators
+#### **Operators**
 
-### Mathematical Operators
+##### **Mathematical Operators**
 
 In Python there are arithmetic operators that are used to perform basic mathematical operations like addition, subtraction, multiplication, and division.
 
@@ -268,7 +266,7 @@ Output:
 ```
 
 
-### Comparison Operators
+##### **Comparison Operators**
 
 In Python Comparison operators compare values. It either returns True or False according to the condition.
 
@@ -315,7 +313,7 @@ True
 False
 
 ```
-### Logical Opersators
+##### **Logical Opersators**
 
 Logical operators in Python are like tools we use to make decisions in our programs. Just like how you might use the words 'and', 'or', and 'not' to combine ideas or conditions when you're making a decision in real life, logical operators in Python help us combine conditions and make decisions in our code.
 
@@ -350,7 +348,7 @@ False
 True
 ```
 
-### Identity And Membership Operators
+##### **Identity And Membership Operators**
 
 Identity operators in Python are like tools we use to check if two things are the same or different. Just like how you might compare two things in real life to see if they are identical or not.
 
@@ -422,7 +420,7 @@ True
 ```
 This prints True because the text "<mark>how</mark>" is found inside of the text "hello <mark>how</mark> are you".
 
-## if and else Statements
+#### **if and else Statements**
 
 If statements in Python are like decision-making tools that help our programs make choices based on certain conditions. It is used to decide whether certain code will be executed or not.
 
@@ -445,7 +443,7 @@ The number 5 is positive
 ```
 What happend was that since the number 5 was greater than zero, it printed "The number 5 is positive" and if it wasnt then nothing would be printed since the condition would be false in that situation. We also used type conversion ```str(number)``` because we cannot add an integer and a string together so we had to convert the integer of 5 into a string so there wouldn't be an error. 
 
-### Else Statements 
+#### **Else Statements** 
 {: .no_toc }
 
 In Python Else statements are like a backup plan that gets executed when the conditions specified in the if statement are not met. 
@@ -477,7 +475,7 @@ Output
 ```
 Your age is under 18 so you are not an adult
 ```
-### Else If Statements
+#### **Else If Statements**
 
 In Python there are also else if or elif  statements that act similar to else statements but you use them when you want to check another condition.
 
@@ -503,7 +501,7 @@ Output
 You have a B
 ```
 
-## Lists
+#### **Lists**
 
 In Python lists are a data structure that we use to store multiple items is a singular variable. They can also contain elements of different data types. Lists can easily be modiefied and its data can easily be accessed. 
 
@@ -589,7 +587,7 @@ Output:
 3
 ```
 
-## Loops 
+#### **Loops** 
 
 We can use loops for when we want to execute code repeatedly until a specific condition is met. In Python there are two main loops which are the for and while loops. The while loop is used when you want to ececute code until a specific condition is true and the for loop is when you know how many times you want the code to execute. 
 
@@ -646,7 +644,7 @@ Output:
 ```
 
 
-## Functions
+#### **Functions**
 
 In Python we can use funnctions which is a block of organized, reusable code that performs a specific task.
 Functions provide a way to modularize your code, making it easier to read, write, and maintain. In Python, you define a function using the def keyword followed by the function name, parentheses ( ) containing optional parameters, and a colon :. The body of the function is indented and contains the code to be executed when the function is called. 
diff --git a/source/Web Development Concepts.md b/source/Web Development Concepts.md
index 587176c..e81ec41 100644
--- a/source/Web Development Concepts.md	
+++ b/source/Web Development Concepts.md	
@@ -45,7 +45,7 @@ The design team are like the architects who draw the creative blueprints for the
 The frontend team is similar to the construction workers who build the visible parts of the house that people see and interact with—like the walls, doors, and windows. In web development, the frontend team uses special programming languages like HTML, CSS, and JavaScript to create what you see on a website. They make sure the website looks great on your computer or phone, just like how builders make sure the house looks amazing from the outside.
 
 ### 🔧 The Backend Team
-Now, the backend team is like the engineers and the house's hidden systems—things you might not see, like the electricity and plumbing. In web development, the backend team works on the website's power system, the databases, and other technical stuff. They make sure everything works smoothly behind the scenes, so when you click a button, the right information shows up, just like when you turn on a light switch, the light comes on without you seeing all the wiring.
+Now, the backend team are like the engineers and the house's hidden systems—things you might not see, like the electricity and plumbing. In web development, the backend team works on the website's power system, the databases, and other technical stuff. They make sure everything works smoothly behind the scenes, so when you click a button, the right information shows up, just like when you turn on a light switch, the light comes on without you seeing all the wiring.
 
 ![Website and House with Tech](source/assets/images/website_house_tech_analogy.png)
 
diff --git a/source/Web Development Concepts/Backend/RESTful.md b/source/Web Development Concepts/Backend/RESTful.md
index 036d0a0..62e4eb7 100644
--- a/source/Web Development Concepts/Backend/RESTful.md	
+++ b/source/Web Development Concepts/Backend/RESTful.md	
@@ -18,22 +18,26 @@ has_children: false
 {:toc}
 
 ---
-Let's continue with the analogy of a restaurant. Representation State Transfer are the set of rules for how to order, prepare, and serve those dishes efficiently. 
+Before we go into what RESTful APIs are, it's important that we understand that they are just a way for computer sand programs to communicate with one another over the internet. It's very much similar to how HTTP allows browsers and servers to exchange information. 🌐🖥️
 
-## Understanding Representation State Transfer
-Imagine you go to a restaurant and order a burger 🍔. Each time you order, you have to tell the waiter exactly what you want. You can't just say "the usual" and expect them to remember your last order. This is like how in RESTful services, every request you make needs to have all the information necessary 📝 to complete that request without relying on previous interactions.
+## The Restaurant Ordering System Analogy 🍽️
+Imagine you’re at a restaurant, a familiar setting we've discussed before. This time, let's focus on how you interact with the restaurant’s ordering system, which can help us understand how RESTful APIs work. 📝
 
-This is like having a menu with specific items listed 📖. Just as you use the menu to select your meal in a standard way, RESTful services use standard methods (like GET for viewing 👀, POST for creating ✏️, PUT for updating 🔁, and DELETE for removing ❌) to interact with resources (the data or services they want to use).
+## Understanding the Basics of REST 📡
+REST stands for Representational State Transfer. It’s a set of rules that developers follow when they create APIs for web applications. Think of it like the restaurant’s menu and the way you order your food. 📋🍲
 
-Think of the kitchen and waiter as the server and yourself as the client. You (the client) order your food through the waiter 📋. The kitchen prepares your food 🍳. You don't need to know how the kitchen operates to get your meal, and the kitchen doesn't need to know who you are to prepare your meal. This separation allows you to enjoy your meal without worrying about how it's made 🥘, and the kitchen can focus on making food without serving tables.
+- **Menu as the API Documentation**: When you sit down at a table, you’re given a menu. This menu lists all the dishes you can order along with descriptions and prices. In RESTful APIs, there’s documentation that tells you what requests you can make to an API, much like how the menu tells you what you can order. 📖🍔
+- **Order Placement Equals Making a Request**: When you decide what to eat, you tell your server what you’d like to order. This is like sending an HTTP request to a web server. You specify what you want, perhaps a "POST" request to create a new order or a "GET" request to just view the menu. 📬➡️🍽️
+- **Kitchen as the Server**: After taking your order, the server (waiter) passes your choice to the kitchen, where your food is prepared. Think of the kitchen as the server in the digital world. It processes your request and prepares the response. 👨‍🍳💻
+- **Receiving Your Meal as the Response**: Once your meal is ready, the server brings it to your table. This is like the response in RESTful APIs, where the server sends back data to your device (the client). The meal can be thought of as the data you requested, delivered in a format you can use. 🍴📲
+## Principles of RESTful Services 🌐
+RESTful APIs operate under a few key principles, similar to how a restaurant functions efficiently:
 
-## API
-text
-
-talk about API
-
-![API Analogy](../../source/assets/images/api.avif)
+- **Statelessness**: Just as the restaurant doesn’t need to remember what every single customer has ordered in the past (each visit is a separate transaction), RESTful APIs don’t store data between requests. Each request from a client contains all the information the server needs to respond. 📄🔄
+- **Uniform Interface**: The way you order food is standardized. You use the menu, and the server knows exactly how to take your order. Similarly, RESTful APIs use standardized HTTP methods (like GET, POST, PUT, DELETE) which define how API interactions are handled. 🔄🗂️
+- **Client-Server Architecture**: Just as the restaurant's front of house (where you sit) and back of house (the kitchen) have specific roles, RESTful APIs separate concerns between the client (frontend) and the server (backend). This separation allows both sides to evolve independently without affecting the other. 🍴💻
 
+Understanding RESTful APIs is like understanding how to efficiently place an order and get exactly what you want at a restaurant. It ensures a smooth, predictable process for both the client (you) and the server (the kitchen), resulting in a satisfying meal—or in the case of web development, the data you need. 🎉👨‍💻
 
 [Previous: Databases](Databases){: .float-left .v-align-text-top}
 [Next: Tutorials](../../Tutorials){: .float-right .v-align-text-top}
diff --git a/source/Web Development Concepts/Frontend/CSS.md b/source/Web Development Concepts/Frontend/CSS.md
index 774964e..f780e4f 100644
--- a/source/Web Development Concepts/Frontend/CSS.md	
+++ b/source/Web Development Concepts/Frontend/CSS.md	
@@ -48,19 +48,20 @@ To utilize internal styling, you add the `<style>` element inside the `<head>` s
 ```
 <!DOCTYPE html>
 <html>
-<head>
-<style>
-body {background-color: powderblue;}
-h1   {color: blue;}
-p    {color: red;}
-</style>
-</head>
-<body>
-
-<h1>This is a heading</h1>
-<p>This is a paragraph.</p>
-
-</body>
+    <head>
+        <style>
+            body {background-color: powderblue;}
+            h1   {color: blue;}
+            p    {color: red;}
+        </style>
+    </head>
+
+    <body>
+
+        <h1>This is a heading</h1>
+        <p>This is a paragraph.</p>
+
+    </body>
 </html>
 ```
 
diff --git a/source/Web Development Concepts/Frontend/HTML.md b/source/Web Development Concepts/Frontend/HTML.md
index 143b2ee..d6d55a5 100644
--- a/source/Web Development Concepts/Frontend/HTML.md	
+++ b/source/Web Development Concepts/Frontend/HTML.md	
@@ -11,17 +11,11 @@ has_children: false
 # What is Hypertext Markup Language (HTML)?
 {: .no_toc }
 
-## Table of contents
-{: .no_toc .text-delta }
-
-1. TOC
-{:toc}
-
 {: .note }
 
 HTML serves as the building blocks for our website. It represents the different pieces for your LEGO figure, the head, arms, body, legs.
 
-Every HTML page ends with ".html", where each page has the same starting structure
+Every HTML page ends with ".html", where each page has the same starting structure. The `<head>` contains all of the "metadata" which are information related to the website. The actual content goes inside of the `<body>`tags.
 
 ```
 <!doctype html>
@@ -33,7 +27,7 @@ Every HTML page ends with ".html", where each page has the same starting structu
     <title>My page title</title>
     <link rel="stylesheet" href="style.css" />
   </head>
-  <body></body>
+  <body></body> <!--The actual content goes inside the <body> tags--> 
 </html>
 ```
 
diff --git a/source/Web Development Concepts/Frontend/Javascript.md b/source/Web Development Concepts/Frontend/Javascript.md
index a27ff9c..dbabf05 100644
--- a/source/Web Development Concepts/Frontend/Javascript.md	
+++ b/source/Web Development Concepts/Frontend/Javascript.md	
@@ -11,21 +11,14 @@ has_children: false
 # What is Javascript (JS)?
 {: .no_toc }
 
-## Table of contents
-{: .no_toc .text-delta }
-
-1. TOC
-{:toc}
-
----
-
 JavaScript is a programming language that works hand in hand with HTML and CSS, forming the backbone of most websites you visit. Think of HTML as the basic structure of your LEGO set, CSS as the colors and styles you apply to your LEGO pieces, and JavaScript as the motor that powers your moving LEGO constructions.
 
 ## Unleashing the Power of JavaScript
+{: .no_toc} 
 
 To add JavaScript to your website, you would want to use the `<script>` tag
 
-You could place the `<script>` tag either in the `<head>` tag or in the `<body>` tag, but in this case we would add it to the `<body>` tag to have our JavaScript interact with our HTML and CSS.
+You could place the `<script>` tag either in the `<head>` tag or in the `<body>` tag. We add it to the body tag for this example.
 
 To add **internal** JavaScript to your website, you would insert the JS code directly, as shown below:
 
@@ -76,168 +69,6 @@ You would create a JavaScript file using the extension `.js`, and would ideally
 
 This will connect our JavaScript to our HTML and CSS, giving us the power to create a fully dynamic website!
 
-## The Building Blocks of JavaScript
-
-JavaScript offers a toolkit of functions and features to bring websites to life. Let's dive into the exciting world of JavaScript and discover its fundamental components!
-
-### Query Selectors
-
-Query selectors allow you to collect information and manipulate certain HTML tags
-
-There are four main query selectors: `getElementById`, `getElementsByClassName`, `getElementsByTagName`, and `querySelector`
-
-You would use the `querySelector` function whenever you want to get the first match of a certain element
-
-This selector below is if you want your JavaScript to work with an `<h1>` tag 
-
-**Ex:** ```document.querySelector("h1");```
-
-For the `getElementById` tag, you would use it to get an element with a certain id attribute. 
-
-Remember, only one element can have an id attribute
-
-**Ex:**
-```
-<!DOCTYPE html>
-<html lang="en-US">
- 
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Today's Date</title>
-</head>
- 
-<body>
-    <h1 id="title">Today's Date</h1>
-    <script>
-        let header = document.getElementById("title");
-    </script>
-</body>
- 
-</html>
-```
-
-For the `getElementsByClassName` function, you would use it to get elements with a certain class name.
-
-Remember, multiple elements can have the same class name. This function will return an array of the elements with a certain class name.
-
-**Ex:** ```let ex = document.getElementsByClassName("example");```
-
-The `getElementsByTagName` function works similar to the `getElementsByClassName` function, except you use it to get certain **elements**
-
-**Ex:** ```let list_items = document.getElementsByTagName("li");```
-
-### Variables
-
-Variables are containers that can store different values. The values it can store ranges from numbers, strings, etc.
-
-You would declare a variable using the `let` keyword, and assign it a value using the `=` sign
-
-Down below are some examples of variables
-
-```
-let name = "Victor";
-let age = 19;
-let isStudent = true;
-```
-
-You can reassign the variable later in the code
-
-```
-let name = "Victor";
-name = "Steve";
-```
-
-### Functions
-
-Functions are containers that store **a block of code**. They are helpful when you want to run a certain block of code multiple times.
-
-To define a function, you would use the `function` keyword, the name of the function after it and then parentheses `()`. Inside the parentheses would be different parameters, or values you want to pass into the function.
-
-`Ex (function signature): function printName(name)`
-
-The function code would be contained within curly brackets `{ }`, so our overall function would look something like this:
-
-```
-function printName(name) {
-    console.log("Hello " + name);
-}
-```
-
-### Conditionals
-
-Conditionals are represented by an `if` statement. You use them if you want to check or compare something.
-
-**Ex:**
-
-```
-let name = "Bob";
-
-if (name == "Bob") {
-    console.log("Hi Bob!");
-}
-```
-
-We can also use the `else if` and `else` statements if we want to run code for if the initial if statement is not satisfied. We can only use `else if` and `else` if we already have an initial if statement
-
-**Ex:**
-
-```
-let name = "Bob";
-
-if (name == "Bob") {
-    console.log("Hi Bob!");
-} else if (name == "Victor") {
-    console.log("Hi Victor!");
-} else {
-    console.log("Who are you?");
-}
-```
-
-### Loops
-
-There are two different types of loops: while loops and for loops
-
-While loops are when you want to run code while a certain condition is met
-
-**Ex:**
-
-```
-let seconds = 5;
-
-while (seconds >= 0) {
-    console.log(seconds);
-    seconds -= 1;
-}
-```
-
-For loops are when you want to iterate through something, like the characters of a string or a list of values, or when you want to run a certain line of code a set number of times.
-
-
-**Ex:**
-
-```
-let fruits = ['apple', 'banana', 'orange', 'grape'];
-
-for (int i = 0; i < fruits.length; i++) {
-    console.log(fruits[i]);
-}
-```
-
-### Comments
-
-You can have single or multi-line comments
-
-```
-// This is a single line comment
-
-/*
-
-This is a multi line comment
-This is a multi line comment
-
-*/
-```
 
 [Previous: CSS](CSS){: .float-left .v-align-text-top}
 [Next: Backend](../Backend){: .float-right .v-align-text-top}
diff --git a/source/assets/images/interpreter.png b/source/assets/images/interpreter.png
new file mode 100644
index 0000000..ff05366
Binary files /dev/null and b/source/assets/images/interpreter.png differ