Added final CSS exercise

Author: Pearl Chen

index.html

@@ -1306,13 +1306,13 @@ <h2>Some Basic Interaction</h2>
 
 <textarea class="coder-editor coder-editor-full">
 &lt;nav&gt;
-  &lt;div&gt;&lt;a href="home.html"&gt;Home&lt;/a&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/div&gt;
   &lt;div&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/div&gt;
   &lt;div&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/div&gt;
 &lt;/nav&gt;
 </textarea>
 <script type='coder-solution'>&lt;nav&gt;
-  &lt;div&gt;&lt;a href="home.html"&gt;Home&lt;/a&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/div&gt;
   &lt;div&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/div&gt;
   &lt;div&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/div&gt;
 &lt;/nav&gt;
@@ -1375,6 +1375,45 @@ <h2>External CSS</h2>
 
     </article>
 
+    <!-- SLIDE: CSS -->
+    <article class='slide slide-list'>
+      <h2>Hands-on time (45 minutes)</h2>
+      <p>Use this time to apply CSS to your 3-page website. Review the afternoon's slides and experiment with some of the properties on the cheatsheet. If you're stuck, here are some suggestions:</p>
+      <ul>
+        <li>Apply <code>width</code>s and <code>float</code>s to <code>&lt;section&gt;</code> and <code>&lt;aside&gt;</code> to make a standard 2-column layout.</li>
+        <li>Create a single <code>styles.css</code> file and link to this external stylesheet using the <code>&lt;link&gt;</code> tag from all 3 webpages.</li>
+        <li>Update your navigation to look more tab- or button-like.</li>
+      </ul>
+      <h3>Got questions?</h3>
+      <p>
+        Post them to Google Moderator: <a href="http://goo.gl/mod/c4cm" target="_blank" >http://goo.gl/mod/c4cm</a>
+      </p>
+    </article>
+
+    <!-- SLIDE: CSS -->
+    <article class='slide slide-list'>
+      <h2>Bonus: Try out web fonts</h2>
+      <p>When you get bored of Arial and Georgia, go to the <a href="http://www.google.com/webfonts/" target="_blank">Google Web Fonts</a> website and find a font that you like.</p>
+      <ol>
+        <li>Click on the "Quick-use" button for that font.</li>
+        <li>Scroll down to find the supplied <code>&lt;link&gt;</code> tag. Copy and paste it into your own HTML file.</li>
+        <li>Integrate the fonts into your CSS by using their supplied <code>font-family</code>. For example, add their <code>font-family</code> to your <code>h1</code> CSS selector.</li>
+        <li>Make sure your files are saved and view your web page in the browser. New fonts are that easy!</li>
+      </ol>
+    </article>
+
+    <!-- SLIDE: CSS -->
+    <article class='slide slide-list'>
+      <h2>Bonus: CSS patterns</h2>
+      <p>CSS is great because it can reduce the number of image files you need to create. You can even create <a href="http://lea.verou.me/css3patterns/#" target="_blank">patterns purely out of CSS</a>!</p>
+      <ol>
+        <li>Click on a pattern that you like.</li>
+        <li>Copy the supplied CSS.</li>
+        <li>Instead of an "ad" in your sidebar, paste the CSS into your <code>aside</code> selector.</li>
+        <li>Or apply it to your <code>body</code> selector to change up the entire page.</li>
+      </ol>
+    </article>
+
     <!-- SLIDE: CSS -->
     <article class='slide slide-list'>
       <h2>CSS reference</h2>