In order to be able to work on the website, you'll need to become familiar with a few things at minimum:

• HTML/CSS
• UNIX
• git

HTML stands for hyper text markup language. This is how website pages are 'programmed' or designed. A single file represents a single page - multiple files means multiple pages. index.html must be the name of your home page. Here is an example html file:

<!DOCTYPE html>
<html>
  <body>
    <div id="content">
      <h1>Welcome to Website!</h1>
      <p>This is a paragraph</p>
      <img src="./my-images-folder/the-photo.jpg"></img>
    </div>
  </body>
</html>

Any time you visit any website, google, facebook, Columbia.edu, your browser is downloading a file that looks like the one above. Your web-browser (chrome, safari, firefox) is then able to read the file and display the content with colors or whatever to you, the user. The angle bracketed characters surrounding the content are 'tags.' There are only a handful of tags that you really need to know, for example <p> is for simple text. <h1> is a 'heading' tag. <div> is just a virtual boxing tag (you'll use this a lot).

CSS stands for Cascading Style Sheets. HTML alone only defines organization and content. CSS allows you to add colors, create more sophisticated arrangments, adjust font styles, and much more. For example:

.blue-stuff {
  font-color: blue;
}
.my-box {
  border: 1px dotted black;
  width: 500px;
  height: 200px;
}

<!DOCTYPE html>
<html>
  <body>
    <div id="content">
      <h1>Welcome to Website!</h1>
      <p class="blue-stuff">Here is a paragraph</p>
      <div class="my-box">
        <p>Here is my box</p>
      </div>
      <img src="./images/the-photo.jpg"></img>
    </div>
  </body>
</html>

You then indicate with class which tags have which styles. You can combine styles too with class="blue-stuff my-box". Styling is a whole world of its own, so be sure to set aside a lot of time on any project dedicated to it.

Unix is a popular operating system, originally developed by Bell Laboratories in 1969, and written in the C programming language......

Blah blah, the best way to understand is to use it. If you have a Mac, this is easy, simply open your 'terminal' application (it's built-in). If you're on windows, what I like to do is take the laptop/computer outside and place it carefully in the woods. Then buy a mac.

Just kidding, download git for windows

You can also follow the PC section of this tutorial for a more involved setup.

In either case, what you're doing is preparing and starting the 'command prompt.' Before you could navigate your computer folders with pointing and clicking on images, you needed to move around via this command prompt. It might seem harder, but you'll get used to it very fast. In addition, the command prompt gives you many different commands that you wouldn't be able to perform otherwise.

Here are some basic commands. The $ indicates the prompt, or where you will type. It's not what you type in. The stuff after # are just comments I'm making to explain the command, you wouldn't type this in either.

$ pwd            # "print working directory"
/home/users/Jonathan
$ cd Documents/  # "change directory" to Documents
$ pwd
/home/users/Jonathan/Documents/
$ ls             # list all the files in this directory
resume.pdf    essay2.docx    porn.txt    school-2016/

You basically only need to know cd and ls to start.

'Git' is a version-control-system. It's a command-line tool designed to track your changes to your project and allow you and/or multiple people to work on multiple features simultaneously safely. This is extremely essential to a sane and productive working space.

One of the key features of git is branching. A branch is a copy of the original code. You can make changes, fix bugs, implement a new feature, and it won't affect the original code. That way, if you break something, it's not the end of the world. When you're done with your changes, you'd 'merge' your branch back to the 'master' branch.

IMPORTANT: git and github are not the same! git is the technology, github is this website. git can exist solely on your computer. Github simply allows you to connect the git tool with an online repository, so you can put your code in the cloud for free.

Now we can get started. The following instructions will assume you have reasonable familiarity with UNIX, git, and HTML/CSS (beyond what was mentioned above!). The above briefing is not meant to be a tutorial for any of the topics, but simply to provide some context. There are a lot of good online tutorials, but in my opinion, following any online tutorial is exhausting and you forget everything within the day. You just gotta do it.

You're going to download the entirety of the website to your computer so you can develop and work offline. You'll make your changes and test them incrementally. When you're ready and satisfied with your changes, you'll deploy it to the live website.

Use your command prompt and navigate to a location where you'll want to store the files.

$ cd ~/workspace/

Now you're going to use clone command of git. This will download all of the files from the specified 'repository' to the current directory.

$ git clone https://github.com/ADI-Labs/calendar-web.git
$ cd calendar-web/

Our project uses a lot of external libraries and packages. These would normally need to be downloaded manually, organized manually, and referenced manually. Instead, we use npm (node-package-manager) to take care of everything. You'll need to download node.js with which npm will come prepackaged: https://nodejs.org/en/

You'll automatically get the npm command in your terminal now. Install the packages (this may take a minute or two):

$ npm install

Now run the start script to start the website.

$ npm start

This will run the a development server that will host the static website files (index.html, etc). Open http://localhost:8080 in your web-browser.

Make a new branch. Name your branch the name of your new intended feature, prefixed with your initials and a slash.

$ git checkout -b js/my-new-feature

Make your changes. commit frequently. git add's -p option is encouraged (interactive add). Commit messages should be in the imperative present tense.

$ git add -p
...
$ git add ./stuff/morestuff/my-untracked-file
...
$ git commit -m "Implement my new WORKING sub-feature-1"
...
$ git commit -m "Implement my new WORKING sub-feature-2"

When finished, push to a NEW branch on github.

$ git push -u origin js/my-new-feature

Make a pull request, tag someone in a comment or poke someone on slack for review. Merge and delete branch when done.