Rework course 1 session 3

Author: tomclose

_sessions/c1s3/1_why_is_css_hard.md

@@ -0,0 +1,46 @@
+---
+title: What's hard about CSS?
+---
+
+You've seen quite a bit of CSS now; it all seems quite straightforward - you write some css, tweak it 'til it looks good and you're done! In theory this is exactly how CSS works and is why CSS is brilliant.
+
+<div style="display: block;margin-left: auto; margin-right: auto; width: 200px;">
+<img src="/assets/cat_pic.jpg" class='img-polaroid' width='200px'>
+</div>
+
+Unfortunately, the realities are not quite so straightforward. Different browsers will render CSS with subtle differences. Take a look at the cat picture above. The styling is relatively simple - all we've done is add a border and a shadow. The following CSS will probably do this in your browser:
+
+{% highlight css %}
+.img-polaroid {
+  padding: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.2);     /* transparent black border */
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+{% endhighlight %}
+
+However, to get this effect in all browsers you need the following:
+
+{% highlight css %}
+.img-polaroid {
+  padding: 4px;
+  background-color: #fff;
+  border: 1px solid #ccc;                           /* grey border for browsers that can't do transparency */
+  border: 1px solid rgba(0, 0, 0, 0.2);             /* put the transparency after for browsers that do */
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* some browers only understand webkit box shadow */
+     -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* others need this */
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+{% endhighlight %}
+
+ **Just because your site looks good in Chrome, doesn't mean it will look good in Internet Explorer.** Making your site look good (or even presentable) in multiple browsers takes time, effort and experience.
+
+### What else is hard about CSS?
+
+About 5 years ago, 'all' you would have had to worry about is the cross-browser display issues. Since then, the mobile web has exploded and you have another (far more important) concern: how will your site look when viewed on a mobile?
+
+Making webpages that look good when viewed at multiple different sizes is a whole new level of complexity.
+
+### Should I just give up then?
+
+You might be the sort of person who relishes this sort of challenge - if so, great! If not, help is at hand ...
+

_sessions/c1s3/2_twitter_bootstrap.md

@@ -0,0 +1,109 @@
+---
+title: Twitter Bootstrap
+---
+
+[Twitter Bootstrap](http://getbootstrap.com) is set of CSS (& Javascript) files, released by the makers of Twitter. 
+
+Twitter Bootstrap is a set of **ready-made CSS files** that provide solutions to **common presentation requirements** in a **cross-browser and responsive** way. To make use of Twitter Bootstrap, you need to do two things:
+
+1. Link to the Twitter Bootstrap stylesheet in the `head` of your html page.
+2. Attach the relevant Twitter Bootstrap class to you html element.
+
+### An example: making a stripy table
+
+Suppose you want a Zebra-esque table like this fine specimen:
+
+<table class='table table-striped'>
+<tbody>
+  <tr>
+    <td>I am a</td>
+    <td>Zebra table!</td>
+  </tr>
+  <tr>
+    <td>Look at my</td>
+    <td>stripes.</td>
+  </tr>
+  <tr>
+    <td>Do you find them</td>
+    <td>beautiful?</td>
+  </tr>
+  <tr>
+    <td>Do you find them</td>
+    <td>mesmerising?</td>
+  </tr>
+  <tr>
+    <td>Wooaahh ..</td>
+    <td>.. such stripiness!</td>
+  </tr>
+
+</tbody>
+</table>
+
+You have a look at the [Twitter Bootstrap table documentation](http://getbootstrap.com/css/#tables) and discover that you need to add the `table table-striped` class to the `<table>` tag:
+
+{% highlight html %}
+<table class="table table-striped">
+  ...
+</table>
+{% endhighlight %}
+
+This will apply the relevant CSS rules from the bootstrap CSS file. If you're interested, you can go into Developer Tools and view the rules that apply e.g.
+
+{% highlight css %}
+/* from line 1950 of bootstrap.css */
+
+.table-striped tbody tr:nth-child(odd) td,
+.table-striped tbody tr:nth-child(odd) th {
+  background-color: #f9f9f9;
+}
+{% endhighlight %}
+
+### Responsive design
+
+**Responsive design** means designing your sites so that they look good on all screen sizes.
+
+Twitter Bootstrap promotes a 'mobile first' philosophy, encouraging you to design your site so that it looks good at all sizes from the very beginning. It provides a lot of useful CSS that helps you to do this.
+
+We're not really going to cover responsive design in depth in class, but the Bootstrap docs do a good job of explaining what's possible. Take a look at the [grid system](http://getbootstrap.com/css/#grid) as an example.
+
+{% exercise %}
+The aim of the rest of this session will be to create the website for ["Sam's Sarnies"](http://code61.github.io/bootstrap_exercise/) using Twitter Bootstrap.
+
+<ol markdown="1">
+<li markdown="1">
+Clone down the repository for the bootstrap exercise: [https://github.com/code61/bootstrap_exercise.git](https://github.com/code61/bootstrap_exercise.git)
+</li>
+<li markdown="1">
+Open `bootstrap_exercise/index.html` in your browser.
+</li>
+<li markdown="1">
+Go to the [Bootstrap](http://getbootstrap.com) website (it's hosted at github, like your `first_site`) and click the `Download Bootstrap` button (not the Download Source).
+</li>
+<li markdown="1">
+Unzip and copy the `dist` folder into the `bootstrap_exercise` folder.
+</li>
+<li markdown="1">
+Open `index.html` in Sublime Text and Chrome.
+</li>
+<li markdown="1">
+Add a link to the twitter bootstrap stylesheet into `index.html`
+
+{% highlight html %}
+<link href='dist/css/bootstrap.css' rel='stylesheet'>
+{% endhighlight %}
+Note that you're using a document-relative link to a file two subfolders down.
+
+</li>
+<li markdown="1">
+Refresh the page in Chrome. Notice how the fonts have changed.
+</li>
+<li markdown="1">
+Add the following line to the `head` section:
+
+{%highlight html %}
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+{% endhighlight %}
+as suggested in the `CSS / Overview` section of the [Bootstrap docs](http://getbootstrap.com/css/#overview-mobile).
+</li>
+</ol>
+{% endexercise %}

_sessions/c1s3/4_twitter_bootstrap.md

@@ -41,7 +41,7 @@ Bootstrap works on a grid layout, with 12 columns (by default). You can create a
 The number after the `col-sm-` determines how many of the 12 grid columns that page column takes up. The `sm` bit determines the width at which the columns will collapse on top of each other (which is useful when viewing your site on a phone). For more information see the [Grid system docs](http://getbootstrap.com/css/#grid).
 
 {% exercise %}
-1. Add a `< div class="container" >` around the page content.
+1. Add a `div class='container'` around the page content.
 2. Create a row at the top of the page, with two columns, with the left twice as wide as the right. Put the `h1` in the left column and the `img src='images/sandwich.png' ` on the right.
 3. Create a row with three equal colums to hold each of 'The Buzz' `div`s.
 {% endexercise %}

_sessions/c1s3/5_bootstrap_layout.md

@@ -17,16 +17,20 @@ Skim through the [typography section](http://getbootstrap.com/css/#type) of the
 Check out the [buttons section](http://getbootstrap.com/css/#buttons) (CSS > Buttons). 
 
 {% exercise %}
-1. Change the 'Send' button to a success button:
-
-        <button class='btn btn-success' >Send<\button>
-
+<ol markdown="1">
+<li markdown="1">Change the 'Send' button to a success button:
+{% highlight html %}
+<button class='btn btn-success' >Send</button>
+{% endhighlight %}
     You might also need `btn-small` in the Recent Activity section.
-
+</li>
+<li markdown="1">
 2. Make the social links at the bottom in to large buttons (we'll colour them later):
-
-        &lt;button class='btn btn-lg' &gt;Send&lt;\button&gt;
-
+{% highlight html %}
+<button class='btn btn-lg' >Send</button>
+{% endhighlight %}
+</li>
+</ol>
 {% endexercise %} 
 
 ### Images
@@ -38,5 +42,3 @@ Have a look at the [image section](http://getbootstrap.com/css/#images) of the B
 2. You can center the image by adding the [helper class](http://getbootstrap.com/css/#helper-classes-center) `center-block`.
 2. Change the main sandwich image into a `img-responsive`, as described in the [responsive images section](http://getbootstrap.com/css/#overview-responsive-images). Try resizing your browser and see how it changes size.
 {% endexercise %}
-
-### 

_sessions/c1s3/6_more_bootstrap.md

@@ -10,55 +10,69 @@ If you're going to modify Bootstrap **don't touch the Bootstrap files**. Instead
 
 
 {% exercise %}
-
-1. Create a file called `main.css` and write the following CSS:
-
-        #social-buttons button {
-          color: white;
-        }
-        .btn-twitter {
-          background-color: #00acee;
-          border-color: #009ad5;
-        }
-
-        .btn-facebook {
-          background-color: #4868ac;
-          border-color: #314776;
-        }
-
-        .btn-pinterest {
-          background-color: #b62f26;
-          border-color: #b62f26;
-        }
-
-2. Link this file into the `head` of `index.html` **underneath your link to bootstrap**.
-3. What happens? Notice how in the first rule we've selected only those buttons that exist inside an element with `id=social-buttons`.
+<ol markdown="1">
+<li markdown="1">
+Create a file called `main.css` and write the following CSS:
+{% highlight css %}
+#social-buttons button {
+  color: white;
+}
+.btn-twitter {
+  background-color: #00acee;
+  border-color: #009ad5;
+}
+
+.btn-facebook {
+  background-color: #4868ac;
+  border-color: #314776;
+}
+
+.btn-pinterest {
+  background-color: #b62f26;
+  border-color: #b62f26;
+}
+{% endhighlight %}
+</li>
+<li markdown="1">
+Link this file into the `head` of `index.html` **underneath your link to bootstrap**.
+</li>
+<li markdown="1">
+What happens? Notice how in the first rule we've selected only those buttons that exist inside an element with `id=social-buttons`.
+</li>
+</ol>
 {% endexercise %}
 
 ### Changing the background
 
 {% exercise %}
-1. Change the background of the `jumbotron` to be the image `fruit-and-veg.png` by adding the css
-
-        .jumbotron {
-          min-height: 600px;
-          background-image: url('images/fruit-and-veg.jpg');
-          background-size: cover;
-          background-attachment: fixed;
-        }
-
-2. This doesn't look quite right. The problem is that the jumbotron is it is inside the `div class="container"`. You can change this by moving it inside:
-
-        &lt;div class="jumbotron"&gt;
-          &lt;div class="container"&gt;
-
-          &lt;/div&gt;
-        &lt;/div&gt;
-
-    Similarly you will now need to create new `container`s inside the `div id="buzz"` and `div id="mission"`.
-
-3. Change the background color of the `mission` section to `rgba(32, 35, 41, 0.9)` and the font colour to `#ddd`
-
+<ol markdown="1">
+<li markdown="1">
+Change the background of the `jumbotron` to be the image `fruit-and-veg.png` by adding the css
+{% highlight css %}
+.jumbotron {
+  min-height: 600px;
+  background-image: url('images/fruit-and-veg.jpg');
+  background-size: cover;
+  background-attachment: fixed;
+}
+{% endhighlight %}
+</li>
+
+<li markdown="1">
+This doesn't look quite right. The problem is that the jumbotron is it is inside the `div class='container'`. You can change this by moving it inside:
+{% highlight html %}
+<div class="jumbotron">
+  <div class="container">
+
+  </div>
+</div>
+{% endhighlight %}
+Similarly you will now need to create new `container`s inside the `div id='buzz'` and `div id='mission'`.
+</li>
+<li markdown="1">
+Change the background color of the `mission` section to `rgba(32, 35, 41, 0.9)` and the font colour to `#ddd`
+</li>
+</ol>
 {% endexercise %}