Major Restructuring

Three Main Modules: Web Dev Concepts Tutorials Example.
tritonhacks · Feb 24, 2024 · c43ee94 · c43ee94
1 parent f9f156c
commit c43ee94
Show file tree

Hide file tree

Showing 26 changed files with 222 additions and 182 deletions.
diff --git a/index.md b/index.md
@@ -1,15 +1,11 @@
 ---
 title: Home
 layout: home
-permalink: /
 nav_order: 1
+permalink: /
 ---
 
 # TritonHacks Web Development <br> Starter Kit
-
-> By [Victor](https://linkedin.com/in/hsiaovictor), [Noah](), [Kevin](https://www.linkedin.com/in/kevin-shin-373183188/), 
-{: .note }
-
 The following are the different callouts you can use. Reference the source code to use them.
 
 {: .important}
@@ -35,9 +31,13 @@ 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. On the left, you'll see three main modules, and there's a special one where you'll see how we create a website using these concepts. At the bottom of each page, you'll find links to smoothly move to the next or previous submodule, making it super easy to keep learning. Start from the top module and explore downwards, but if you're already confident, feel free to dive into the modules you're most interested in. If you ever feel lost, just use the search bar to quickly find what you're looking for—it'll guide you straight there! Get ready for an incredible learning adventure—it's going to be awesome! 🚀✨
+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. 
+
+The first module is thus an explanation of the concepts on a high level, the second module are the tutorials, and the third module is where we show you how to create an example website. If you're already confident, feel free to dive into the modules you're most interested in. 
+
+If you ever feel lost, just use the search bar to quickly find what you're looking for—it'll guide you straight there! Get ready for an incredible learning adventure—it's going to be awesome! 🚀✨
 
 ![TritonHacks Image](source/assets/images/tritonhacks.png)
 
-[Next: What is Web Development?](What is Web Development){: .float-right .v-align-text-top}
+[Next: Web Development Concepts](Web Development Concepts){: .float-right .v-align-text-top}
 
diff --git a/source/Backend/Databases.md b/source/Backend/Databases.md
diff --git a/source/Backend/Servers.md b/source/Backend/Servers.md
diff --git a/source/Example/Backend.md b/source/Example/Backend.md
@@ -1,10 +1,10 @@
 ---
 layout: default
 title: Creating the Backend
-has_children: false
-parent: An Example
+nav_order: 3
 permalink: /Example/Backend
-nav_order: 4
+parent: An Example
+has_children: false
 ---
 
 # Creating our Backend
@@ -16,8 +16,7 @@ nav_order: 4
 1. TOC
 {:toc}
 
-{: .note }
-> By [name](github or linkedin)
+---
 
 ### <img src="../source/assets/images/fastapi-1.svg" alt="FastAPI Logo" width="15" height="15"> FastAPI
 For our Web Development Starter Kit, we'll be utilizing FastAPI, an essential toolkit for those creating websites and web applications. Consider FastAPI as a collection of foundational tools that developers employ to build and manage the unseen components of websites or apps. These components are crucial for functions like securely transmitting your data during sign-ups or log-ins.

diff --git a/source/Example/Design Process.md b/source/Example/Design Process.md
@@ -1,10 +1,10 @@
 ---
 layout: default
 title: Design Process
-has_children: false
-parent: An Example
+nav_order: 1
 permalink: /Example/Design Process
-nav_order: 2
+parent: An Example
+has_children: false
 ---
 
 # Design Process
@@ -16,8 +16,7 @@ nav_order: 2
 1. TOC
 {:toc}
 
-{: .note }
-> By [Kevin](github or linkedin)
+---
 
 [Previous: Getting Started](Getting Started){: .float-left .v-align-text-top}
 [Next: Frontend](Frontend){: .float-right .v-align-text-top}
diff --git a/source/Example/Example.md b/source/Example/Example.md
@@ -1,15 +1,22 @@
 ---
 layout: default
 title: An Example
-nav_order: 5
+nav_order: 7
+permalink: /Example
 has_toc: false
 has_children: true
-permalink: /Example
 ---
 
 # Designing our Website
-{: .note }
-> By [name](github or linkedin)
+{: .no_toc }
+
+## Table of contents
+{: .no_toc .text-delta }
+
+1. TOC
+{:toc}
+
+---
 
 
 [Previous: RESTful](Backend/RESTful){: .float-left .v-align-text-top}

diff --git a/source/Example/Frontend.md b/source/Example/Frontend.md
@@ -1,10 +1,10 @@
 ---
 layout: default
 title: Creating the Frontend
-has_children: false
-parent: An Example
+nav_order: 2
 permalink: /Example/Frontend
-nav_order: 3
+parent: An Example
+has_children: false
 ---
 
 # Creating our Frontend
@@ -16,9 +16,7 @@ nav_order: 3
 1. TOC
 {:toc}
 
-{: .note }
-> By [name](github or linkedin)
-
+---
 
 
 [Previous: Design Process](Design Process){: .float-left .v-align-text-top}

diff --git a/source/Example/Website.md b/source/Example/Website.md
@@ -1,10 +1,10 @@
 ---
 layout: default
 title: Crafting the Website
-has_children: false
-parent: An Example
-permalink: /Example/Website
 nav_order: 4
+permalink: /Example/Website
+parent: An Example
+has_children: false
 ---
 
 # Creating the Website
@@ -16,8 +16,7 @@ nav_order: 4
 1. TOC
 {:toc}
 
-{: .note }
-> By [name](github or linkedin)
+---
 
 
 [Previous: Backend](Backend){: .float-left .v-align-text-top}

diff --git a/source/Example/Getting Started.md → source/Tutorials/Getting Started.md b/source/Example/Getting Started.md → source/Tutorials/Getting Started.md
@@ -1,10 +1,10 @@
 ---
 layout: default
 title: Getting Started
-has_children: false
-parent: An Example
-permalink: /Example/Getting Started
 nav_order: 1
+permalink: Tutorials/Getting Started
+parent: Tutorials
+has_children: false
 ---
 
 # Getting Started
@@ -16,8 +16,7 @@ nav_order: 1
 1. TOC
 {:toc}
 
-{: .note }
-> By [Kevin](https://www.linkedin.com/in/kevin-shin-373183188/)
+---
 
 {: .caution}
 This documentation is only for Windows.
@@ -52,5 +51,5 @@ pip install uvicorn
 
 Once these are installed, you are all set up to start creating your website.
 
-[Previous: Example](../Example){: .float-left .v-align-text-top}
-[Next: Design Process](Design Process){: .float-right .v-align-text-top}
+[Previous: Tutorials](../Tutorials){: .float-left .v-align-text-top}
+[Next: HTML, CS, Javascript](HTML_CSS_JS){: .float-right .v-align-text-top}
diff --git a/source/Tutorials/HTML_CSS_JS.md b/source/Tutorials/HTML_CSS_JS.md
@@ -0,0 +1,11 @@
+---
+layout: default
+title: HTML, CSS, and Javascript
+nav_order: 2
+permalink: Tutorials/HTML_CSS_JS
+parent: Tutorials
+has_toc: false
+---
+
+[Previous: Getting Started](Getting Started){: .float-left .v-align-text-top}
+[Next: Python](Python){: .float-right .v-align-text-top}
diff --git a/source/Tutorials/Python.md b/source/Tutorials/Python.md
@@ -0,0 +1,11 @@
+---
+layout: default
+title: Python
+nav_order: 3
+permalink: Tutorials/Python
+parent: Tutorials
+has_toc: false
+---
+
+[Previous: HTML, CS, Javascript](HTML_CSS_JS){: .float-left .v-align-text-top}
+[Next: Tutorials](../../Tutorials){: .float-right .v-align-text-top}
diff --git a/source/Tutorials/Tutorial.md b/source/Tutorials/Tutorial.md
@@ -0,0 +1,11 @@
+---
+layout: default
+title: Tutorials
+nav_order: 6
+permalink: /Tutorials
+has_toc: false
+has_children: true
+---
+
+[Previous: RESTful](../Web Development Concepts/Backend/RESTful){: .float-left .v-align-text-top}
+[Next: Getting Started](Getting Started){: .float-right .v-align-text-top}
diff --git a/source/What is Web Development.md → source/Web Development Concepts.md b/source/What is Web Development.md → source/Web Development Concepts.md
@@ -1,8 +1,10 @@
 ---
 layout: default
-title: What is Web Development?
-permalink: /What is Web Development
+title: Web Development Concepts
 nav_order: 2
+permalink: /Web Development Concepts
+has_toc: false
+has_children: true
 ---
 # What is Web Development?
 {: .no_toc }
@@ -13,18 +15,18 @@ nav_order: 2
 1. TOC
 {:toc}
 
-{: .note }
-> By [Kevin](https://www.linkedin.com/in/kevin-shin-373183188/)
+---
 
 {: .attention }
 The starter kit goes over the surface level of web development. It is a very high-level perspective and there's so much more going on under the cover. Take each explanation with a grain of salt as it's meant to introduce you to these ideas.
 
+
 ## Internet and Web Development
 The Internet is like a huge worldwide network that connects millions of devices together. It's a bit like a massive library, but instead of books, it stores information, pictures, videos, and much more. You can think of it as a place where people from all over the world can share and access information.
 
 Websites are like individual rooms or spaces in this big library. Each website has its own unique address, just like a house has an address in a city. When you visit a website, you're exploring what's inside that particular room of the internet library. Websites can be about anything – from sharing news and stories, selling products, teaching things, or simply entertaining people.
 
-![Website and Internet Analogy](source/assets/images/internet_website_analogy.jpg)
+![Website and Internet Analogy](../source/assets/images/internet_website_analogy.jpg)
 
 Now, web development is the fascinating process of building these websites. It's like being an architect, designer, and storyteller all at once. People who work on web development use special computer languages and tools to create and design these online spaces.
 
@@ -45,7 +47,7 @@ The frontend team is similar to the construction workers who build the visible p
 ### 🔧 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.
 
-![Website and House with Tech](source/assets/images/website_house_tech_analogy.png)
+![Website and House with Tech](../source/assets/images/website_house_tech_analogy.png)
 
 [Back to Home]({{ "/" | relative_url }}){: .float-left .v-align-text-top}
 [Next: Design](Design){: .float-right .v-align-text-top}

diff --git a/source/Backend/Backend.md → ...b Development Concepts/Backend/Backend.md b/source/Backend/Backend.md → ...b Development Concepts/Backend/Backend.md
@@ -2,9 +2,10 @@
 layout: default
 title: Backend
 nav_order: 5
+permalink: Web Development Concepts/Backend
+parent: Web Development Concepts
 has_toc: false
 has_children: true
-permalink: /Backend
 ---
 
 # What is the Backend?
@@ -16,10 +17,7 @@ permalink: /Backend
 1. TOC
 {:toc}
 
-{: .note }
-> By [Kevin](https://www.linkedin.com/in/kevin-shin-373183188/)
-
-
+---
 
 You're familiar with the Frontend, which represents what the house looks like – color, walls, and the structure of the house. Now, let's explore the Backend, which is what makes the house run and function.
 
@@ -32,5 +30,5 @@ Databases are like different energy companies delivering specific resources to y
 ### 💡 RESTful - Controlling Household Systems
 RESTful is the method we use to interact with the servers. Similar to how you might switch on lights, turn on the faucet for water, or adjust the thermostat to get hot water or change room temperature, RESTful is a way to allows us to access and receive things from the household system.
 
-[Previous: Javascript](Frontend/Javascript){: .float-left .v-align-text-top}
-[Next: Servers](Backend/Servers){: .float-right .v-align-text-top}
+[Previous: Javascript](../Frontend/Javascript){: .float-left .v-align-text-top}
+[Next: Servers](Servers){: .float-right .v-align-text-top}