diff --git a/source/Tutorials/HTML_CSS_JS.md b/source/Tutorials/HTML_CSS_JS.md
index e030e2e..71382cf 100644
--- a/source/Tutorials/HTML_CSS_JS.md
+++ b/source/Tutorials/HTML_CSS_JS.md
@@ -17,11 +17,110 @@ has_toc: false
{: .note }
-> By [Victor Hsiao](https://www.linkedin.com/in/hsiaovictor/)
+## HTML
-When we want to add CSS styling to any of our HTML elements, to select the specific HTML elements we want to style, we would use one of the two types of CSS selectors
+### **The `` tag**
-#### **ID Selectors**
+The head tag represents the set up for our HTML page
+
+The two main components included in every `` tag are the `` and `<link>` tags
+
+We use the `<title>` tag when we include a title for our webpage
+
+We use the `<link>` tag for when we want to link a CSS stylesheet to our page, from the example above, we link the "style.css" stylesheet to our HTML page
+
+We will outline the multiple components that every HTML website has:
+
+### **The header tags**
+
+Header tags represent the titles of our HTML
+
+There are 6 different types of header tags: h1, h2, h3, h4, h5, and h6
+
+To use a header tag, you would do:
+
+```<h + "number">(content here)</h + "number">``` (where number is from 1 to 6)
+
+
+
+### **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
+
+```<p>(insert some text here)</p>```
+
+
+
+### **The `<a>` tag**
+
+The `<a>` tag is a tag is used to link other webpages or websites.
+
+To use an `<a>` tag, you have to specify the href attribute, which is the url that the tag links to.
+
+```<a href="some url">(content here)</a>```
+
+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**
+
+There are two types of lists in HTML:
+
+1. ordered lists
+2. unordered lists
+
+### **Ordered Lists**
+
+To specify an unordered lists, you use the `<ol>` tag.
+
+With ordered lists, your list items would be in a certain order, going from 1, 2, 3, 4, and so forth
+
+
+
+Same as ordered lists, to add items to your unordered list you use the `<li>` tag.
+
+### **Unordered Lists**
+
+To specify an unordered lists, you use the `<ul>` tag.
+
+Same as ordered lists, to add items to your unordered list you use the `<li>` tag.
+
+Instead of ordered numbers, there would be a bullet point or some form of separator at the front of each list item
+
+Unordered lists would look like this:
+
+
+
+### **The `<img>` tag**
+
+The `<img>` tag is used to add images to our website.
+
+Unlike the other tags, the image tag does not have a self-closing tag, so instead of ending with ```</img>``` we just end with ```/>```
+
+```<img src="image link" alt="describe image here" />```
+
+
+
+## CSS
+
+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 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
+
+Say we want to style the tag below
+
+`<h1>Hello World!</h1>`
+
+To use an element selector, we just get the tag `h1` and apply our CSS styles!
+
+```
+h1 {
+ (insert styles here)
+}
+```
+
+### **ID Selectors**
You would use id selectors if you only want to apply CSS styling to one HTML element
@@ -39,18 +138,21 @@ 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
In your HTML, you would assign the class attribute to the tags you want to have the same style
-From the below example, we see that two `<p>` tags can have the same class, in this case, "paragraph"
+From the below example, we see that there are multiple `<p>` tags
+
+Say we want to style the first two `<p>` tags and not the third one. We can assign them the same class, in this case, "paragraph"
```
<h1>Hello, my name is Deadpool!</h1>
<p class="paragraph">I am an antihero, I have done good but have also done bad</p>
<p class="paragraph">I am played by Ryan Reynolds!</p>
+<p>The end!</p>
```
To add style attributes to a class, we use the `.` tag instead
@@ -61,6 +163,40 @@ To add style attributes to a class, we use the `.` tag instead
}
```
+### **Basic Style Attributes**
+
+There are many different types of style attributes, but we'll lay out some basic ones.
+
+When writing any CSS code, you have to write it like this:
+
+
+
+The ones below are style attributes you would use for **text**
+
+**font-size**: changes the size of the text (font size is based on pixels, or px)
+
+`font-size: 16px;`
+
+**color**: changes the color of the text
+
+`color: blue;`
+
+**font-family**: give a specific font to selected text, there are many different font styles out there (the default is sans-serif)
+
+`font-family: sans-serif;`
+
+**text-align**: controls how text is aligned on a page, can be aligned left, right, or center
+
+`text-align: center;`
+
+For a full list of CSS properties, visit the link below:
+
+[All CSS properties](https://www.dofactory.com/css/properties)
+
+## JavaScript
+
+
+
_______________________________________________________________
[Previous: Getting Started](Getting Started){: .float-left .v-align-text-top}
diff --git a/source/Web Development Concepts/Frontend/CSS.md b/source/Web Development Concepts/Frontend/CSS.md
index e2fd570..774964e 100644
--- a/source/Web Development Concepts/Frontend/CSS.md
+++ b/source/Web Development Concepts/Frontend/CSS.md
@@ -17,14 +17,21 @@ has_children: false
1. TOC
{:toc}
-{: .note }
-> By [Victor Hsiao](https://www.linkedin.com/in/hsiaovictor/)
+{: .note }
-We will now discuss different aspects of CSS
+CSS, or Cascading Style Sheets, is like the paint and decorations you use to make your LEGO house look awesome after you've built it. While HTML defines the structure and content of your web page, CSS controls how your web page looks, like the colors, fonts, sizes, and layout.
-### Types of Styling
+CSS works together with HTML to make your web page look fantastic. It's like adding all the cool paint colors, decorations, and designs to your LEGO house after you've built it. You use CSS to tell the browser how you want each part of your web page to look.
-#### **Inline Styling**
+For example, you can use CSS to make your headings big and bold, your paragraphs have a specific font, and your buttons stand out with a bright color. HTML tells the browser what content goes where, and CSS tells the browser how to style and present that content, just like how the instructions tell you where to put each LEGO brick and the decorations to make your house look amazing.
+
+Together, HTML and CSS work hand in hand to create beautiful and functional web pages, just like how LEGO bricks and decorations come together to make awesome creations!
+
+## Types of Styling
+
+There are different types of CSS styling you can implement:
+
+### **Inline Styling**
Inline styling is when you add CSS styles inside an HTML tag
@@ -34,7 +41,7 @@ To do inline styling, you add the `style` attribute inside an HTML tag, and the
This is considered the most inefficient form of implementing CSS styles because if we want to implement multiple CSS properties, it can get pretty jumbled and messy!
-#### **Internal Styling**
+### **Internal Styling**
To utilize internal styling, you add the `<style>` element inside the `<head>` section
@@ -59,16 +66,16 @@ p {color: red;}
This separates the CSS from the HTML code and makes it easier to read when multiple styles are implemented for a specific element. However, we want to keep our HTML and CSS code separate from each other, and the best way is to keep the HTML and CSS code in separate files
-#### **External Styling**
+### **External Styling**
For external CSS styling, we use the ```<link>``` tag, which we add to the ```<head>``` section in our HTML
```<link rel="stylesheet" href="(name of css file).css" />```
We add the rel attribute and specify it as a "stylesheet" to specify that we want to add CSS code to our HTML, and then the href attribute to link our CSS code to the HTML
-_______________________________________________________________
-Overall, CSS can make our website look pretty and stylish. Like with our LEGO figure, we can use CSS to make our website stand out in its own unique way!
+Overall, CSS can make our website look pretty and stylish. Like with our LEGO house, we can use CSS to make our website stand out in its own unique way!
+_______________________________________________________________
[Previous: HTML](HTML){: .float-left .v-align-text-top}
[Next: Javascript](Javascript){: .float-right .v-align-text-top}
diff --git a/source/Web Development Concepts/Frontend/HTML.md b/source/Web Development Concepts/Frontend/HTML.md
index 7eecf9a..143b2ee 100644
--- a/source/Web Development Concepts/Frontend/HTML.md
+++ b/source/Web Development Concepts/Frontend/HTML.md
@@ -18,7 +18,6 @@ has_children: false
{:toc}
{: .note }
-> By [Victor Hsiao](https://www.linkedin.com/in/hsiaovictor/)
HTML serves as the building blocks for our website. It represents the different pieces for your LEGO figure, the head, arms, body, legs.
@@ -42,86 +41,19 @@ Most HTML tags are structured like this:
-### The <head> tag
+One important aspect of HTML is **the DOM**
-The head tag represents the set up for our HTML page
+**The DOM, or Document Object Model**, is like the instruction manual that tells you how to put all those LEGO bricks together to build your house.
-The two main components included in every `<head>` tag are the `<title>` and `<link>` tags
+The web browser is like a really smart LEGO builder. When you open a web page, the browser starts reading through that instruction manual, the HTML code.
-We use the `<title>` tag when we include a title for our webpage
+The DOM is like a map of your web page, showing how all these HTML elements are connected and organized. It's a way for your web browser to understand the structure of your page so it knows how to display it properly.
-We use the `<link>` tag for when we want to link a CSS stylesheet to our page, from the example above, we link the "style.css" stylesheet to our HTML page
+It's like a blueprint of the web page, showing how all the HTML elements are connected and organized, just like how the instruction manual tells the builder how to connect all the LEGO bricks to build the house.
-We will outline the multiple components that every HTML website has:
+Just like how following the LEGO instruction manual helps you build your house correctly, the DOM helps the web browser render your web page correctly, making sure everything shows up in the right place and looks the way it should.
-### The header tags
-
-Header tags represent the titles of our HTML
-
-There are 6 different types of header tags: h1, h2, h3, h4, h5, and h6
-
-To use a header tag, you would do:
-
-```<h + "number">(content here)</h + "number">``` (where number is from 1 to 6)
-
-
-
-### 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
-
-```<p>(insert some text here)</p>```
-
-
-
-### The `<a>` tag
-
-The `<a>` tag is a tag is used to link other webpages or websites.
-
-To use an `<a>` tag, you have to specify the href attribute, which is the url that the tag links to.
-
-```<a href="some url">(content here)</a>```
-
-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
-
-There are two types of lists in HTML:
-
-1. ordered lists
-2. unordered lists
-
-#### **Ordered Lists**
-
-To specify an unordered lists, you use the `<ol>` tag.
-
-With ordered lists, your list items would be in a certain order, going from 1, 2, 3, 4, and so forth
-
-
-
-Same as ordered lists, to add items to your unordered list you use the `<li>` tag.
-
-#### **Unordered Lists**
-
-To specify an unordered lists, you use the `<ul>` tag.
-
-Same as ordered lists, to add items to your unordered list you use the `<li>` tag.
-
-Instead of ordered numbers, there would be a bullet point or some form of separator at the front of each list item
-
-Unordered lists would look like this:
-
-
-
-### The `<img>` tag
-
-The `<img>` tag is used to add images to our website.
-
-Unlike the other tags, the image tag does not have a self-closing tag, so instead of ending with ```</img>``` we just end with ```/>```
-
-```<img src="image link" alt="describe image here" />```
-
-
+The browser knows exactly where everything is on the page because it's already built that LEGO-like map in its memory using the DOM. This helps the browser quickly find and update different parts of the web page without getting confused, just like how a LEGO builder can quickly find and add or remove bricks from the right spots in the house they're building!
**To learn more about HTML, down below are some resources:**
diff --git a/source/Web Development Concepts/Frontend/Javascript.md b/source/Web Development Concepts/Frontend/Javascript.md
index 9ec4d2a..a27ff9c 100644
--- a/source/Web Development Concepts/Frontend/Javascript.md
+++ b/source/Web Development Concepts/Frontend/Javascript.md
@@ -19,7 +19,225 @@ has_children: false
---
-To add JavaScript to your website,
+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
+
+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.
+
+To add **internal** JavaScript to your website, you would insert the JS code directly, as shown below:
+
+```
+<!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
+
+
+
+
+
+
+
+```
+
+However, like with our CSS, we would want to keep our JavaScript separate from our HTML, so best practice is to use **external** JavaScript, or store it in a separate file.
+
+To add **external** JavaScript to your website, or have it in a separate file you would have:
+
+``````
+
+You would create a JavaScript file using the extension `.js`, and would ideally want to store it in a separate folder from the HTML. The `
+
+
+