All except example website

Needs to document step by step process of creating photogallery example website.

Website is already made, just needs documentation and design choice explanations.

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. 

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}

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

source/Tutorials/HTML_CSS_JS.md

@@ -15,45 +15,14 @@ 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.
 
 - **Basic Structure**: An HTML document consists of elements enclosed in tags. Key elements include `<html>`, `<head>`, and `<body>`.
 - **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,15 +46,15 @@ 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
 
 ```<p>(insert some text here)</p>```
 
 ![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!';
+```
 
 _______________________________________________________________