Start with Python

1- python/1-py-variables/README.md

@@ -0,0 +1,21 @@
+Python Variables, Lists and Dictionaries
+========================================
+
+Create a variable named byte and set it equal to "school".
+
+Create a [list](http://www.tutorialspoint.com/python/python_lists.htm) named instructors and have it contain the strings "Armen", "Chris", and "Greg"
+
+Create an [tuple](http://www.tutorialspoint.com/python/python_tuples.htm) named students and have it contain the strings "Adolfo", "Benny", "Billy", "Brendan"
+
+What's the difference between a list and a tuple? Why use one over the other?
+
+Create a dictionary with the following key-value pairs- "byteAcademy":byte, "instructors":instructors, "students":students
+
+Print the keys and values of the dictionary. It should look like this:
+```
+byteAcademy - School  
+instructors - Armen, Chris, Greg  
+students - Adolfo, Benny, Billy, Brendan
+```
+ 
+Check out [.format](https://infohost.nmt.edu/tcc/help/pubs/python/web/new-str-format.html)

1- python/10-reverse-polish-notation/README.md

@@ -0,0 +1,41 @@
+Reverse Polish Notation
+=======================
+
+You've never done it until you've done it reverse polish.
+
+I don't know what that means, but check this out on [reverse polish notation](http://en.wikipedia.org/wiki/Reverse_Polish_notation).
+
+Reverse polish notation is a mathematical notation in which every operator follows all of its operands. For example:
+```
+3 4 + = 7  
+4 2 / = 2  
+10 7 2 - * 5 / = 10
+```
+Write a program that accepts a RPN equation as a command line argument, such that you would execute your program:
+```
+python3 rpn_calc.py 10 9 - 5 +
+```
+Which would then return you 6, the result of that equation.
+
+#### ARGV
+
+To run the program like this you need to import the sys library and access sys.argv.
+
+ARGV gives us the arguments used to launch the program as an array. The first position is always the application name / file. The next are all others divided by spaces.
+
+Read about sys.argv [here](http://www.pythonforbeginners.com/system/python-sys-argv)
+
+Sandbox with it, so you know what you are getting as an input.
+
+Here's a nice hint - we can "slice" arrays in Python like in JS just by doing:
+```
+>>> array = ['hi', 'wut', 'm8', 'lol', 'doge']
+>>> array[2:4]
+['m8', 'lol']
+```
+
+#### Testing
+
+Write some assert statements after you've solved the challenge.
+
+**NOTE**: You might need to escape the multiplication operator * when you pass it in. You can escape things by adding a backslash (\) in front of it.

1- python/11-factorial/README.md

@@ -0,0 +1,18 @@
+Factorial!
+==========
+
+Get the factorial of a given number. Using sys.argv, pass in a number and return it's factorial.
+
+To calculate the factorial of 5, for example, the equation is ```5 * 4 * 3 * 2 * 1 = 120```
+
+#### Iterative
+
+Write the equation iteratively, using a for or while loop. How to use loops in Python is well documented [here](https://docs.python.org/3.4/tutorial/controlflow.html)
+
+#### Bonus
+
+Write this function [recursively](http://en.wikibooks.org/wiki/Non-Programmer%27s_Tutorial_for_Python_3/Recursion). If you run into difficulty, think about how your stack will develop as your function recurses and remember to define your base case.
+
+Write assert statements to test your code in both cases.
+
+[Wikipedia on Factorials](http://en.wikipedia.org/wiki/Factorial)

1- python/11-factorial/factorial_iterative.py

@@ -0,0 +1,13 @@
+import sys
+
+def factorial(num):
+
+
+
+
+
+
+#write assert statements below
+
+assert(factorial(5) == 120), "5! should return 120"
+assert(factorial(20) == 2432902008176640000), "Well that escalated quickly"

1- python/11-factorial/factorial_recursive.py

@@ -0,0 +1,13 @@
+import sys
+
+def factorial(num):
+
+
+
+
+
+
+#write assert statements below
+
+assert(factorial(5) == 120), "5! should return 120"
+assert(factorial(20) == 2432902008176640000), "Well that escalated quickly"

1- python/12-is-palindrome/README.md

@@ -0,0 +1,13 @@
+Sarah Palindrome
+================
+
+Write a function that when given a word or sentence returns True if it is a palindrome and False if it isn't.
+
+Your program should accept input using sys.argv.
+```
+python3 palindrome.py Taco Cat # returns true
+```
+You will want to make this case insensitive (Cat == cat). You can do this by make all letters upper or lower case.  
+You will also want to use strip to remove all non word characters.
+
+Make the asserts pass and write more assert statements to test your code.

1- python/12-is-palindrome/palindrome.py

@@ -0,0 +1,12 @@
+import sys
+
+def is_palindrome(string):
+	pass
+
+
+
+
+#TESTS
+
+assert(is_palindrome("greg is the man") == False), "Presumably random sentence should return false"
+assert(is_palindrome("No Mel Gibson is a casino's big lemon") == True), "Palindrome should return true"

1- python/13-string-scramble/README.md

@@ -0,0 +1,9 @@
+String Scramble
+===============
+
+Write an algorithm that takes a string, and checks if all of the letters of the string are inside of a second string. For example:
+```
+string_scramble('hello', 'goodbye') # False  
+string_scramble('hello', 'lolfrhe') # True
+```
+Write your own assert statements.

1- python/13-string-scramble/scramble.py

@@ -0,0 +1,2 @@
+def string_scramble(string_one, string_two):
+	pass

1- python/14-largest-prime-factor/README.md

@@ -0,0 +1,10 @@
+Largest Prime Factor
+====================
+
+Write a function that takes a number as input, and returns the largest prime factor of a given number. If the number is prime itself, then it's largest prime factor is itself.
+```
+largest_prime(15)  # 5
+largest_prime(18)  # 3
+largest_prime(19)  # 19
+largest_prime(302) # 151
+```

1- python/14-largest-prime-factor/primes.py

@@ -0,0 +1 @@
+def largest_prime(number):

1- python/15-sieve-of-eratosthenes/README.md

@@ -0,0 +1,12 @@
+Sieve of Eratosthenes
+=====================
+
+The [Sieve of Eratosthenes](http://en.wikipedia.org/wiki/Sieve_of_Eratosthenes) is an algorithm used to determine all the prime numbers below a given number.
+
+#### Pseudocode
+
+Use the wikipedia explanation above (under the "Example" header) to write some pseudocode to solve this problem. Here is a [pseudocode refresher](http://www.unf.edu/~broggio/cop2221/2221pseu.htm). Write this in comments at the top of the sieve.py file.
+
+#### Solve in Python
+
+Write a function that implements this algorithm to determine all the prime numbers below a given number. The program should take a number as an argument, and return an array of all the primes.

1- python/15-sieve-of-eratosthenes/sieve.py

@@ -0,0 +1,6 @@
+###PSEUDOCODE HERE
+
+
+
+
+###real code below

1- python/16-benchmark/README.md

@@ -0,0 +1,20 @@
+Benchmarking your Code
+=======================
+
+How fast is your code? Do you want to find out? Yes!
+
+#### Write a Benchmark function
+
+Write a Benchmark function that takes the following as inputs:  
+* the function you want to benchmark  
+* the amount of times you want it to run  
+
+Have your Benchmark function return the total amount of time it took.
+
+The datetime library is imported at the top of the file. Look it up and how it's going to help you solve this problem. Do not import any other libraries.
+
+#### Test your Factorial Functions
+
+Test your Iterative Factorial function versus your recursive - which is faster??
+
+Import this file into at least one other of your assignments and test some of your functions.

1- python/16-benchmark/benchmark.py

@@ -0,0 +1,6 @@
+import datetime
+import imp
+##what is this code doing? figure out how to call your fibonacci functions in this file.
+fibonacci = imp.load_source('fibonacci', '../2-is-fibonacci/fibonacci.py')
+
+def benchmark(func, times):

1- python/2-py-dictionaries/README.md

@@ -0,0 +1,21 @@
+Python Dictionaries In Depth
+============================
+
+Model these people as dictionaries:
+
+Name: Michaela  
+Gender: Female  
+Height in cm: 178  
+Job: Visual Artist  
+Parents: Aimee, Louis  
+Pets: Fezzy, Rufus  
+
+Name: Steve  
+Gender: Male  
+Height in cm: 160  
+Job: Graphic Designer  
+Nickname: The Cow  
+Friends: Stephen, Stephanie, Stefan  
+Jobs: Graphic Designer at Acme Corp, Bartender at Banter  
+
+Print out the keys and values of each person object. Look into iterating over dictionaries in Python

1- python/3-conditionals-and-for-loops/README.md

@@ -0,0 +1,76 @@
+Conditionals and For Loops
+==========================
+
+Get ready for FizzBuzz, again!
+
+#### For Loop
+
+For loop syntax in Python is slightly different.  
+The 'for in' pattern is still available in Python:  
+```
+>>> for thing in list:
+... 	print(thing)
+```
+Python also has what's known as a range:
+```
+>>> lst = ['a', 'b', 'c']
+>>> for i in range(len(lst)):
+... 	print(i)
+0
+1
+2
+```
+If we wanted to print the element in the list, rather than the index, we could do it like this:  
+```
+>>> lst = ['a', 'b', 'c']
+>>> for i in range(len(lst)):
+... 	print(lst[i])
+a
+b
+c
+```
+With range, you have the option to choose the start and stop points, as well as increment.  
+```
+>>> for i in range(2, 10, 2):
+... 	print(i)
+2
+4
+6
+8
+```
+As you can see, the end point is not included as part of the range.
+
+Fire up your Python interpreter and try it out.
+
+#### Conditionals - Switch
+
+Switch statements are basically the same in Python. You can write if statements in two ways:
+```
+if(some condition):
+	do something
+```
+or
+```
+if some condition:
+	do something
+```
+for else clauses, it's also pretty similar.  
+Here is an example:  
+```
+if condition:
+	do something
+elif another condition:
+	do something else
+else:
+	catch all of the other possibilities
+```
+
+#### FizzBuzz
+
+Time for FizzBuzz in Python.
+
+Write code that does the following:  
+* if i is divisible by 3, print "Fizz"
+* if i is divisible by 5, print "Buzz"
+* if i is divisible by 3 & 5, print "FizzBuzz"
+* if i is not divisble by 3 or 5, print i

1- python/3-conditionals-and-for-loops/fizzbuzz.py

@@ -0,0 +1,11 @@
+def fizzbizz(num):
+    pass
+
+
+def assertion(actual, expected):
+    print(str(actual) + " == " + str(expected) + " : " + str(actual==expected))
+
+assertion(fizzbuzz(33), "Fizz")
+assertion(fizzbuzz(20), "Buzz")
+assertion(fizzbuzz(30), "FizzBuzz")
+assertion(fizzbuzz(32), 32)

1- python/4-while-loops/README.md

@@ -0,0 +1,40 @@
+While Loops in Python
+=====================
+
+A while loop iterates until a condition is no longer true. For example:
+```
+i = 0
+while i < 10:
+	print(i)
+	i += 1
+```
+Be careful with while loops. If your while loop doesn't have a way to end, it will go on until it crashes.
+```
+i = 10
+while i > 5:
+	print(i)
+	i += 1
+```
+
+#### Multiplication Tables
+
+Using any loop / loops of your choosing, write code that prints the multiplication tables up to a number
+
+Your return should look something like this:  
+```
+# userinput = 7
+
+0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 |  
+1 | 1 | 2 | 3 | 4 | 5 | 6 | 7 |  
+2 | 2 | 4 | 6 | 8 | 10| 12| 14|  
+3 | 3 | 6 | 9 | 12| 15| 18| 21|  
+4 | 4 | 8 | 12| 16| 20| 24| 28|  
+5 | 5 | 10| 15| 20| 25| 30| 35|  
+6 | 6 | 12| 18| 24| 30| 36| 42|  
+7 | 7 | 14| 21| 28| 35| 42| 49|
+```
+Python does not change data types for you. If you would like to mix an integer and "|" into a string, you have to explicitly change the integer into a string. the method str() will do this for you.
+```
+1 + "c" # this won't work
+str(1) + "c" # this will be "1c"
+```

1- python/4-while-loops/multiply.py

@@ -0,0 +1,2 @@
+def multiplication_table(number):
+    pass

1- python/5-triangles-part-1/README.md

@@ -0,0 +1,17 @@
+Print a Triangle
+================
+
+Using nested for loops, print a triangle like so:  
+```
+>>> triangle(10)
+*  
+**  
+***  
+****  
+*****  
+******  
+*******  
+********  
+*********  
+**********  
+```

1- python/5-triangles-part-1/triangle.py

@@ -0,0 +1,2 @@
+def triangle(num):
+    pass

1- python/6-triangles-part-2/README.md

@@ -0,0 +1,20 @@
+Print a Mario End of Level Stairs
+=================================
+
+Remember this from Mario?  
+![Mario stairs](http://www.nintendoninja.com/images/stairs.png)
+
+Create it!
+```
+>>> triangle(10)
+         *
+        **
+       ***
+      ****
+     *****
+    ******
+   *******
+  ********
+ *********
+**********
+```

1- python/6-triangles-part-2/triangle.py

@@ -0,0 +1,2 @@
+def mario_triangle(num):
+    pass

1- python/7-regex-intro/README.md

@@ -0,0 +1,29 @@
+Regular Expressions
+===================
+
+Regular Expressions (regex for short) are a way to represent patterns in strings. They aren't as bad as people make them out to be. When used on the right problem, they are a great solution.
+
+Go to [Rubular](http://rubular.com/). We're going to sandbox inside it a bit to get acquainted with regex syntax. At the bottom of the page is a regex cheat sheet.  
+Note: Depending on the language, you may have to escape certain characters. For example, instead of `a{3}`, you may have to type `a\{3\}`.  
+Also, be careful with periods (`.`). A period means any character in regex, so you have to escape it if you want to pattern match a period.
+
+Here are some examples of regex and matching string patterns:  
+* `a{3}` => `aaa`
+* `a{3,}` => `aaaaaaaa`
+* `[a-z]` => any lowercase letter
+* `[A-Z]{4,6}` => between 4 and 6 uppercase letters, ex. `FASDV`
+* `.` => any character
+* `\w\.` => `_.`
+* `hello\d?` => `hello` or `hello5`
+* `[a-nO-Z]*` => abcOZZ
+
+Make a regex to match each of these strings:  
+* match 'byte academy' 3 different ways
+* an 8 character password, do not allow non word characters
+* an 8 character password that has at least 1 number and 1 capital letter
+
+
+* byteacademy@example.com
+* byte.academy@example.com
+* byteacademy22@example.co.uk  
+See if you can get all three with 1 regex, but not invalid emails (not having an @, etc...)

1- python/9a-temperature-converter/README.md

@@ -0,0 +1,14 @@
+Temperature Converters
+======================
+
+#### Fahrenheit to Celsius
+Write a function that converts fahrenheit temperatures to celsius. The equation to do this is ```C = (F - 32) * 5/9```.
+
+#### Celsius to Fahrenheit
+
+Write a similar function that converts celsius to fahrenheit.  
+The equation for this is ```F = (C * 9/5) + 32```.
+
+#### Testing
+
+Make sure the tests pass. Write 3 of your own tests.

1- python/9a-temperature-converter/temp.py

@@ -0,0 +1,12 @@
+def fahrenheit_to_celsius(temp):
+	pass
+
+def celsius_to_fahrenheit(temp):
+	pass
+
+
+assert(fahrenheit_to_celsius(32) == 0), "Freezing temp should return true"
+assert(fahrenheit_to_celsius(212) == 100), "Boiling temp should return true"
+assert(fahrenheit_to_celsius(-13) == -25), "Negative number should return true"
+assert(celsius_to_fahrenheit(37) == 98.6), "Body temp should return true"
+assert(celsius_to_fahrenheit(10) == 50), "Random temp should return true"

1- python/9b-is-fibonacci/README.md

@@ -0,0 +1,15 @@
+The Fibonacci Sequence
+======================
+
+The fibonacci sequence are the numbers in the following integer sequence:  
+```
+0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, ...and so on
+```
+Write a function that detects whether its input is a fibonacci number or not.
+
+Make sure the assert statements all pass. Write two of your own Python assert statements.
+
+## Resources
+
+[Fibonacci Numbers](http://en.wikipedia.org/wiki/Fibonacci_number)  
+[Fibonacci in Nature](http://jwilson.coe.uga.edu/emat6680/parveen/fib_nature.htm)  

1- python/9b-is-fibonacci/fibonacci.py

@@ -0,0 +1,16 @@
+def fibonacci(num):
+	pass
+
+
+
+# TESTS
+import random
+def random_fibonacci():
+	fib = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584, 4181, 6765, 10946, 17711, 28657, 46368, 75025]
+	return random.sample(fib, 1)[0]
+
+assert(fibonacci(random_fibonacci()) == True), "Random Fibonacci number should return true"
+assert(fibonacci(50) == False), "50 should return false"
+assert(fibonacci(97450) == False), "50 should return false"
+assert(fibonacci(1) == True), "1 should return true"
+assert(fibonacci(7540113804746346429) == True), "A massive number in sequence should return true"

2- javascript/1-js-variables/README.md

@@ -0,0 +1,18 @@
+Javascript Variables, Lists, and Objects
+========================================
+
+Create a variable named byte and set it equal to "school".
+
+Create an array named instructors and have it contain the strings "Armen", "Chris", and "Greg"
+
+Create an array named students and have it contain the strings "Adolfo", "Benny", "Billy", "Brendan"
+
+Create an object with the following key-value pairs- "byteAcademy":byte, "instructors":instructors, "students":students
+
+Append the contents of the object to the "printout" div element. It should read like this:
+
+byteAcademy - School
+
+instructors - Armen, Chris, Greg
+
+students - Adolfo, Benny, Billy, Brendan

2- javascript/1-js-variables/index.html

@@ -0,0 +1,18 @@
+<!doctype HTML>
+<html>
+	<head>
+		<link rel="stylesheet" type="text/css" href="reset.css">
+		<link rel="stylesheet" type="text/css" href="main.css">
+		<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+		<script type="text/javascript" src="main.js"></script>
+	</head>
+	<body>
+	<div class = "container">
+		<nav id="top">
+			<h1>Javascript Variables and Objects</h1>
+		</nav>
+			<div id = "printout"></div>
+	</div>
+	</body>
+	</html>
+

2- javascript/1-js-variables/main.css

@@ -0,0 +1,36 @@
+body{
+	background-color: #D1D1D1
+}
+
+nav{
+	position: absolute;
+	background-color: black;
+	width: 100%;
+	height: 4em;
+	top: 0;
+	text-align: center;
+	line-height: 4em;
+}
+
+nav h1{
+	font-size: 3em;
+	font-family: monospace;
+	color: white;
+}
+
+#printout{
+	width: 800px;
+	min-height: 1000px;
+	background-color: white;
+	margin: 5em auto 0 auto;
+	color: black;
+	text-indent: 1em;
+}
+
+#printout p{
+	font-size: 2em;
+}
+
+#printout p:nth-child(even) {
+	background-color: #D1D1D1;
+}

2- javascript/1-js-variables/main.js

@@ -0,0 +1,8 @@
+// set your variables below
+
+// all jquery dom actions can only be called inside document ready. Print your variables
+// inside document ready.
+
+$(document).ready(function(){
+
+})

2- javascript/1-js-variables/reset.css

@@ -0,0 +1,47 @@
+/**
+ * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
+ * http://cssreset.com
+ */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

2- javascript/10-bank-accounts/README.md

@@ -0,0 +1,11 @@
+Banks and Bank Accounts
+=======================
+
+Make a bank object that holds bank accounts. Your bank accounts should have a balance and account number (store the account number as a string).  
+Make two bank accounts that are keys in the Bank object.  
+With the bank accounts, you should be able to:  
+* make a deposit
+* make a withdrawal
+* Not be able to withdraw more than the amount in the account
+* See your current balance
+

2- javascript/11-bank-accounts-dom/README.md

@@ -0,0 +1,18 @@
+Bank Accounts 2
+===============
+
+In this assignment, you will be taking your code from Bank Accounts 1 and applying it to the DOM.  
+This is not an easy assignment. Work together and ask for help.  
+* Take a look through the code and see what you've been given so far. There is a modal ready to use in the html. You will be using it later in the assignment.  
+* You have a form on the left to create a bank account. Make a bank account object using the inputs from the form.
+* Append the bank account name to the 'Bank Accounts' list.
+* When you click on the name of a bank account, it should show the modal, and hide the container.
+* In the modal, show the user's account name and balance in their respective divs (given to you in the html)
+* Use the deposit and withdrawal forms to do their respective functions to the bank account.
+* Upon deposit, withdrawal, or 'I'm done', hide the modal, and show the container again.
+* _stretch_: When the modal pops up, rather than hiding the container, make it fall to the background and be less visible (opacity, visibility, color... your choice). Add error checking. Clear the forms after submit. See if there is any other functionality you think this page should have. Show off.  
+
+Here is some code to create account numbers:  
+```
+this.accountNumber = (Math.floor(Math.random() * (9999999999 - 1000000000)) + 1000000000).toString()
+```

2- javascript/11-bank-accounts-dom/application.js

@@ -0,0 +1,9 @@
+(function($, window, document) {
+  $(function(){
+    var Bank = {}
+    $('#account-modal').hide()
+    // your code here
+  });
+}(window.jQuery, window, document));
+
+// your code from bank accounts 1 here

2- javascript/11-bank-accounts-dom/index.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<link rel="stylesheet" type="text/css" href="main.css">
+	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+	<script type="text/javascript" src="application.js"></script>
+</head>
+<body>
+	<div id="container">
+		<form id="create-account" action="#" method="post">
+			<h2>Make An Account</h2>
+			<input type="text" name="accountName" placeholder="Enter your account name (camelCase plz (: )"><br><br>
+			<input type="text" name="accountBalance" placeholder="Enter your starting balance"><br><br>
+			<input type="submit" class="button" value="Submit">
+		</form>
+		<div id="bank">
+			<h2>Bank Accounts</h2>
+			<ul id="account-list"></ul>
+		</div>
+	</div>
+
+	<div id="account-modal">
+		<div id="account-name"></div>
+		<div id="account-balance"></div>
+
+		<form id="deposit">
+			<input type="text" name="deposit-amount" placeholder="Deposit amount">
+			<input type="submit" class="button" value="Deposit into account">
+		</form>
+		<br>
+		<form id="withdrawal">
+			<input type="text" name="withdrawal-amount" placeholder="Withdrawal amount">
+			<input type="submit" class="button" value="Withdraw from account">
+		</form>
+		<br>
+		<button id="cancel-modal">I'm done</button>
+	</div>
+</body>
+</html>

2- javascript/11-bank-accounts-dom/main.css

@@ -0,0 +1,71 @@
+body {
+  margin: 0 auto;
+  font-size: 20px;
+}
+
+#container {
+  margin: 5% 10%;
+}
+
+li {
+  list-style: none;
+  margin-bottom: 1em;
+}
+
+input[type=text] {
+  width: 300px;
+  height: 24px;
+}
+
+#create-account {
+  float: left;
+  width: 45%;
+}
+
+#bank {
+  float: left;
+  width: 40%;
+  text-align: center;
+}
+
+#account {
+  float: left;
+  width: 30%;
+}
+
+#account-name {
+  float: left;
+  width: 20%;
+  padding: 2em 0 0 4em;
+}
+
+#account-balance {
+  float: left;
+  width: 20%;
+  padding: 2em 0 0 4em;
+}
+
+#account-modal {
+  position: absolute;
+  width: 50%;
+  top: 15%;
+  left: 25%;
+  border: 1px #222 solid;
+}
+
+#deposit {
+  clear: both;
+  padding: 4em 0 0 4em;
+}
+
+#withdrawal {
+  padding: 4em 0 0 4em;
+  padding-top: 10%;
+}
+
+#cancel-modal {
+  clear: both;
+  float: right;
+  margin: 2em 10% 2em 0;
+  font-size: 1.3em;
+}

