Updated & Restructured Dev Docs, Updated Footer and Sidebar

.gitignore

@@ -4,4 +4,5 @@ _site/
 .jekyll-metadata
 .DS_Store
 .vscode
+vendor/
 *.*~

_docs/dev-setup.md

@@ -6,7 +6,11 @@ sidebar-title: "Dev Setup"
 # Dev Setup: In-Depth Walkthrough
 {:.no_toc}
 
-You want to contribute to the Teach LA Website! Awesome! Before you get started, you'll need to set up some things. Here, we'll walk you through step-by-step how to set up each component. We'll tell you how to check if you already have each component, how to briefly install it if you don't, and then show you some extra resources where you can learn more (but only if you want)!
+You want to contribute as part of Teach LA's dev team! Awesome! Before you get started, you'll need to set some resources up if you want to work on the website or one of our projects.
+
+If you want to get to work on our projects like the Editor or Learning Labs, check out our [project setup guide]({{ site.baseurl }}/docs/project-setup).
+
+ Here, we'll walk you through step-by-step on the components necessary to work on Teach LA's website and how to set up each component. We'll tell you how to check if you already have each component, how to briefly install it if you don't, and then show you some extra resources where you can learn more (but only if you want)!
 
 Some of this may already be familiar for you. Feel free to skip around to the parts that are relevant.
 

_docs/index.html

@@ -4,12 +4,12 @@
 layout: default
 ---
 
-<h1 class="title text-2x">Everything you need to know about this website.</h1>
+<h1 class="title text-2x">Everything you need to know about Teach LA's dev team.</h1>
 <p class="text-15x">
-  Learn how to set up your development environment, add yourself to the teams page, add or remove classes, resources, and more! <b>No previous coding experience required</b>!
+  Learn how to set up your development environment for our website or projects, add yourself to the teams page, add or remove classes, resources, and more! <b>No previous coding experience required</b>!
 </p>
 
-<h2 class="title">Get Set Up</h2>
+<h2 class="title">Website Set Up</h2>
 <p class="text-15x">
   Follow along with our <a class="tla-link" href="{{site.baseurl}}/docs/dev-setup">in-depth setup walkthrough...</a>
 </p>
@@ -25,6 +25,11 @@ <h2 class="title">Get Set Up</h2>
 $ bundle exec jeykll serve</code>
 </pre>
 
+<h2 class="title">Project Set Up</h2>
+<p class="text-15x">
+  Check out our <a class="tla-link" href="{{site.baseurl}}/docs/project-setup">project set-up guide!</a>
+</p>
+
 <h2 class="title">Add Yourself to the Teams Page</h2>
 
 <p class="text-15x">

_docs/project-setup.md

@@ -0,0 +1,85 @@
+---
+title: "Project Setup: Extra Installations"
+sidebar-title: "Project Setup"
+---
+
+# Project Setup: Extra Installations
+{:.no_toc}
+
+So, you want to work on our cool projects like the Editor or a Learning Lab! We're excited to have you on our team, but there's a few things you have to setup before you can jump right into working on our projects!
+
+## Table of Contents
+{:.no_toc}
+* TOC
+{:toc}
+
+## Initial Setup
+
+First, make sure that you have setup your GitHub account and Git on your machine by following the first steps of our [dev setup guide]({{ site.baseurl }}/docs/dev-setup).
+
+Our projects require a few more things we have to set-up as well, so be sure to head back to this page once you've set-up git and GitHub!
+
+## Installing node and npm
+
+For our projects, we use JavaScript and Typescript to handle website logic, so we'll also need package managers to handle all our JavaScript dependencies. There are two primary package managers that we use, the first being the Node Package Manager, or npm. npm actually comes with `Node.js`, a JavaScript tool that we also need which is used to help build network applications, so let's check if we have it installed already!
+
+Try running:
+
+```sh
+$ node -v
+```
+
+If you already have node installed in your machine, you should see some
+numbers in the form of `vXX.XX.X` which means that you already have node (and consequently npm) installed, and don't need to do anything else!
+
+If you see something along the lines of
+
+```
+command not found: node
+```
+
+then you should follow the instructions on node's official site [here](https://nodejs.org/en/download/) to get it installed.
+
+If you use WSL instead, you can follow these special instructions [here](https://docs.microsoft.com/en-us/windows/dev-environment/javascript/nodejs-on-wsl).
+
+To check that node has been properly installed on your machine, just run:
+
+```sh
+$ node -v
+```
+
+And you should be all set for using npm!
+
+## Installing yarn
+
+The second package manager that we use for our projects, `yarn`, is another application manager similar to npm that was launched by Facebook in 2016! A lot of developers prefer yarn over npm due to its improved performance and speed. If you want to see the major differences between yarn and npm, you can check out this [article](https://www.whitesourcesoftware.com/free-developer-tools/blog/npm-vs-yarn-which-should-you-choose/) on it.
+
+First, check to see if you have yarn already installed by running
+
+```sh
+$ yarn --version
+```
+
+If you get numbers in the form of `X.XX.XX` then you have yarn already installed and are good to go!
+
+Otherwise, if you get
+
+```
+command not found: yarn
+```
+
+then we can actually install yarn with our trusty npm that we just installed above!
+
+After running:
+
+```sh
+$ npm install --global yarn
+```
+
+you can check if you have yarn properly installed by running
+
+```sh
+$ yarn --version
+```
+
+And you should be all set for using yarn!

_docs/static-setup.md

@@ -1,6 +1,6 @@
 ---
-title: "Adding yourself to the team page"
-sidebar-title: "Add to Team Page"
+title: "Website Setup"
+sidebar-title: "Website Setup"
 ---
 
 ## Table of Contents
@@ -17,7 +17,7 @@ $ git checkout -b my-branch-name    # create a new branch and check it out
 $ jekyll serve                      # set up our dev server
 ```
 
-## Creating a basic page
+## Adding To The Team Page
 
 Now to add yourself to our [team page]({{ site.basurl }}/team)! When you add yourself to our team, you are not only adding your name to the team page, but you are also creating your own webpage on the website, and associating yourself to any future blog posts that you might write!
 

_includes/footer.html

@@ -124,7 +124,10 @@ <h3 class="footer-subtitle">Members</h3>
                             <a href="{{site.baseurl}}/docs/dev-setup">Dev Setup</a>
                         </li>
                         <li>
-                            <a href="{{site.baseurl}}/docs/static-setup">Team Page</a>
+                            <a href="{{site.baseurl}}/docs/static-setup">Website Setup</a>
+                        </li>
+                        <li>
+                            <a href="{{site.baseurl}}/docs/project-setup">Project Setup</a>
                         </li>
                         <li>
                             <a href="{{site.baseurl}}/dev/resources">Dev Resources</a>

_sass/_docs.scss

@@ -25,12 +25,18 @@
     }   
 }
 
-#add-to-team-page-button:checked + #add-to-team-page {
+#website-setup-button:checked + #website-setup {
    ol.sidebar-items li {
    display: list-item;
     }
 }
 
+#project-setup-button:checked + #project-setup {
+    ol.sidebar-items li {
+        display: list-item;
+        }     
+}
+
 input {
     display: none;
 }