Merge pull request #2 from geoknee/master

geoknee's improved notes

Author: tomclose

.gitignore

@@ -1,3 +1,5 @@
 _site/
 _gh-pages/
-CNAME
+CNAME
+*.swp
+.DS_Store

Gemfile

@@ -1,3 +1,3 @@
 source 'https://rubygems.org'
 
-gem 'jekyll'
+gem 'jekyll','1.1.2'

Gemfile.lock

@@ -1,13 +1,14 @@
 GEM
+  remote: https://rubygems.org/
   specs:
     classifier (1.3.4)
       fast-stemmer (>= 1.0.0)
     colorator (0.1)
-    commander (4.1.5)
+    commander (4.1.6)
       highline (~> 1.6.11)
     directory_watcher (1.4.1)
     fast-stemmer (1.0.2)
-    highline (1.6.20)
+    highline (1.6.21)
     jekyll (1.1.2)
       classifier (~> 1.3)
       colorator (~> 0.1)
@@ -20,8 +21,8 @@ GEM
       redcarpet (~> 2.2.2)
       safe_yaml (~> 0.7.0)
     kramdown (1.0.2)
-    liquid (2.5.1)
-    maruku (0.7.0)
+    liquid (2.5.5)
+    maruku (0.7.1)
     posix-spawn (0.3.8)
     pygments.rb (0.5.4)
       posix-spawn (~> 0.3.6)
@@ -34,4 +35,4 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
-  jekyll
+  jekyll (= 1.1.2)

_config.yml

@@ -1,2 +1,2 @@
 name: Learn to Code
-pygments: true
+highlighter: pygments

_layouts/session.html

@@ -3,26 +3,26 @@
 ---
 
 <div class="page-header">
-  <h1>{{page.title }} <small>{{ page.strapline}}</small></h1>
+	<a href ="/contents/"><img src="/assets/code61_logo_66x66.png" ></a><h1>{{page.title }} <small>{{ page.strapline}}</small></h1>
 </div>
 
 <div class="tabbable tabs-left">
 <ul class="nav nav-tabs" id="myTab">
 	{% for task in page.tasks %}
 		{% if forloop.first %}
-		<li class="active"><a href="#{{ task.name }}" data-toggle="tab">{{ task.title }} </a></li>
+		<li class="active"><a href="#{{ task.basename }}" data-toggle="tab">{{ task.title }} </a></li>
 		{% else %}
-		<li><a href="#{{ task.name }}" data-toggle="tab">{{ task.title }} </a></li>
+		<li><a href="#{{ task.basename }}" data-toggle="tab">{{ task.title }} </a></li>
 		{% endif %}
 	{% endfor %}
 </ul>
 
 <div class="tab-content">
 {% for task in page.tasks %}
 	{% if forloop.first %}
-	<div class="tab-pane active" id="{{ task.name }}">
+	<div class="tab-pane active" id="{{ task.basename }}">
 	{% else %}
-	<div class="tab-pane " id="{{ task.name }}">
+	<div class="tab-pane " id="{{ task.basename }}">
 	{% endif %}
 
 		<h2>{{ task.title }}</h2>

_plugins/sessions.rb

@@ -79,7 +79,7 @@ def initialize(site, base, dir, name)
       self.process(@name) # separates into @basename and @ext
       self.read_yaml(File.join(base,'_sessions', dir), name)
 
-      self.data['name'] = @basename
+      self.data['basename'] = @basename
 
       # self.data['title'] = "#{category_title_prefix}#{category}" # should have title already
     end

_sessions/c1s1/_0_overview.md renamed to _sessions/c1s1/0_overview.md

@@ -51,17 +51,17 @@ Several browsers also provide developer tools, which allow you to *interactively
 There are a few features of the Chrome developer tools that it is worth pointing out now.
 
 
-{% exercise %}
-1. Open this page in Google Chrome
-2. View the page source by doing one of the following:
-    * View > Developer > View Source
-    * Tools > View Source
-3. Open the developer tools by doing one of the following:
-    * View > Developer > Developer Tools
-    * Tools > Developer Tools
-4. Use the magnifying glass in the bottom left to hover over bits of the page and find the related HTML.
-5. Hover over the HTML code in the developer tools box and watch as different parts of the page are highlighted.
-6. Try changing some of the CSS on the right hand side. To undo any changes just refresh the page.
-7. Have a look on the `Resources` tab. See if you can find the CSS, javascript and image files used on this page.
-8. Visit a few of your favourite websites and repeat this process.
-{% endexercise %}
+{% exercise %}  
+1. Open this page in Google Chrome  
+2. View the page source by doing one of the following:  
+    * View > Developer > View Source  
+    * Tools > View Source  
+3. Open the developer tools by doing one of the following:  
+    * View > Developer > Developer Tools  
+    * Tools > Developer Tools  
+4. Use the magnifying glass in the bottom left to hover over bits of the page and find the related HTML.  
+5. Hover over the HTML code in the developer tools box and watch as different parts of the page are highlighted.  
+6. Try changing some of the CSS on the right hand side. To undo any changes just refresh the page.  
+7. Have a look on the `Resources` tab. See if you can find the CSS, javascript and image files used on this page.  
+8. Visit a few of your favourite websites and repeat this process. 
+{% endexercise %}

_sessions/c1s1/1_what_is_a_webpage.md

@@ -23,7 +23,7 @@ Each computer on the internet has an address (an _IP address_) so that requests
 
 IP addresses are a sequence of numbers and '.'s such as `212.58.244.67`. These aren't very easy to remember. Instead the internet works on a domain name system, that matches domain names such as `bbc.co.uk` to IP addresses. 
 
-{% exercise %}
+{% exercise %}  
 Type `212.58.244.67` into your browser's address bar. What happens?
 {% endexercise %}
 

_sessions/c1s1/3_urls_and_dns.md

@@ -0,0 +1,31 @@
+---
+title: Creating an HTML page
+---
+
+One of the nice things about HTML is you don't need any fancy software to test it out on your laptop: all you need is a text editor and a web browser.
+
+{% exercise %}  
+1. Inside your `coding_course` folder create another folder called `first_site`.  
+2. Open Sublime Text.  
+3. Write "Hello"  
+4. Save the file as `index.html` in the `first_site` folder  
+5. Open `index.html` in Chrome. Depending on your version of Chrome  
+    * File > Open ...  
+    * Cmd-o (Mac) or Ctrl-o (Windows)  
+
+{% endexercise %}
+
+### Why index.html?
+
+In the old days of the web, navigating a website was a lot more like moving around the folder system on your laptop. You would go to a base site and there would just be a list of the files and folders available: an index. Because of this `index.html` is still the default file that a server will serve when you navigate to a folder in the web browser. 
+
+{% exercise %}  
+1. Go back to 'index.html' in Sublime Text.  
+2. Change the text to  
+{% highlight html %}
+<h1>Hello</h1>
+{% endhighlight %}
+3. Go back to 'index.html' in Chrome and refresh the page (Cmd-R)
+{% endexercise %}
+
+This is your first line of HTML. It has an open tag and a close tag. They tell your browser to display the text in-between as a heading.