2- javascript/2-js-objects/README.md

@@ -0,0 +1,21 @@
+Javascript Objects In Depth
+===========================
+
+Model these people as objects:
+
+Name: Michaela  
+Gender: Female  
+Height in cm: 178  
+Job: Visual Artist  
+Parents: Aimee, Louis  
+Pets: Fezzy, Rufus  
+
+Name: Steve  
+Gender: Male  
+Height in cm: 160  
+Job: Graphic Designer  
+Nickname: The Cow  
+Friends: Stephen, Stephanie, Stefan  
+Jobs: Graphic Designer at Acme Corp, Bartender at Banter  
+
+Write them to the "printout" div similarly to how they are listed above.

2- javascript/2-js-objects/index.html

@@ -0,0 +1,18 @@
+<!doctype HTML>
+<html>
+	<head>
+		<link rel="stylesheet" type="text/css" href="reset.css">
+		<link rel="stylesheet" type="text/css" href="main.css">
+		<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+		<script type="text/javascript" src="main.js"></script>
+	</head>
+	<body>
+	<div class = "container">
+		<nav id="top">
+			<h1>Javascript Objects In Depth</h1>
+		</nav>
+			<div id = "printout"></div>
+	</div>
+	</body>
+	</html>
+

2- javascript/2-js-objects/main.css

