hackutd · akevinge · Aug 6, 2023 · Aug 6, 2023 · Aug 6, 2023 · Aug 24, 2023
diff --git a/docs/backend/index.md b/docs/backend/index.md
diff --git a/docs/frontend/html.md b/docs/frontend/html.md
@@ -4,75 +4,16 @@ sidebar_position: 1
 
 # HTML
 
-HTML (HyperText Markup Language) is the basis of all modern websites. Although many developers don't write plain HTML anymore, it is still the underlying system and important to know. At its core, HTML is [XML](https://www.w3schools.com/xml/xml_whatis.asp) with specific tags used to indicate different components on your website.
+HTML (HyperText Markup Language) is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables.
 
-## Basics
+## Learning Resources
 
-HTML is laid out using **tags**, which are enclosed in angle brackets like this: `<h1>`. Here is an example of a larger block of HTML:
+### Videos
 
-```html
-<html>
-    <body>
-        <h1>Hello World!</h1>
-        <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat. Duis aute irure dolor in
-            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-            culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-    </body>
-</html>
-```
+-   [HTML in 100 Seconds](https://www.youtube.com/watch?v=ok-plXXHlWw)
+-   [Learn HTML in 1 hour 🌎](https://www.youtube.com/watch?v=HD13eq_Pmp8)
 
-There are _opening tags_ and _closing tags_. The opening tag goes before the piece of text that it describes, and the closing tag goes after. The closing tag looks the same as the opening except it starts with a forward slash, like `</h1>`.
+### Articles
 
-The **text in between the tags** would appear on the page for the user to see, with some light formatting depending on the tag type and browser.
-
-> HTML's main purpose if to organize the **structure** of the page - there are not many formatting options to work with, and they are unpredictable as different browsers may display HTML elements differently. **CSS** should be used for formatting, which we will cover later.
-
-## Page Structure
-
-Here is what the skeleton of an HTML page looks like:
-
-```html
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width,initial-scale=1" />
-        <title>Browser Tab Title</title>
-    </head>
-    <body>
-        <!-- Add body content here! -->
-    </body>
-</html>
-```
-
-Let's go through this code line by line.
-
--   The first thing in an HTML doc is `<!DOCTYPE html>` - this just lets the browser know that what follows is, in fact, HTML code.
--   `<html>` and `</html>` define the start and end of the whole document.
--   The rest is split into two sections:
-    -   `<head>` - this is information about the document that will not directly appear on the page
-        -   `<meta charset="UTF-8">` defines the character set for the document.
-        -   `<meta name="viewport" content="width=device-width,initial-scale=1">` scales the page to the size of the screen so that it looks good on screens of all sizes.
-        -   `<title>`Some Title`</title>` is the title of the browser tab for the page.
-        -   There are other things, like CSS and links to the libraries you may be using in your code, that may go in this section.
-    -   `<body>` - this is the actual contents of the page that the user will see.
-
-## Common Tags
-
--   `<h1></h1>` through `<h6></h6>` for headings and subheadings
--   `<p></p>` for regular text (”paragraph” text)
--   `<a href=""></a>` for links
-    -   the text of the link to appear on the page goes between the tags, the url inside the quotes, like this example: `<a href="https://ix.hackutd.co/">Click to join HackUTD IX!</a>`
--   `<ul></ul>` for unordered lists, `<ol></ol>` for ordered lists
-    -   every element of the list should be wrapped in `<li></li>` for “list item”
--   `<!-- some words -->` for a comment (this is just the programmer’s notes, and has no effect on the page whatsoever)
-
-To learn more, check out [https://www.w3schools.com/](https://www.w3schools.com/).
-
-This may seem very simple, and that's because it is! But there are also a lot of HTML concepts that are tied to CSS and JS (like classes and IDs), so we talk about them on the CSS and JS pages.
+-   [Getting started with HTML - MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started)
+-   [HTML Basics for Beginners - FreeCodeCamp](https://www.freecodecamp.org/news/html-basics-for-beginners)
diff --git a/docs/frontend/index.md b/docs/frontend/index.md
diff --git a/docs/intro.md b/docs/intro.md
@@ -4,4 +4,39 @@ sidebar_position: 1
 
 # Intro
 
-A hacker's guide to hackathons, made by the HackUTD Team.
+Making a hackathon project can seem super scary and complicated, but after reading this guide, you'll be confident in making your own. Imagine we're building the Google Search website.
+Most hackathon projects will want some sort of user interface - after all, you want the judges to be able to visualize your idea, right? Many projects also contain some sort of system that deals with data, whether that be user data or data from external sources. This guide explains and provides resources to learn about user interfaces and data driven systems. If you have no idea what you’re doing at a hackathon or need some links/templates for any of these topics, then you’re at the right place!
+
+## The User Interface (Frontend)
+
+User interfaces and the software behind them are also known as the **frontend**. Frontends are what users see and interact with. When you go to a website and log in, you're interacting with the **frontend** of that website. The term **frontend** describes the text, buttons, links, input fields, etc. on a webpage and the software that goes into creating and composing them. Imagine we are building the Google Search website. What parts of the Google Search website do users see and interact with? The first components that come to mind are the search bar, search buttons, profile icon, and logo. These components are what we describe as the **frontend**.
+
+<details>
+<summary>
+<strong>Frontend</strong>
+</summary>
+
+## Basic Concepts
+
+**HTML** - If you look closely, you'll notice that all web pages have structure to them. **HTML** is a language that describes this structure. Does this button go before or after the title? Is this element grouped together with that element? Do we nest the paragraph inside of the table? Questions like this are answered using **HTML**, a simple tag-based language used on every website you open.
+
+<Docs items={[{type: 'link', href: '/frontend/html', label: 'HTML'}]}/>
+
+**CSS** - While **HTML** describes how a web page is structured, **CSS** is what gives it color, size, spacing, animations, etc. CSS is what sets apart boring looking websites from an [Apple webpage](https://www.apple.com/airpods-pro/).
+
+<Docs items={[{type: 'link', href: '/frontend/css', label: 'CSS'}]}/>
+
+**Javascript** - When you click on a button, what should your web page do? When you type words into a search bar, what results should come up? The code that runs dynamically on your website, the code that reacts to events, is written in **Javascript**.
+
+<Docs items={[{type: 'link', href: '/frontend/javascript', label: 'Javascript'}]}/>
+
+</details>
+
+# Data Driven Systems (Backend)
+
+In most hackathon projects, this “data-driven system” comes in the form of a **backend**. Again, imagine you are building the Google search website. You have the search bar, buttons, etc., but how do we actually get the search results? This is where a **backend** comes in handy. **Backends** usually process data and perform calculations on a remote computer (server). The **backend** may be a server or many servers that send and receive data from a database, run expensive algorithms, control user security and login, or all of the abovethese.
+
+<details>
+<summary><strong>Backend</strong></summary>
+
+</details>