improve HTMl, CSS, JS docs

docs/frontend/css.md

@@ -22,6 +22,8 @@ This block of code would turn all of the level 1 headings in the associated HTML
 -   `color:` is the **property** - the thing we are trying to format. Other examples of properties include `font-size` or `margin`.
 -   `red;` is the value of the property - specifically what we are setting the property to be.
 
+For a good general overview of CSS, check out [CSS in 100 Seconds by Fireship](https://www.youtube.com/watch?v=OEV8gMkCHXQ&pp=ygUSY3NzIGluIDEwMCBzZWNvbmRz).
+
 ## Ways to add CSS to Your HTML Document
 
 There are 3 ways to add CSS to an HTML doc:
@@ -126,12 +128,3 @@ For further layout options, check out CSS Grid and CSS Flexbox. Here are some re
 
 -   Grid: [https://css-tricks.com/snippets/css/a-guide-to-flexbox/](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
 -   Flexbox: [https://css-tricks.com/snippets/css/complete-guide-grid/](https://css-tricks.com/snippets/css/complete-guide-grid/)
-
-## Frameworks
-
-It can be a tedious and time-consuming process to build up a presentable page starting from scratch with CSS. **Frameworks**, which are essentially CSS libraries, make it much easier. Here are some of the more popular Frameworks to get you started:
-
--   [Material UI](https://mui.com/)
--   [Bootstrap](https://getbootstrap.com/)
--   [Tailwind CSS](http://tailwindcss.com)
--   [Bulma](http://bulma.io)

docs/frontend/html.md

@@ -6,14 +6,27 @@ sidebar_position: 1
 
 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.
 
-## Learning Resources
+## The Anatomy of HTML
 
-### Videos
+HTML is made up of a bunch of tags. This is a tag:
 
--   [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)
+![](./html-tag.png)
 
-### Articles
+You can nest tags inside each other and put them next to each other. Tags are displayed from left to right and top to bottom.
 
--   [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)
+For example:
+
+```HTML
+<h1>This is a Heading</h1>
+<p>This is a paragraph.</p>
+<a href="www.google.com"><strong>This is a bolded link.</strong></a>
+```
+
+<h1>This is a Heading</h1>
+<p>This is a paragraph.</p>
+<a href="www.google.com"><strong>This is a bolded link.</strong></a>
+
+<br/>
+<br/>
+
+To learn more about the basic structure and various tags of HTML, [check out "HTML in 100 seconds" by Fireship](https://www.youtube.com/watch?v=ok-plXXHlWw). When you're done with that, [watch "HTML Basics for Beginners" by FreeCodeCamp](https://www.youtube.com/watch?v=pMJ0NI3OkYA).

docs/frontend/javascript.md

@@ -8,6 +8,10 @@ JavaScript is the language that is used on the web. All sites today have some so
 
 JavaScript, you will find, is a much more dynamic language and allows you to do a lot of things that other programming languages don't like. However, this freedom comes with a downside: JavaScript tends to produce a ton more runtime errors due to its lack of compilation and type checking. You might hear many online hate on JavaScript (and with good reason), but it is the basis for the modern web. And once you learn the basics, you can explore more typed-variations such as TypeScript and CoffeeScript.
 
+For a good general overview of Javascript, check out [JavaScript in 100 Seconds by Fireship](https://www.youtube.com/watch?v=DHjqpvDnNGE).
+
+For a more in-depth introduction to the language, watch [JavaScript Crash Course for Begineers](https://www.youtube.com/watch?v=hdI2bqOjy3c).
+
 ## Where to Write JavaScript?
 
 JavaScript can be placed in primarily 2 places:
@@ -49,15 +53,7 @@ window.onload = function () {
 };
 ```
 
-## Variables
-
-JavaScript is not strictly typed, so it only has 3 main variable definitions:
-
--   `var`: Declares a variable (uses hoisting, which allows use before decleration)
--   `let`: Also declares a variable but enforces that declerations should be before use
--   `const`: Same as constant variables in other languages, cannot be changed after it is defined
-
-## External Links
+## More Resources
 
 -   [The Modern JavaScript Tutorial](https://javascript.info/)
 -   [W3 Schools JavaScript Tutorial](https://www.w3schools.com/js/)

docusaurus.config.js

@@ -7,7 +7,8 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
 /** @type {import('@docusaurus/types').Config} */
 const config = {
     title: 'HackUTD Tech Guide',
-    tagline: 'Your one-stop shop for all tech resources during HackUTD!',
+    tagline:
+        "A hacker's guide to hackathons, made by the HackUTD Team. Your one-stop shop for all tech resources during HackUTD!",
     url: 'https://guide.hackutd.co',
     baseUrl: '/',
     onBrokenLinks: 'throw',

src/pages/index.tsx

@@ -13,7 +13,16 @@ function HomepageHeader() {
         <header className={clsx('hero hero--primary', styles.heroBanner)}>
             <div className="container">
                 <h1 className="hero__title">{siteConfig.title}</h1>
-                <p className="hero__subtitle">{siteConfig.tagline}</p>
+                <p
+                    className="hero__subtitle"
+                    style={{
+                        width: '65%',
+                        margin: 'auto',
+                        marginBottom: '1rem',
+                    }}
+                >
+                    {siteConfig.tagline}
+                </p>
                 <div className={styles.buttons}>
                     <Link
                         className="button button--secondary button--lg"