@@ -0,0 +1,36 @@
+body{
+	background-color: #D1D1D1
+}
+
+nav{
+	position: absolute;
+	background-color: black;
+	width: 100%;
+	height: 4em;
+	top: 0;
+	text-align: center;
+	line-height: 4em;
+}
+
+nav h1{
+	font-size: 3em;
+	font-family: monospace;
+	color: white;
+}
+
+#printout{
+	width: 800px;
+	min-height: 1000px;
+	background-color: white;
+	margin: 5em auto 0 auto;
+	color: black;
+	text-indent: 1em;
+}
+
+#printout p{
+	font-size: 2em;
+}
+
+#printout p:nth-child(even) {
+	background-color: #D1D1D1;
+}

2- javascript/2-js-objects/main.js

@@ -0,0 +1,8 @@
+// set your variables below
+
+// all jquery dom actions can only be called inside document ready. Print your variables
+// inside document ready.
+
+$(document).ready(function(){
+
+})

2- javascript/2-js-objects/reset.css

@@ -0,0 +1,47 @@
+/**
+ * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
+ * http://cssreset.com
+ */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

2- javascript/3-conditionals-and-for-loops/README.md

@@ -0,0 +1,71 @@
+Conditionals and For Loops
+==========================
+
+Get ready for FizzBuzz!
+
+This is a classic programming test - that yes, you will actually see at job interviews.
+
+It basically just checks if you can write a for loop and if you know what [modulo](http://en.wikipedia.org/wiki/Modulo_operation) is.
+
+#### For Loop
+
+This is the most basic loop we write in Javascript, and most languages for that matter. The ubiquitous For Loop.
+```
+for(var i = 0; i<=100; i++){ console.log(x) }
+```
+In the first argument, we declare an incrementing variable, i, and where it will start. We could have called it anything.
+
+In the second argument, we state the conditions under which the following code should be executing. In this case, it is while i is less than or equal to 100.
+
+In the third argument, we say that every time the code is run, i should increment by 1. i++ is shorthand, also known as [syntactic sugar](http://en.wikipedia.org/wiki/Syntactic_sugar) for i += 1, or  i = i + 1. They all do the same thing.
+
+To get a slightly different view of it, we could do it this way.
+```
+for(var x = 500; x > 150; x-=5){ console.log(x) }
+```
+Try it in your browser or node console and watch it work. What is the last number it prints? Why?
+
+#### Conditionals - If / Else
+
+The most simple conditional statement is the if statement. This is also ubiquitous across many programming languages.
+
+Basically it is written like this:
+```
+if(some condition){
+	do this
+}
+```
+You can make it more powerful by specifying an else. This is a catch all for things to do if the first condition isnt met. For example:
+```
+if(cute store clerk has brown hair){
+	give phone number
+} else {
+	leave store
+}
+```
+Finally, we can specify multiple outcomes using an else if.
+```
+if(cute clerk has brown hair){
+	give phone number
+} elseif(cute clerk has blond hair) {
+	get phone number
+} else {
+	buy playstation
+}
+```
+Instead of this plain english example, also known as [Pseudocode](http://en.wikipedia.org/wiki/Pseudocode)
+
+Get the idea?
+
+#### Fizzbuzz
+
+Ok, now onto FizzBuzz.
+
+Open the main.js file and find the loop inside the document ready.
+
+Write code that does the following:  
+* if i is divisible by 3, append a line that reads "Fizz"
+* if i is divisible by 5, append a line that reads "Buzz"
+* if i is divisible by 3 & 5, append a line that reads "FizzBuzz"
+
+All this should be done as usual, to the printout div.

2- javascript/3-conditionals-and-for-loops/index.html

@@ -0,0 +1,18 @@
+<!doctype HTML>
+<html>
+	<head>
+		<link rel="stylesheet" type="text/css" href="reset.css">
+		<link rel="stylesheet" type="text/css" href="main.css">
+		<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+		<script type="text/javascript" src="main.js"></script>
+	</head>
+	<body>
+	<div class = "container">
+		<nav id="top">
+			<h1>FizzBuzz</h1>
+		</nav>
+			<div id = "printout"></div>
+	</div>
+	</body>
+	</html>
+

2- javascript/3-conditionals-and-for-loops/main.css

@@ -0,0 +1,36 @@
+body{
+	background-color: #D1D1D1
+}
+
+nav{
+	position: absolute;
+	background-color: black;
+	width: 100%;
+	height: 4em;
+	top: 0;
+	text-align: center;
+	line-height: 4em;
+}
+
+nav h1{
+	font-size: 3em;
+	font-family: monospace;
+	color: white;
+}
+
+#printout{
+	width: 800px;
+	min-height: 1000px;
+	background-color: white;
+	margin: 5em auto 0 auto;
+	color: black;
+	text-indent: 1em;
+}
+
+#printout p{
+	font-size: 2em;
+}
+
+#printout p:nth-child(even) {
+	background-color: #D1D1D1;
+}

