{{ content | expand_urls: root_url }}
{% if site.twitter_tweet_button %}
- Tweet
+ Tweet
{% endif %}
{% if site.google_plus_one %}
diff --git a/_layouts/default.html b/_layouts/default.html
index 122784d2..43793eae 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -1,15 +1,23 @@
-
+
+
+ {{ page.title }}
-
-
-
+
+
+
+
+
+
-
+
+
diff --git a/_layouts/page.html b/_layouts/page.html
index 1c924a8f..2c9ec19f 100644
--- a/_layouts/page.html
+++ b/_layouts/page.html
@@ -2,6 +2,7 @@
layout: default
---
+
{% if page.title %}
@@ -11,8 +12,26 @@
+
+
+
+
+{% if page.files %}
+{% assign pageurl = page.url | split: '/' | pop | join: '/' %}
+{% capture files %}[{% for file in page.files %}
+ "{{ pageurl }}/{{ file }}"{% if forloop.last %}{% else %},{% endif %}{% endfor %}
+ ]{% endcapture %}
+{% endif %}
+
+{% if files %}
+
+{% endif %}
diff --git a/assets/codebar_logo.png b/assets/codebar_logo.png
new file mode 100644
index 00000000..7ce2ce93
Binary files /dev/null and b/assets/codebar_logo.png differ
diff --git a/coaches/lesson-guide.md b/coaches/lesson-guide.md
new file mode 100644
index 00000000..1e9ec498
--- /dev/null
+++ b/coaches/lesson-guide.md
@@ -0,0 +1,311 @@
+---
+layout: page
+title: Coach's guide to tutorials
+---
+
+# Introduction
+
+This document serves as a quick guide to coaches about what each
+tutorial contains. It's intended to help advise students on which
+tutorials are appropriate for them, and to guide coaches on what parts
+of a tutorial the student should be focussing on.
+
+# HTML & CSS
+
+## Lesson 1: Introduction to HTML
+
+### Prerequisites
+
+- A web browser
+- A text editor (see the getting started guide)
+
+### Learning goals
+
+- Understand what an element is and how their syntax works
+ - Opening and closing tags
+ - Attributes
+- Understand what these things do:
+ - Headings `h1`..`h6`
+ - Block elements `p` and `div`
+ - Links `a`
+ - Lists `ul` and `ol`
+ - Images `img`
+ - Comments ``
+ - Entities `"`
+- Some understanding of how URIs work in links and images
+
+## Lesson 2: Introduction to CSS
+
+### Prerequisites
+
+- A text editor
+- Able to read and write HTML syntax (no need to understand what the
+ tags do)
+
+### Learning goals
+
+- Know what a CSS rule is and how its syntax works
+- Understand these selectors:
+ - type `a`
+ - class `.foo`
+ - id `#foo`
+ - descendant `.foo a`
+ - `:first-child`
+- Some understanding of how specificity affects cascade order
+- Understand these properties:
+ - line-height
+ - border, margin, and padding
+ - float
+ - background-color
+ - height and width
+ - text-align
+
+## Lesson 3: Beyond the basics
+
+### Prerequisites
+
+- A web browser
+- A text editor
+- Able to read and write HTML syntax
+- Able to read and write a simple CSS rule
+
+### Learning goals
+
+- Know what a CSS rule is and how its syntax works
+- Know the difference between inline and block elements
+- Have a simple understanding of the box model
+- Understand that HTML is for structure and CSS is for presentation
+- Be familiar with the following pseudo-classes
+ - `:link`
+ - `:visited`
+ - `:hover`
+ - `:active`
+
+## Lesson 4: Layouts and formatting
+
+### Prerequisites
+
+- A web browser
+- A text editor
+- Able to read and write HTML syntax
+- Able to read and write a simple CSS rule
+
+### Learning goals
+
+- Some understanding of how to use HTML to structure content in a document
+- Know what the `header` and `footer` elements are for
+- Understand floats
+- Some understanding of the following position values:
+ - `static`
+ - `relative`
+ - `absolute`
+ - `fixed`
+- Some understanding of z-index
+
+## Lesson 5: Diving into HTML5 and CSS3
+
+### Prerequisites
+
+- A web browser
+- A text editor
+- Able to read and write HTML syntax
+- Able to read and write a simple CSS rule
+
+### Learning goals
+
+- Understand these properties:
+ - max-width, min-width
+ - text-shadow
+ - border-radius
+ - box-shadow
+ - background, background-size, background-image, background-attachment and background-repeat
+ - `:not`
+ - `:nth-child()`
+- Understand the `em` and `px` units of measurement
+- Understand rgba color and opacity
+
+## Lesson 6: Advanced HTML5
+
+### Prerequisites
+
+- A web browser
+- A text editor
+- Able to read and write HTML5 syntax
+- Able to read and write CSS3
+
+### Learning goals
+
+- Demonstrate ability to structure an HTML document using semantic HTML5 elements
+- Know how to use the following elements
+ - `section`
+ - `article`
+ - `aside`
+ - `address`
+ - `figure` and `figcaption`
+ - `video` and `audio`
+- Demonstrate use of a range of CSS properties
+- Demonstrate use of web inspector
+
+## Lesson 7: Responsive layouts and Media Queries
+
+### Prerequisites
+
+- A web browser
+- A text editor
+- Able to read and write HTML5 syntax
+- Able to read and write CSS3
+
+### Learning goals
+
+- Understand what the viewport is
+- Some understanding of mobile first principles
+- Know how to use media queries to target different viewport sizes and media
+- Demonstrate use of web inspector
+
+# JavaScript
+
+## Lesson 1: Introduction to JavaScript
+
+### Prerequisites
+
+- A text editor (see the getting started guide)
+- Chrome or firefox
+
+### Learning goals
+
+- Some understanding of basic javascript syntax
+- Understand:
+ - what variables and expressions are
+ - how to print things with `console.log`
+ - Operators `+`, `-`, `*` and `/`
+ - `if` statements
+ - Operators `===`, `!==`, `>` and `<`
+ - how to write and call functions
+ - variable scope in functions
+
+## Lesson 2: Beginning JavaScript
+
+### Prerequisites
+
+- Some understanding of basic javascript syntax
+- Understand (from lesson 1):
+ - what variables and expressions are
+ - how to print things with `console.log`
+ - how to call functions
+- Understand basic HTML elements
+
+### Learning goals
+
+- Understand these things:
+ - `while` and `for(;;)` loops
+ - arrays
+ - properties and methods
+ - array methods `push`, `unshift`, `pop`, and `sort`
+ - creating objects with initializers
+- Know how to find DOM objects via `document`
+- Know how to add new DOM objects to the page
+
+## Lesson 3: Introduction to jQuery
+
+### Prerequisites
+
+- Understand basic HTML elements
+- Some understanding of basic javascript syntax
+- Understand (from lesson 1):
+ - what variables and expressions are
+ - how to write and call functions
+- Understand (from lesson 2):
+ - properties and methods
+
+### Learning goals
+
+- Understand these things:
+ - constructing jQuery objects with CSS selectors
+ - adding and removing elements with `append` and `remove`
+ - changing elements with `text`, `val`, and `addClass`
+ - adding event handlers with `on`
+ - changing css properties with `css`
+ - `Array.prototype.forEach`
+ - `$(document).ready`
+- Know how to write event handlers for keyboard and mouse events
+- Know how to change web pages in response to events
+
+## Lesson 4: HTTP Requests, AJAX, and APIs
+
+### Prerequisites
+
+- Understand (from lesson 1):
+ - what variables and expressions are
+ - how to write and call functions
+ - how to print things with `console.log`
+- Understand (from lesson 2):
+ - properties and methods
+- Everything in lesson 3 goals
+
+### Learning goals
+
+- Understand these things:
+ - basic structure of HTTP requests and responses
+ - basic structure of JSON apis
+ - using `XMLHttpRequest` to send queries
+ - using `JSON.parse` to consume responses
+ - using `$.ajax` to send queries and consume responses
+
+## Lesson 5: HTTP Requests, AJAX, and APIs (part 2)
+
+### Prerequisites
+
+- Lesson 4
+
+### Learning goals
+
+- Understand these things:
+ - using `POST` and `PUT` requests
+- Practice working with jQuery and json apis
+
+## Lesson 6: Drawing in Canvas
+
+### Prerequisites
+
+- Understand basic HTML elements
+- Understand (from lesson 1):
+ - what variables and expressions are
+ - how to write and call functions
+ - how to print things with `console.log`
+- Understand (from lesson 2):
+ - properties and methods
+
+### Learning goals
+
+- Understand these things:
+ - setting up a canvas for drawing
+ - canvas coordinate system
+ - drawing rectangles
+ - drawing paths, using lines and arcs
+ - transforming with rotate, translate, and scale
+
+## Lesson 7: Introduction to Testing
+
+### Prerequisites
+
+- Understand (from lesson 1):
+ - what variables and expressions are
+ - how to write and call functions
+ - how to print things with `console.log`
+ - Operators `+`, `-`, `*` and `/`
+- Understand (from lesson 2):
+ - properties and methods
+
+### Learning goals
+
+- Know how to write tests with Jasmine
+- Get some experience of writing unit tests
+
+## Lesson 8: Building your own app
+
+This isn't a tutorial like the others, it's a few pointers on how to
+start building something independently.
+
+### Prerequisites
+
+- As a minimum, lesson 3
diff --git a/command-line/introduction/tutorial.md b/command-line/introduction/tutorial.md
new file mode 100644
index 00000000..82f3e81d
--- /dev/null
+++ b/command-line/introduction/tutorial.md
@@ -0,0 +1,141 @@
+---
+layout: page
+title: Introduction to the command line
+---
+
+## What is the command line?
+
+The command line is a text interface for your computer. Just like Windows Explorer on Windows or Finder on Mac OSX it lets you navigate through the files and folders of your computer, but it is completely text based. The command line works by typing commands against a prompt, which then gets passed to the operating system of the computer that runs these commands.
+
+## How do I access the command line?
+
+To access the command line, we use a terminal emulator, usually called a terminal. On Mac OSX you can access the terminal by opening the Terminal application from your Applications folder. On Windows you can download Git [here](https://git-scm.com/download/win) which includes a terminal.
+
+Before we get started, you should note some **DO's** and **DONT's** while using the command line. The command line is a powerful tool that can significantly speed up your workflow but can also irreversibly harm your computer so make sure you use it responsibly.
+
+If you are not sure what a command does **DO NOT** type it into your terminal. The command `rm -rf /` is a classic one that you should never use, it will delete all the files in your computer. If you are stuck and in need of help make sure you ask from someone you trust. It goes without saying that all commands in this tutorial are safe to use.
+
+## Example 1: navigating around in the terminal
+
+Once you opened up your terminal, type in the following after the `$` or `>` sign and hit enter: (`$` or `>` is the prompt, you don't have to retype that in the terminal, only the characters that come after them):
+
+```bash
+$ pwd
+```
+
+> What do you think happened there? In your own words, try to explain what this command does.
+
+### `pwd` or print working directory
+
+The `pwd` command prints out the current directory you are in. What are directories? Directories are folders, these terms are used interchangeably. If you just opened up your terminal, you are probably in the home directory of your computer, and should get an output similar to this:
+
+```bash
+/Users/your-username
+```
+
+Now that you know how to tell where you are in your computer, you might ask yourself: how I do know which files are in a directory? That's where the `ls` command comes in handy.
+
+### `ls` or list
+
+In your terminal type:
+
+```bash
+$ ls
+```
+
+and hit enter. Most likely this command returned you a bunch of files and folders. The `ls` command prints out the contents of a directory. If you are in the home directory of your computer you should see directories printed out such as Documents, Applications, etc. Now, how do you move across directories?
+
+### `cd` or change directory
+
+The `cd` command allows you to move between directories. The `cd` command takes an argument, usually the name of the folder you want to move to, so the full command is `cd your-directory`.
+
+In the terminal, type:
+
+```bash
+$ ls
+```
+
+Let's say we wanted to move to the Desktop folder: just type in your terminal
+
+```bash
+$ cd Desktop
+```
+
+Now type:
+
+```bash
+$ pwd
+```
+
+This should return you something like:
+
+```bash
+/Users/your-username/Desktop
+```
+
+Now that we moved to your Desktop, you can type `ls` again, then `cd` into it. We have just changed into a new directory. You can use these two commands to navigate around your computer.
+
+This is all good so far, but sometimes you might want to go deeper than one level in one command. `cd` allows you to do this by chaining the directories with a `/`, so `cd your-directory` becomes `cd your-directory/directory-inside-your-directory`.
+
+We now know how to move forward. But how to go back up the directory tree? Type in your terminal:
+
+```bash
+$ cd ..
+```
+
+Now do a `pwd`. You just went back one directory! Chaining works backwards too, so if you type `cd ../..` you should be taken back two directories.
+
+> If you want to go back to the home directory of your computer, simply type `cd` into the terminal. `cd` without an argument takes you back to the home directory regardless of where you are currently in the directory structure
+
+### Exercise 1: use `ls` and `cd` to move in and out of a few directories on your computer
+
+These are the basics of navigating around in the terminal. What else would we want to do in there? How about creating directories and files?
+
+## Example 2: creating directories and files
+
+### `mkdir` or make directory
+
+Go back to the home directory of your computer, and type:
+
+```bash
+$ cd
+$ mkdir temp
+```
+
+into the terminal. Now use `ls` to see the contents of the home directory. You should see a new folder, temp there. You just created a new folder! As its name suggests, `mkdir` creates directories. What if we wanted to create a directory inside a directory? `cd` into temp and type:
+
+```bash
+$ mkdir -p stuff/bits
+```
+
+Now do an `ls` and you should see the `stuff` folder. Now run `cd stuff` and do another `ls`. Inside stuff, the `bits` directory was created.
+
+What if you wanted to create files?
+
+### `touch` or create files
+
+Inside the `bits` folder, type:
+
+```bash
+$ touch bobs.txt
+```
+
+Do an `ls` to check whether the file has been created. Inside bits, there should be a new file called bobs.txt. We used `touch` to create files. With touch you can create files with any extension, just don't forget to specify what kind of file you are creating: for example, `index.html`, `script.js`, `style.css` are all valid extensions.
+
+### `mv` or move item
+
+What if you created a file in the wrong place? There's a command for that. Let's move `bobs.txt` to somewhere new. Inside the `bits` folder type:
+
+```bash
+$ mv bobs.txt ..
+```
+
+Type `ls` and the file is no longer there. Type `cd ..`, this moves you one folder up to the `stuff` folder. Then type `ls` and the bobs.txt file will be there. There are 3 parts to this command, the `mv` command, the item to be moved, here it's `bobs.txt`, and the new destination for the item, here we have it as `..` or one directory up the structure. You could also type the destination directory, replacing the `..` with `stuff` and it would do the same job.
+
+### Exercise 2: `cd` back into temp and create a couple of new folders with files in them
+
+### Bonus: if you are on a Mac, type this into your terminal:
+
+```bash
+$ say hello
+```
diff --git a/examples/colorpicker/index.html b/examples/colorpicker/index.html
index 83a5d48d..7a562b75 100644
--- a/examples/colorpicker/index.html
+++ b/examples/colorpicker/index.html
@@ -8,7 +8,7 @@
- 
+ 
diff --git a/examples/github-user-finder/index.html b/examples/github-user-finder/index.html
index 0ec9bc03..9effba43 100644
--- a/examples/github-user-finder/index.html
+++ b/examples/github-user-finder/index.html
@@ -7,7 +7,7 @@
You are welcome to go through our tutorials but please keep in mind that as we rely on community PRs for maintainance they may be out of date.
+
Color picker
@@ -29,7 +29,7 @@Color picker
+
@@ -20,7 +20,7 @@