Dandelion - Getting Started With Web Dev

plan.md

Dandelion Project

Charles Li

(This gist will be updated regularly by the way.)

Getting Started

Windows

If you have a Windows laptop, you need to install Git Bash. https://git-for-windows.github.io/

Git for Windows basically creates a Unix-like environment. It will let you use git commands and also UNIX tools (great if you've taken CS50).

Git

• What is Git? Git is a version control system. It helps us keep track of changes in our code base.
• Why use it? A lot of reasons. For us, it's because we have multiple people working on the same files, and Git provides great support for that. Also, if something breaks, we can simply revert a commit.

Look up "how to submit a pull request", but we will discuss this more later.

Get a Text Editor

Basically people built text editors just for coding. I recommend using either Sublime Text or Atom, though obviously your editor choice is entirely up to you.

Atom is free, and Sublime is "kinda-free" (you can use it without restrictions, it just gives you a pop-up every once in a while telling you to stop being cheap and buy it)

https://atom.io/

http://www.sublimetext.com/

Downloading the files for the Website

My advice to learn is to just go ahead and download the files for the website and start messing around with stuff. Here's how you do it.

1. In your browser, go to https://github.com/lidatong/dandelion-website
2. Look at the right sidebar. See where it says "HTTPS clone URL?" (right under Settings). Click that URL.
3. Now open up Git for Windows or Terminal
4. Type git clone https://github.com/lidatong/dandelion-website.git and hit enter. Optional: navigate to a directory where you want to put the website files.
5. You should see some output come up on your terminal. You've now cloned the directory.
6. Type cd dandelion-website and hit enter.
7. You're now inside the website files. Type open index.html. This should open the website in your browser.

I highly recommend using Chrome or Firefox

If the last step fails, find the directory dandelion-website inside your file navigator (either the File Explorer in Windows or Finder in Mac). It's probably in your home directory unless you specifically put it in a specific folder.

Drag index.html into your preferred web browser. The website should now open.

Still doesn't work? Feel free to send me an email with a screenshot...

Opening the files in your text editor

1. Download one of the text editors I recommended above. (If you're already familiar with a different text editor, go ahead and just open the dandelion-website directory in it)
2. Install the text editor you chose
3. Go to where you downloaded the website files above. Click the folder, and DRAG it into your text editor. In both cases, it will go ahead and put the entire directory in the editor, with a nice sidebar on the left for visualizing all the files.
4. You're free to make changes as you wish. On to the code...

Javascript and co.

So in our first two meetings we looked at how to make requests as a client. Refer to https://gist.github.com/anonymous/643c6837f20ac7228d59 for a refresher.

We also talked about jQuery, which is a Javascript library. jQuery basically provides a nicer, and easier syntax than "vanilla Javascript", and also in days past created a standard.

Note: After some thought, I've decided we won't use Angular this term just because it's a big framework to learn, we're already working at picking up Express.

Here's some sample code we saw on how you make a request:

For a simple example on making a request

Follow the steps above for downloading the files, except instead go to (again, follow the same steps above) https://github.com/lidatong/dandelion-client

Now, when the webpage is open inside Chrome, click the button on the page. Open up your console (command + alt + j), or View -> Developer -> Console. You should see an object there. Can you figure out (by clicking on the things inside the console) what it is?

Now go to this URL

Look familiar?

Front-end or Back-end?

It's up to you whether you want to work on the design/layout of the website, or working on the back-end.

I'll recommend that if you don't have much progrmaming background, and your goal is just to pick up some web development this term to go with front-end. Most of the code is already written. You can experiment with stuff, make changes, and because a lot of it is already "done" it's something you can learn a lot from.

Front-end

You've already downloaded all the front-end code above. Go ahead and mess around with stuff in your text editor (google "HTML tutorial" or "CSS tutorial" if you're confused, and just see if you can get some of the website's text to change or the colors to change!)

Remember the files are stored locally on your machine, so you're not going to ruin the actual website!

Back-end

Want to do back-end stuff?

For the back-end we're going to be using Express. http://expressjs.com/

What the heck is an API anyways?

See https://www.youtube.com/watch?v=7YcW25PHnAA. It's a great tutorial on what an API is.

How does this relate to Express?

Express a web framework. We're going to use it to build an API. We're using Express to build our own API for the Dandelion website. Sounds daunting, but Express does a lot of the heavy lifting for us.

How do I install Express?

You first need to install Node.js. I only have installation instructions for Mac, but go to the Node website to learn more if you have a Windows (sorry, but I think their instructions are good.)

For Mac I greatly prefer the Homebrew package manager DO NOT INSTALL FROM NODE WEBSITE IF YOU HAVE A MAC

Here is Homebrew. Follow their install instructions.

Once you have Homebrew installed, we're going to get nvm which is a Node Version Manager.

Type the following in your terminal:

1. brew install nvm
2. nvm install stable
3. nvm use 0.12

We use Node v0.12 because Node v4.0 broke backwards compatibility and Express doesn't work with it...

Starting with Express

1. (I will put an express api repo soon)