2- javascript/3-conditionals-and-for-loops/main.js

@@ -0,0 +1,12 @@
+// set your variables below
+
+// all jquery dom actions can only be called inside document ready. Print your variables
+// inside document ready.
+
+$(document).ready(function(){
+
+	for(var i = 0; i<=100; i++){
+		
+	}
+
+})

2- javascript/3-conditionals-and-for-loops/reset.css

@@ -0,0 +1,47 @@
+/**
+ * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
+ * http://cssreset.com
+ */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

2- javascript/4-while-loops-and-for-each/README.md

@@ -0,0 +1,72 @@
+While and For In Loops
+========================
+
+In this challenge, we're going to write a while loop, a For In loop, and nest them.
+
+#### While Loops
+
+A while loop iterates until a condition is no longer true. For example:  
+```
+while(greg == alive){
+	live_year(1)
+	age++
+}
+```
+Seemingly, a while loop could be endless. In that case, we have to break it. Take the following example:  
+```
+i = 0
+
+while(true){
+	i++
+	print("I'm an endless loop")
+	if(i >= 50){
+		break;
+	}
+}
+```
+This will run exactly 50 times.
+
+#### For In
+
+A For In loop iterates through each index in the data structure. In an array, an index is an integer, that starts at 0. Take this example:  
+```
+var array = ['john', 'bobby', 'homa', 'stevie', 'rob']
+
+for(var i in array) {
+	console.log(i) // prints 0, 1, 2, 3, 4
+}
+```
+In an object however, the index is a string. Check this out:  
+```
+var obj = {'john': 'student', 'bobby': 'programmer', 'homa': 'actress', 'stevie': 'gamer'}
+
+for(var k in obj) {
+	console.log(k) // prints 'john', 'bobby', 'homa', 'stevie'
+}
+```
+#### Sandbox
+
+Try this on your own in your node console or browser console. Declare some objects, iterate through them, print them out.
+
+Also check out [.forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
+
+#### Multiplication Tables
+
+Using any loop / loops of your choosing, write code that prints the multiplication tables up to a number input by the user in a form.
+
+Create the form that gets the user input yourself above the #printout div, and append the result to the printout div.
+
+Bonus if you actually use a table.
+
+Your return should look something like this:
+```
+// userinput = 7
+```
+0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 |  
+1 | 1 | 2 | 3 | 4 | 5 | 6 | 7 |  
+2 | 2 | 4 | 6 | 8 | 10| 12| 14|  
+3 | 3 | 6 | 9 | 12| 15| 18| 21|  
+4 | 4 | 8 | 12| 16| 20| 24| 28|  
+5 | 5 | 10| 15| 20| 25| 30| 35|  
+6 | 6 | 12| 18| 24| 30| 36| 42|  
+7 | 7 | 14| 21| 28| 35| 42| 49|

2- javascript/4-while-loops-and-for-each/index.html

@@ -0,0 +1,18 @@
+<!doctype HTML>
+<html>
+	<head>
+		<link rel="stylesheet" type="text/css" href="reset.css">
+		<link rel="stylesheet" type="text/css" href="main.css">
+		<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+		<script type="text/javascript" src="main.js"></script>
+	</head>
+	<body>
+	<div class = "container">
+		<nav id="top">
+			<h1>Multiplication Tables</h1>
+		</nav>
+			<div id = "printout"></div>
+	</div>
+	</body>
+	</html>
+

2- javascript/4-while-loops-and-for-each/main.css

@@ -0,0 +1,36 @@
+body{
+	background-color: #D1D1D1
+}
+
+nav{
+	position: absolute;
+	background-color: black;
+	width: 100%;
+	height: 4em;
+	top: 0;
+	text-align: center;
+	line-height: 4em;
+}
+
+nav h1{
+	font-size: 3em;
+	font-family: monospace;
+	color: white;
+}
+
+#printout{
+	width: 800px;
+	min-height: 1000px;
+	background-color: white;
+	margin: 5em auto 0 auto;
+	color: black;
+	text-indent: 1em;
+}
+
+#printout p{
+	font-size: 2em;
+}
+
+#printout p:nth-child(even) {
+	background-color: #D1D1D1;
+}

