feat/improvement: add intro and blurbs

docs/backend/index.md

@@ -4,6 +4,6 @@ sidebar_position: 3
 
 # Backend
 
-Backends process data and perform calculations on the server side. This is hidden from the user, so we generally access databases, call APIs with API Keys, and perform complex calculations in the backend.
+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 recieve data from a database, run expensive algorithms, control user security and login, or all of these.
 
 <Docs />

docs/frontend/index.md

@@ -4,6 +4,18 @@ sidebar_position: 2
 
 # Frontend
 
-Frontends are what users see. A good frontend can make a project stand out from the rest. This is an introduction to building functional and clean-looking frontend sites, with both plain HTML/CSS as well as modern Javascript frameworks.
+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.
 
-<Docs />
+## Basic Concepts
+
+**HTML** - If you look closely, you'll notice that web pages all have structure to them. **HTML** is a language that describes this structure. Does this button go before or after the title? Questions like this are answered by **HTML**.
+
+<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, animation, etc.
+
+<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? These are questions using **Javascript**.
+
+<Docs items={[{type: 'link', href: '/frontend/javascript', label: 'Javascript'}]}/>

docs/intro.md

@@ -4,4 +4,16 @@ sidebar_position: 1
 
 # Intro
 
-A hacker's guide to hackathons, made by the HackUTD Team.
+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 resource to learn about user interfaces and data driven systems.
+
+## 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.
+
+<Docs items={[{type: 'link', href: '/frontend', label: 'Frontend'}]}/>
+
+# Data Driven Systems (Backend)
+
+In most hackathon projects, this comes in the form of a **backend**. 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 recieve data from a database, run expensive algorithms, control user security and login, or all of these.
+
+<Docs items={[{type: 'link', href: '/backend', label: 'Backend'}]}/>