Merge remote-tracking branch 'upstream/gh-pages' into gh-pages

Author: matyikriszta

html/lesson1/tutorial.md

@@ -306,7 +306,7 @@ Add this underneath the ordered list about why we like owls.
 
 Some characters have special meaning in HTML. For instance, we use < and > to make HTML tags, and we use " to wrap our attributes. But what if we wanted to use those characters in our page?
 
-One way is to use **HTML entities**. These have an ampersand, a name, then a semicolon. Here's the HTML entity for a quote character: `&quot`.
+One way is to use **HTML entities**. These have an ampersand, a name, then a semicolon. Here's the HTML entity for a quote character: `&quot;`.
 
 You can also use a numerical format to produce special characters. [Here's a list](http://htmlandcssbook.com/extras/html-escape-codes/) of some common entities.
 

html/lesson6/tutorial.md

@@ -106,7 +106,7 @@ Download the files required to begin working through the tutorial from [here](ht
 ```
 Hi I'm Ada Lovelace - http://codebar.github.io/tutorials/html/lesson3/example.html
 Grace Hopper - http://codebar.github.io/tutorials/html/lesson4/example.html
-Anita Borg - Where are we and where are we going. - http://codebar.github.io/tutorials/html/lesson4/example.html
+Anita Borg - Where are we and where are we going. - http://codebar.github.io/tutorials/html/lesson5/example.html
 Grace Hopper on Letterman - http://codebar.github.io/tutorials/html/lesson6/assets/images/grace-letterman.mp4
 
 ```

index.html

@@ -51,7 +51,7 @@ <h2>JavaScript</h2>
           <ul>
             <li><a href="js/lesson1/tutorial.html">Lesson 1 - Introduction to JavaScript</a></li>
             <li><a href="js/lesson2/tutorial.html">Lesson 2 - Beginning JavaScript</a></li>
-            <li><a href="js/lesson3/tutorial.html">Lesson 3 - Introduction to JQuery</a></li>
+            <li><a href="js/lesson3/tutorial.html">Lesson 3 - Introduction to jQuery</a></li>
             <li><a href="js/lesson4/tutorial.html">Lesson 4 - HTTP Requests, AJAX and APIs</a></li>
             <li><a href="js/lesson5/tutorial.html">Lesson 5 - HTTP Requests, AJAX and APIs (part 2)</a></li>
             <li><a href="js/lesson6/tutorial.html">Lesson 6 - Drawing in Canvas</a></li>

js/lesson3/tutorial.md

@@ -82,15 +82,15 @@ $('input').val("");
 
 ##Adding content
 
-There are many different ways you can add content. You can use **append** to add something to the end to an element, or **prepend** to add to the beginning to an element.
+There are many different ways you can add content. You can use **append** to add something to the end of an element, or **prepend** to add to the beginning of an element.
 
 ```js
 $('#container').append("<div>I love jQuery!</div>")
 ```
 
 You can also use `replaceWith()` to substitute an element entirely with some new content.
 
-Try this out in your browser.
+Open the index.html of the files provided in your browser and try this out in the JavaScript console:
 
 ```js
 $('#container').replaceWith("<div>I love jQuery!</div>")
@@ -115,6 +115,7 @@ $(document).on('click','.done', function() {
   alert("Click event");
 });
 ```
+This function makes a JavaScript alert pop up when a user clicks on any element which has the class ".done".
 
 Although these two examples do the same thing there are some differences.
 
@@ -148,13 +149,13 @@ $(document).ready(function() {
 });
 ```
 
-Make a note of this. Wrapping your event listeners and other code within this make's sure they are executed only after all the DOM elements are loaded and ready. You should **always** use it or else your bindings won't work and the functions will run when you are loading the page.
+Make a note of this. Wrapping your event listeners and other code within this makes sure they are executed only after all the DOM elements are loaded and ready. You should **always** use it or else your bindings won't work and the functions will run before all elements on the page have loaded. So it might try to listen for events on elements that don't even exist yet and then you'll get lots of errors.
 
 #Exercise 1: Build a wish list
 
 Using jQuery and JavaScript functions, we will build a small todo list.
 
-Download the files required to begin working through the example [here](https://gist.github.com/despo/309f684b7a6e002aaf1f) or alternatively checkout with git.
+If you haven't yet, download the files required to begin working through the example [here](https://gist.github.com/despo/309f684b7a6e002aaf1f) or alternatively checkout with git.
 
 ```bash
 git clone https://gist.github.com/309f684b7a6e002aaf1f.git wishlist
@@ -165,7 +166,7 @@ Move the files under your Github page folder, in a new directory `wishlist`. Als
 ```bash
 git commit -m "message"
 ```
-
+If you don't know how to use git yet, just ignore the above for now or [look at our git tutorial](http://tutorials.codebar.io/version-control/introduction/tutorial.html).
 
 ##Functionality
 - add wishes to the list by clicking the Add button
@@ -205,9 +206,11 @@ After adding the item to the list:
 1. Empty the text field after adding the item to the list.
 2. Use jQuery's `focus()` method to place the cursor back in the text field after clicking the button.
 
+If you don't know how to use the focus() method, try searching for it in the [jQuery documentation](http://api.jquery.com/). There are some code examples illustrating how to use it.
+
 ###Label items
 
-To label items, update the html of the list item being added to the list, so it includes a label.
+To label items as "pending" or "done", add the below html code to the html for the new list item that you wrote at the beginning of the tutorial.
 
 `<span class='label pending'>Pending</span>`
 
@@ -221,6 +224,8 @@ When we click on the Pending label, we want to set items to complete. We will do
 
 > Use `$(this)` to access the element that the event was triggered from.
 
+Let's go through this step by step.
+
 Try this in the console:
 
 First of all, bind a **click** event to the span we've added using its class with the `on()` function. As `<li>` is the parent node of the <span> element, we can access it using `parent()` (which is equivalent to `parentNode`
@@ -230,10 +235,11 @@ that we've used in the previous lesson).
 var parent_node = $(this).parent();
 ```
 
-> Use `attr()` to set the class attribute to `completed` or alternatively `addClass()`
+> Use `attr()` or `addClass()` to set the class attribute to `completed` 
 
 > Use `remove()` to remove an element from the DOM
 
+When you now click on the red label "pending", it should change to the green label "completed".
 
 ###Show the total task count
 
@@ -274,7 +280,7 @@ Have a look at our [**Wish List**](../../examples/wishlist/index.html).
 https://gist.github.com/ab21d29aa1ea8fbbbb0e.git
 ```
 
-Move the files under your Github page folder, in a  directory colorpicker.
+if you're using git, move the files under your Github page folder, in a  directory colorpicker.
 Don't forget to commit each task you complete! That way it will be easier to retrace your steps if something goes wrong!
 
 ##Functionality
@@ -376,7 +382,7 @@ random_position = Math.floor( Math.random() * colors.length )
 
 > Use the `array[index]` notation to retrieve the colors at the random position.
 
-Set `.preview`'s background color, to the random color code.
+Set `.preview`'s background color to the random color code.
 
 ##Bonus
 

js/lesson4/tutorial.md

@@ -123,11 +123,17 @@ First, let's create a function that does the AJAX call to the GitHub API.
 ```js
 function getGithubInfo(username) {
   var xhr = new XMLHttpRequest();
-  xhr.open(...);
+  // open and then send the request
 
   return xhr;
 }
 ```
+> Set the async parameter to false so the call is synchronous.
+This means the browser will wait for the call to the GitHub API to finish before continuing.
+
+> Otherwise you can set it to true and add the extra methods to handle the changes in `readyState` of the request.
+
+> See [Mozilla Developer Network (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange) for more details.
 
 **Note** We want `getGithubInfo(username)` to return us the entire response, so we can check for the status and handle it when necessary.
 
@@ -174,8 +180,11 @@ The `showUser(user)` function should:
 3. Add an image in `#profile .avatar`. To do that, you can use the `avatar_url`
    from the response.
 
+> Once you have parsed the response, try using `console.log()` to see what the object looks like in the browser console.
+
 > Don't forget to call `showUser()` from the function handling the keypress!
 
+
 ##Publish to Github
 
 Link to your Github User Finder from `index` and push your changes to Github.