2- javascript/4-while-loops-and-for-each/main.js

@@ -0,0 +1,8 @@
+// set your variables below
+
+// all jquery dom actions can only be called inside document ready. Print your variables
+// inside document ready.
+
+$(document).ready(function(){
+
+})

2- javascript/4-while-loops-and-for-each/reset.css

@@ -0,0 +1,47 @@
+/**
+ * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
+ * http://cssreset.com
+ */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

2- javascript/5-jquery-basics/README.md

@@ -0,0 +1,18 @@
+JQuery Basics
+=============
+
+JQuery is a powerful front-end javascript library that is used on virtually 100% of modern websites. The JQuery codebase is extremely [well documented with explanations and examples](http://api.jquery.com/) Don't be afraid to dig in.
+
+When you open index.html you'll find 3 black boxes, inside a 3 column layout.
+
+Your task is the following:
+
+* Add 3 buttons to each column, under the boxes and text. The buttons should be centered and evenly spaced. Label each button with a color of your choice.
+* Using JQuery's .css method, change the color of the appropriate box to the color you labeled the button when the button is clicked.
+* Also adjust the text under each box to tell the user which color the box currently is.
+* Make it so when you click the box, it goes back to black and alters the message appropriately.
+* Add another button for each box. Label it "Animate!" or whatever.
+* Using JQuery's .animate method, make one box much taller, slowly. Make one box much skinnier, fast. And make one box completely disappear.
+* Now make it so when you click the animate button a second time it will go back to the way it was.
+
+This is just some of the fun you can have in JQuery. What else can you do?

2- javascript/5-jquery-basics/index.html

@@ -0,0 +1,30 @@
+<!doctype HTML>
+<html>
+	<head>
+		<link rel="stylesheet" type="text/css" href="reset.css">
+		<link rel="stylesheet" type="text/css" href="main.css">
+		<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+		<script type="text/javascript" src="main.js"></script>
+	</head>
+	<body>
+		<nav id="top">
+			<h1>JQuery Basics</h1>
+		</nav>
+		<div class = "row">
+			<div class = "col">
+				<div class = "box" id = "box-1"></div>
+				<p>The box color is <span id = "color-1"></span></p>
+			</div>
+			<div class = "col">
+				<div class = "box" id = "box-2"></div>
+				<p>The box color is <span id = "color-2"></span></p>
+			</div>
+			<div class = "col">
+				<div class = "box" id = "box-3"></div>
+				<p>The box color is <span id = "color-3"></span></p>
+			</div>
+		</div>
+		</div>
+	</body>
+	</html>
+

2- javascript/5-jquery-basics/main.css

@@ -0,0 +1,41 @@
+body{
+	background-color: #D1D1D1
+}
+
+nav{
+	position: absolute;
+	background-color: black;
+	width: 100%;
+	height: 4em;
+	top: 0;
+	text-align: center;
+	line-height: 4em;
+}
+
+nav h1{
+	font-size: 3em;
+	font-family: monospace;
+	color: white;
+}
+
+.row{
+	width: 80%;
+	margin: 10em auto 0 auto;
+}
+
+.col{
+	float: left;
+	width: 30%;
+	margin: 0 1.5% 0 1.5%;
+}
+
+.box{
+	height: 15em;
+	width: 100%;
+	background-color: black;
+}
+
+.col p{
+	display: block;
+	margin-top: 1em;
+}

2- javascript/5-jquery-basics/main.js

@@ -0,0 +1,6 @@
+// all jquery dom actions can only be called inside document ready.
+
+$(document).ready(function(){
+	
+
+})

2- javascript/5-jquery-basics/reset.css

@@ -0,0 +1,47 @@
+/**
+ * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
+ * http://cssreset.com
+ */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

2- javascript/6-more-jquery-basics/README.md

@@ -0,0 +1,13 @@
+Intro to jQuery
+===============
+
+In this assignment, you will be dynamically adding list elements with the comments from the form.  
+
+The flow is something like this - the user writes in the form and presses the submit button. That text is added to the page, under the form. The page is not refreshed, and the user can continue to add items.
+
+Research the following to accomplish this challenge.
+
+* jQuery .append
+* Form inputs and how to access their values
+* jQuery .on (in this assignment, you will be using .on('submit'))
+* preventDefault  

2- javascript/6-more-jquery-basics/application.js

@@ -0,0 +1,5 @@
+(function($, window, document) {
+  $(function(){
+    //your code here
+  });
+}(window.jQuery, window, document));

2- javascript/6-more-jquery-basics/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="main.css">
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+  <script type="text/javascript" src="application.js"></script>
+</head>
+<body>
+  <form id="post-comment" action="#" method="post">
+    <input type="text" name="comment" placeholder="Type your comment.">
+    <input type="submit" value="Submit">
+  </form>
+  <ul id="comments"></ul>
+</body>
+</html>

2- javascript/6-more-jquery-basics/main.css

@@ -0,0 +1,19 @@
+body {
+  margin: 0 auto;
+  font-size: 20px;
+}
+
+#post-comment {
+  margin-top: 20px;
+  text-align: center;
+}
+li {
+  list-style: none;
+  height: 30px;
+  width: 100%;
+  padding: 1em;
+}
+
+li:nth-child(odd) {
+  background-color: lightgrey;
+}

2- javascript/7-simple-loops/README.md

@@ -0,0 +1,8 @@
+Simple Loops and Iteration
+==========================
+
+You are given an array (challengeArray) at the top. Using a loop, compare the values inside. If a value in the list is "Dog", switch it to "Burger".
+
+#### Assertion
+
+Make sure your results are printing so you know its working- because you're not going to get much from the assert test. Why is that? Google it and write the answer, as well as your own.

2- javascript/7-simple-loops/simple-loops.js

@@ -0,0 +1,24 @@
+//Do not edit this list
+
+var challengeArray = ["New York", "Dog", "Philly", "Dog", "Jersey", "Dog", "Cali", "Dog"];
+
+// your code goes in this function
+
+function getDogs(array){
+
+}
+
+// call the function
+
+
+
+// do not edit the assert statements
+
+function assert(testnum, bool){
+	console.log('Test ' + testnum + ": " + bool)
+}
+
+assert(1,  challengeArray === ['New York', 'Burger', 'Philly', 'Burger', 'Jersey', 'Burger', 'Cali', 'Burger']);
+
+//Make sure you have the correct array - is the assert test working? Why not? Google!
+//Write a custom test that allows it to prove challengeArray's equality.

2- javascript/8-todo-list/README.md

@@ -0,0 +1,24 @@
+To Do List
+==========
+
+When it comes to learning new web languages, the todo list has become a "Hello World". So expect to revisit this in Python.
+
+But until then, we will do it in front-end Javascript.
+
+You will find the toDoList prototype and constructor at the top of the main.js file.
+
+#### Create the List
+
+The add method adds a todo to the list, using the text input and form.  
+
+The complete method marks the appropriate todo item complete. The user wants to click the item itself and strike the item, noting it done.  
+
+Use toggle to toggle it done struck and unstruck.  
+
+Feel free to add any other methods, lists or objects you may want. You will want a separate function to print the list to the #printout div.
+
+#### Woah! Client's demands have changed
+
+Now the client who was going to buy your sweet todo list wants a new feature. Is it going to break your whole code, or is your code modular and extendable?
+
+They want it so after a user completes a task, it is displayed struck for 10 seconds, but then disappears from your list. Google the setTimeout method.

2- javascript/8-todo-list/index.html

@@ -0,0 +1,22 @@
+<!doctype HTML>
+<html>
+	<head>
+		<link rel="stylesheet" type="text/css" href="reset.css">
+		<link rel="stylesheet" type="text/css" href="main.css">
+		<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+		<script type="text/javascript" src="main.js"></script>
+	</head>
+	<body>
+	<div class = "container">
+		<nav id="top">
+			<h1>To Do List</h1>
+		</nav>
+		<form id="todoform" action="#" method="post">
+    		<input type="text" id= "todo" name="todo" placeholder="Enter Your Todo">
+    		<input type="submit" value="Add" id="addTodo">
+    	</form>
+		<div id = "printout"></div>
+	</div>
+	</body>
+	</html>
+

2- javascript/8-todo-list/main.css

@@ -0,0 +1,41 @@
+body{
+	background-color: #D1D1D1
+}
+
+nav{
+	position: absolute;
+	background-color: black;
+	width: 100%;
+	height: 4em;
+	top: 0;
+	text-align: center;
+	line-height: 4em;
+}
+
+nav h1{
+	font-size: 3em;
+	font-family: monospace;
+	color: white;
+}
+
+#todoform{
+	margin: 5em auto 0 auto;
+	width: 20%;
+}
+
+#printout{
+	width: 800px;
+	min-height: 1000px;
+	background-color: white;
+	margin: 1em auto 0 auto;
+	color: black;
+	text-indent: 1em;
+}
+
+#printout p{
+	font-size: 2em;
+}
+
+#printout p:nth-child(even) {
+	background-color: #D1D1D1;
+}

2- javascript/8-todo-list/main.js

@@ -0,0 +1,20 @@
+// all jquery dom actions can only be called inside document ready.
+
+function toDoList(){
+
+}
+
+toDoList.prototype.add = function(todo){
+
+}
+
+toDoList.prototype.complete = function(todo){
+
+}
+
+var myList = new toDoList();
+
+$(document).ready(function(){
+
+
+})

2- javascript/8-todo-list/reset.css

@@ -0,0 +1,47 @@
+/**
+ * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
+ * http://cssreset.com
+ */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

2- javascript/9-get-primes/README.md

@@ -0,0 +1,8 @@
+Get Prime Numbers Challenge
+===========================
+
+In the HTML file you'll find the normal template plus an input form.
+
+Have the input form accept a number from the user. When the form is submitted, have the function getPrimes take the number as an argument (num) and calculate all the prime numbers up to and including num.
+
+In typical fashion, use JQuery to have all the prime numbers append to the "#printout" div. Make sure they are wrapped in p tags for readability. Do not modify the HTML in any way.

2- javascript/9-get-primes/index.html

@@ -0,0 +1,22 @@
+<!doctype HTML>
+<html>
+	<head>
+		<link rel="stylesheet" type="text/css" href="reset.css">
+		<link rel="stylesheet" type="text/css" href="main.css">
+		<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+		<script type="text/javascript" src="main.js"></script>
+	</head>
+	<body>
+	<div class = "container">
+		<nav id="top">
+			<h1>Get All Prime Numbers below Input Number</h1>
+		</nav>
+		<form id="numberform" action="#" method="post">
+    		<input type="text" id= "number" name="comment" placeholder="Enter a Number">
+    		<input type="submit" value="Get Primes">
+    	</form>
+		<div id = "printout"></div>
+	</div>
+	</body>
+	</html>
+

2- javascript/9-get-primes/main.css

@@ -0,0 +1,41 @@
+body{
+	background-color: #D1D1D1
+}
+
+nav{
+	position: absolute;
+	background-color: black;
+	width: 100%;
+	height: 4em;
+	top: 0;
+	text-align: center;
+	line-height: 4em;
+}
+
+nav h1{
+	font-size: 3em;
+	font-family: monospace;
+	color: white;
+}
+
+#numberform{
+	margin: 5em auto 0 auto;
+	width: 20%;
+}
+
+#printout{
+	width: 800px;
+	min-height: 1000px;
+	background-color: white;
+	margin: 1em auto 0 auto;
+	color: black;
+	text-indent: 1em;
+}
+
+#printout p{
+	font-size: 2em;
+}
+
+#printout p:nth-child(even) {
+	background-color: #D1D1D1;
+}

2- javascript/9-get-primes/main.js

@@ -0,0 +1,11 @@
+// use this function to get and return all the prime numbers below the input number
+function getPrimes(num){
+
+}
+
+// all jquery dom actions can only be called inside document ready.
+
+$(document).ready(function(){
+
+
+})

2- javascript/9-get-primes/reset.css

@@ -0,0 +1,47 @@
+/**
+ * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
+ * http://cssreset.com
+ */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

3-front-end/1-basic-layout/README.md

@@ -0,0 +1,22 @@
+Basic Layout
+============
+
+Using HTML and CSS, you are going to construct a skeleton for basic webpage.
+
+Create a header positioned absolutely to the top of the page. Use HTML 5 semantics, the `<header>` tag.
+
+Put a h1 tag inside that says something funny.
+
+Make a navigation bar, also positioned absolutely, that is colored black. Use HTML5 semantics, the `<nav>` tag.
+
+Add a list of links to the navigation bar, colored white. Make working links to any websites you want. Turn off the text decoration so it looks cool.
+
+Create a content area of the page, with a 1em margin below the nav bar. It should be 90% of the page width.
+
+See if you can make two columns inside, spaced evenly side by side  
+
+How about 3 columns inside?
+
+Make a footer, positioned absolutely at the bottom of the page. Use HTML 5 Semantics.
+
+Go into Dev tools and utilize the box model. Are your margins and spacing tight? What happens when you resize your window?  

3-front-end/1-basic-layout/index.html

@@ -0,0 +1,8 @@
+<html>
+	<head>
+		<link rel="stylesheet" type="text/css" href="main.css">
+	</head>
+	<body>
+
+	</body>
+</html>

3-front-end/1-basic-layout/main.css

@@ -0,0 +1,41 @@
+header {
+	background-color: gray;
+	height: 5em;
+	width: 100%;
+}
+
+nav {
+	height: 2em;
+	background-color: red;
+	width: 100%;
+}
+
+.content {
+	height: 20em;
+	width: 80%;
+	background-color: blue;
+	margin: 0 auto;
+}
+
+.col {
+	width: 24%;
+	height: 100%;
+	float: left;
+	border-right: 1px solid black;
+	margin-right: .9%;
+}
+
+.col:nth-child(4) {
+	border-right: none;
+	margin-right: none;
+}
+
+footer {
+	position: absolute;
+	bottom: 0;
+	height: 3em;
+	background-color: black;
+	width: 80%;
+	left: 10%;
+
+}

3-front-end/2-upgraded-layout/README.md

@@ -0,0 +1,18 @@
+Upgraded Layout
+===============
+
+If you're not familiar with Chrome Dev Tools, [check out this tutorial](https://www.codeschool.com/courses/discover-devtools)
+
+Move your files from the basic layout folder to this folder - use git to check the status, add and commit. Answer question 1 in questions.md
+
+Link reset.css to your index.html and reload the page. Answer question 2 in questions.md.
+
+Adjust your css to look the way you want again.
+
+Make the link text and h1 text change when your mouse hovers over it. See the CSS resources.
+
+Go to google.com/fonts and link a new font in your index.html. Change the font faces of your text to the new font.
+
+Add some icons to your site using FontAwesome.io - download and check out the "Get Started" page.
+
+Finish the questions in questions.md.

3-front-end/2-upgraded-layout/questions.md

@@ -0,0 +1,36 @@
+Question Time
+=============
+
+1. What happened in Git when you moved files to a new folder? How did it view and handle this action in status? Did you try checking the status from both the root directory (/1-basic..) and the new one (/2-upgraded..)? What was different about them?
+
+<!-- Your answer here -->
+
+2. What does reset.css do? Why would we want to add this file? Where exactly did you add it in your HTML file?
+
+<!-- Your answer here -->
+
+3. Using [Dev Tools](https://developer.chrome.com/devtools), explain which tabs allow you to do the following:
+	1. Realtime editing of HTML and CSS
+	2. Javascript Debugging
+	3. Performance Optimization
+
+<!-- Your answer here -->
+
+4. Go to [http://www.postmachina.com/](http://www.postmachina.com/)
+	1. What is the current background color for the page? (Surprisingly, it's not just black!)
+	2. Tweak the background color to white.
+	3. Tweak the height of the side bar that contains the logo. Shrink it down to 85px.
+	4. Roll over the navigation links. When you hover over them, they dissapear. Let's change the hover color to black instead.
+
+<!-- Your answer here -->
+
+5. Why can't you tweak the color of the text "The most important things are not things"? Please explain.
+
+<!-- Your answer here -->
+
+6. Go to [http://www.seamless.com](Seamless)
+
+	1. What is the largest image on the site? What is the URL? How long does it take to load?
+	2. How did you figure this out?
+
+<!-- Your answer here -->

3-front-end/2-upgraded-layout/reset.css

@@ -0,0 +1,47 @@
+/**
+ * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
+ * http://cssreset.com
+ */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

3-front-end/3-left-hand-navigation/README.md

@@ -0,0 +1,17 @@
+Left Hand Navigation
+=====================
+
+Using this screenshot as a guide, create a left hand navigation template.
+
+![Left hand nav](lefthand.png)
+
+You will need at least the following block elements:
+
+* Container  
+* Nav  
+* Content / Aside  
+* Footer  
+
+The footer should be fixed to the page, so it is present at all times no matter where you scroll.
+
+Bonus points for using [Bacon Ipsum](http://baconipsum.com/).

3-front-end/4-right-hand-navigation/README.md

@@ -0,0 +1,17 @@
+Right Hand Navigation
+=====================
+
+Using this screenshot as a guide, create a right hand navigation template.
+
+![Right hand nav](righthand.png)
+
+You will need atleast the following block elements:
+
+* Container  
+* Nav  
+* Content / Aside  
+* Footer  
+
+The footer should be fixed to the page, so it is present at all times no matter where you scroll.
+
+Bonus points for using [Bacon Ipsum](http://baconipsum.com/).

3-front-end/5-stack-overflow-drop-down/README.md

@@ -0,0 +1,22 @@
+Dev Tools Stack Overflow
+=========================
+
+###Dev Tools DOM Mining
+
+Go to this [Stack Overflow question](http://stackoverflow.com/questions/9953482/how-to-make-a-pure-css-based-dropdown-menu)
+
+Answer the following questions:
+
+1. What is the class and id of each button on the nav bar?
+
+2. What is the class of the div that holds the question title?
+
+3. What is the class of the first div inside the question div, that adds a bottom margin of 8em? How often does this div appear on the page?
+
+4. What is the class of the sidebar?
+
+5. Why might some of the ids for questions and answers have long seemingly random numbers inside?
+
+###Bonus!
+
+Follow the question and answer flow in the link, and build your own CSS drop down menu!!

3-front-end/6-css-challenge/README.md

@@ -0,0 +1,18 @@
+## CSS Challenge
+
+In this assignment, you will doing the css for a site. The HTML is already done for you, so don't touch it, unless you're adding the about link (instrutions below).  
+Included are pictures of what the site should look like. Here are a few things to help:  
+* the color of the background in nav is #444, as well as for the dashed border lines
+* the background color for the footer is #222
+* look up border radius. Can you make the picture a circle as well?
+* You will need to use nth-child() in the css
+* the footer should clear everything above it
+* do all of your sizes in em or %
+* make the about link in the header go to the about section (you can change the html here and only here)
+
+**Why use em or %?** When you code your css using px, you're defining the exact amount of pixels for the size. This seems great, until you go a different size monitor. Using % says what percent of the screen to take up. Em defines the size based on the px definition in the document. By default, this is 16px. By using em, you can size everything in relation to each other, and not have to change 1 pixel every time you make a minor adjustment.  
+
+Check out application.js. Figure out what it's doing. See if you can explain it to a friend.
+
+![top of page](top.png)
+![bottom of page](bottom.png)

3-front-end/6-css-challenge/application.js

@@ -0,0 +1,9 @@
+(function($, window, document) {
+  $(function(){
+    var lastParagraph = $('#about p:last-child()')
+    var aboutHeader = $('#about h2')
+    aboutHeader.on('click', function(event){
+      lastParagraph.toggle()
+    })
+  });
+}(window.jQuery, window, document));

3-front-end/6-css-challenge/index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="main.css">
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+  <script type="text/javascript" src="application.js"></script>
+</head>
+<body>
+  <nav>
+    <ul>
+      <a href="#"><li>Home</li></a>
+      <a href="#"><li>About</li></a>
+      <a href="#"><li>Links</li></a>
+      <a href="#"><li>Blog</li></a>
+    </ul>
+  </nav>
+  <div id="container">
+    <h2 id="home">WELCOME TO MY SITE</h2>
+    <img id="selfie" src="http://i.imgur.com/WW02WNJ.jpg"/>
+    <div id="about">
+      <h2>About me</h2>
+      <p>
+        Letterpress Cosby sweater skateboard cliche chia gentrify. Lo-fi sustainable distillery authentic, mixtape normcore hoodie farm-to-table Cosby sweater PBR chillwave bicycle rights brunch. Kitsch Kickstarter actually, viral mixtape sartorial master cleanse Cosby sweater shabby chic. Locavore chambray art party yr High Life authentic, biodiesel raw denim craft beer organic occupy. Vegan hoodie ennui sartorial Austin jean shorts. Hashtag Helvetica gluten-free single-origin coffee pop-up American Apparel. Trust fund Carles mlkshk, viral fingerstache chillwave disrupt.
+      </p>
+      <p>
+        Aesthetic Neutra art party plaid High Life food truck. American Apparel literally Vice High Life, Neutra vegan disrupt meh food truck swag gentrify semiotics. Williamsburg kitsch Etsy four loko brunch, hella Banksy vegan next level squid vinyl fingerstache Truffaut bicycle rights Portland. Jean shorts drinking vinegar slow-carb twee. Squid synth McSweeney's pour-over stumptown. Neutra chambray fingerstache, church-key tote bag ennui sriracha next level pug mixtape wayfarers letterpress meh semiotics roof party. Hashtag try-hard pug before they sold out.
+      </p>
+      <p>
+        Drinking vinegar Pitchfork Shoreditch banh mi farm-to-table. Farm-to-table gastropub readymade flannel, master cleanse selfies single-origin coffee street art seitan butcher Blue Bottle Neutra asymmetrical. Vinyl stumptown Helvetica deep v, literally Marfa Truffaut banjo shabby chic cliche PBR&B vegan Neutra tousled. PBR&B jean shorts chillwave, Helvetica VHS Portland meggings mustache. Fixie mlkshk narwhal bitters craft beer. Forage Bushwick literally, Kickstarter roof party photo booth meggings squid kogi sustainable Shoreditch kale chips gluten-free fap.
+      </p>
+      <p>
+        Vinyl small batch salvia pour-over beard, aesthetic lomo irony Intelligentsia freegan. You probably haven't heard of them plaid jean shorts, Williamsburg Wes Anderson photo booth cliche letterpress paleo Echo Park distillery locavore slow-carb seitan lomo. You probably haven't heard of them four loko tattooed photo booth. Scenester YOLO flannel, craft beer 8-bit vinyl mumblecore vegan before they sold out flexitarian ugh synth Tonx Odd Future butcher. Selvage try-hard Etsy fap brunch forage. Whatever ethical semiotics, squid Intelligentsia Banksy cred brunch tousled.
+      </p>
+    </div>
+  </div>
+  <footer>Thanks for visiting!</footer>
+</body>
+</html>

3-front-end/6-css-challenge/main.css

@@ -0,0 +1,16 @@
+body {
+  font-size: 20px;
+}
+
+nav {
+  height: 60px;
+}
+
+#container {
+  padding: 90px 5%;
+}
+
+footer {
+  height: 30px;
+  padding: 10px;
+}

3-front-end/7-blog/README.md

@@ -0,0 +1,14 @@
+Make a Blog
+===========
+
+You're going to make a blog. [Github offers free hosting of one static page per account.](https://pages.github.com/)  
+We're going to do it in [Jekyll](http://jekyllrb.com/docs/quickstart/).  
+Follow the steps on their [GitHub page](https://github.com/jekyll/jekyll).
+
+When you make the repository for your Jekyll site, make sure to include the Jekyll gitignore.
+
+Once you get the page up, feel free to customize it. Look through the layout of the framework. Play around with it and see what changes what.
+
+Congratulations! You've used your first framework.
+
+_Note_: This assignment is pretty open ended. Reach out to us, if you get stuck or feel lost.

3-front-end/8-hacker-news/README.md

@@ -0,0 +1,9 @@
+Hacker News  
+===========
+
+* Go to Y Combinator's [Hacker News](https://news.ycombinator.com/).
+* Check out the source code. It is minified, which makes load time faster, but difficult to read. Add the HTML to index.html and CSS to main.css Deminify it. Depending on your text editor, it might do it for you.
+* Read through the code, and compare it to what you see on the page. What is each thing doing?
+* What do you think of the embedded CSS? Is this good practice?
+* Check out the CSS file. Does it follow DRY (don't repeat yourself) priniciples?
+* Pick something in the site that you found interesting. Blog about it in your new blog.