I'm a H2 heading

Download zip file of slides
- and hands-on exercise code from:
- github.com/pchen/LLC-JavaScript

Before we begin, download the zip file containing
+ the slides and hands-on exercise code from:

+ github.com/christinatruong/LLC-JavaScript

Let's get started!

Introduction to JavaScript

+ +

Your instructor today

+ +

Christina Truong

hello@christinatruong.com
+ http://christinatruong.com
+ @christinatruong

(Interactive code slides thanks to CoderDeck!)

(Use the left and right arrow keys on your keyboard to navigate.)

(Use the left and right arrow keys on your keyboard to navigate. When you see a "next" arrow, click on it.)

JavaScript helps make very nice websites!

(Use the left and right arrow keys on your keyboard to navigate.)

(Use the left and right arrow keys on your keyboard to navigate. When you see a "next" arrow, click on it.)

Intro to Functions

We can create our own functions but there are already some handy ones built into JavaScript. There are three functions that are useful for testing and writing code.

- prompt() and alert() show popups in the browser. - document.write() outputs text onto the page, aka the document. + prompt(); and alert(); show popups in the browser. + document.write(); outputs text onto the page, aka the document.

document.write(); is a quick and easy way to output text onto the page but is not best practice for use in "the real world." console.log(); is better.

Comments

- Sometimes you want to write notes to yourself (and others!!) to organize blocks of code or leave explanations. Use comments! JavaScript will ignore comments and not execute them. + Sometimes you want to write notes to yourself (and others) to organize blocks of code or leave explanations. Use comments! JavaScript will ignore comments and not execute them.

 // This is how you leave a single line comment.
@@ -215,8 +219,8 @@ Variables How-to
     
       Variables (cont'd)
       

-      Variables are also like the computer's short-term memory. It doesn't remember anything unless you tell it to.  In this example, the computer can't remember any one's name!
-      But it can remember if we use a variable.
+      Variables are also like the computer's short-term memory. It doesn't remember anything unless instructed.  In this example, the computer can't remember anybody's name!
+      But it can remember it if we use a variable.
 SCRIPT
 
   // prompt() is a function for showing a popup
@@ -278,6 +282,7 @@ <h2>Aside: Statements</h2>
 <pre class='prettyprint'>var email;
 email = "hello@christinatruong.com";
 </pre>
+<p>is the same as</p>
 <pre class='prettyprint'>var email = "hello@christinatruong.com";</pre>
     </article>
 
@@ -624,8 +629,8 @@ <h2><div class="smaller">Mini-exercise (5-10 minutes):</div>
     <article class='slide slide-list'>
       <h2><span style="font-size: 0.8em;">Arithmetic Operators: </span>Numbers vs. Strings</h2>
       <p>Remember how there are different variable types?  Arithmetic operators can only be performed on numerical values.</p>
-      <p>But numbers can come disguised as strings so be careful!</p>
-      <p>When the addition (<code>+</code>) operator is used on strings, it doesn't "add" values, it <span class="keyword">concatenates</span> them.</p>
+      <p>But numbers can be disguised as strings too!</p>
+      <p>When the addition (<code>+</code>) operator is used with string values, it doesn't "add" the values, it <span class="keyword">concatenates</span> them.</p>
 <textarea class='coder-editor'>SCRIPT
 
   var num1 = 20;
@@ -647,7 +652,8 @@ <h2><span style="font-size: 0.8em;">Arithmetic Operators: </span>Numbers vs. Str
     <!-- SLIDE: CONCATENATION -->
     <article class='slide slide-list'>
       <h2>Concatenation</h2>
-      <p>Unlike the other arithmetic operators, the (+) symbol has another purpose other than adding numbers. It is used to join strings together, also known as <span class="keyword">concatenation</span>. You can concatenate variables, strings or a combination of both.</p>  
+      <p>Unlike the other arithmetic operators, the (<code>+</code>) symbol has another purpose other than adding numbers. It is used to join strings together, also known as <span class="keyword">concatenation</span>.</p>
+      <p>You can concatenate variables, strings or a combination of both.</p>  
 <textarea class='coder-editor coder-editor-full'>
 <script>
   document.write("Hello " + "Christina." + "<br />");
@@ -666,7 +672,7 @@ <h2>Concatenation</h2>
     <!-- SLIDE: CONCATENATION -->
     <article class='slide slide-list'>
       <h2>Concatenation and Strings</h2>
-      <p>If you use the (+) operator with only numerical values, it will add the values.  Otherwise, it will combine the outputs as a string.</p>
+      <p>If you use the (<code>+</code>) operator with <strong>only</strong> numerical values, it will add the values.  Otherwise, it will combine the outputs as a string.</p>
 <textarea class='coder-editor coder-editor-full'>
 <script>
   //Addition with the + operator
@@ -720,7 +726,7 @@ <h2>Concatenation Practice</h2>
     <!-- SLIDE: INCREMENT AND DECREMENT -->
     <article class='slide slide-list'>
       <h2>Re-assigning Variables</h2>
-      <p>Even after a value has been set for the first time, we can still overwrite it and
+      <p>Even after a variable has been assigned a value, we can still overwrite it and
       <strong>re-assign</strong> a new value.</p>
       <p>For example, we may want to increase or decrease values.</p>
 <textarea class='coder-editor coder-editor-full'>SCRIPT

From 1108eeb1711715d609167177d4a6d7925411eef5 Mon Sep 17 00:00:00 2001
From: Christina Truong <hello@christinatruong.com>
Date: Wed, 13 Mar 2013 21:37:43 -0400
Subject: [PATCH 06/16] Copy & CSS tweaks for sections index to functions.

---
 index.html            | 56 +++-------------------------------------
 intro.html            | 43 ++++++++++---------------------
 js_functions.html     | 13 ++++------
 js_quick_start.html   | 60 ++++++++++++++++++-------------------------
 src/css/coderdeck.css | 40 ++++++++++++++++++++---------
 tech_overview.html    |  2 +-
 6 files changed, 76 insertions(+), 138 deletions(-)

diff --git a/index.html b/index.html
index 8ee2a3d..999b930 100644
--- a/index.html
+++ b/index.html
@@ -52,60 +52,12 @@ <h2>I'm a H2 heading</h2>
 
     <!-- SLIDE: Next section -->
     <article class='slide slide-list'>
-      <div class="centered">
-        <img src="assets/ladieslearningcode-125x125.gif">
-        <p>Before we begin, download the <strong>zip</strong> file containing<br>
-         the slides and hands-on exercise code from:<br /><br />
-         <a href="https://github.com/christinatruong/LLC-JavaScript">github.com/christinatruong/LLC-JavaScript</a></p>
-         <br />
-        <h3>Let's get started!</h3>
-        <!-- <p><a href="intro.html"><img src="assets/next_section_icon.gif" width="230" height="70" alt="Click to go to next section" /></a></p> -->
+      <div class="centered get-started">
+        <p>Before we begin, download the <strong>zip</strong> file containing the slides and hands-on exercise code from: <a href="https://github.com/christinatruong/LLC-JavaScript">https://github.com/christinatruong/LLC-JavaScript</a></p>
+        <h2>Let's get started!</h2>
+        <p><a href="intro.html"><img src="assets/next_section_icon.gif" width="230" height="70" alt="Click to go to next section" /></a></p>
       </div>
     </article>
-    <!-- SLIDE: Workshop intro -->
-    <article class='slide slide-title intro'>
-      <h1>Introduction to JavaScript</h1>
-  
-      <div class="instructor_holder">
-        <h2>Your instructor today</h2>
-        
-        <img src="assets/christina_avatar.jpg" width="72" height="72" alt="christina truong" />
-        <h4>Christina Truong</h4>
-        <p><a href="mailto:hello@christinatruong.com">hello@christinatruong.com</a><br />
-        <a href="http://christinatruong.com" target="_blank">http://christinatruong.com</a><br />
-        <a href="http://twitter.com/christinatruong" target="_blank">@christinatruong</a></p>
-        <p>(Interactive code slides thanks to <a href="http://cykod.github.com/CoderDeck/" target="_blank" style="color: #999;">CoderDeck</a>!)</p>
-      </div>
-    </article>
-
-    <!-- SLIDE: Course Outline -->
-    <article class='slide slide-list'>
-      <h2>Course Outline</h2>
-      <h3 style="margin-top: 1em;">The morning (break @ ~11:30am)</h3>
-      <ul>
-        <li><a href="tech_overview.html">Development Environment: tools you need to get started</a></li>
-        <li><a href="tech_overview.html#slide-4">Technology Overview: Programming and JavaScript</a></li>
-        <li><a href="js_quick_start.html">Part 1: Getting started with variables and operators</a></li>
-        <li><a href="js_functions.html">Part 2: Functions</a></li>
-      </ul>
-      <h3 style="margin-top: 1em;">After lunch (break @ ~3:30pm)</h3>
-      <ul>
-        <li><a href="js_conditionals.html">Part 3: Making decisions with conditionals</a></li>
-        <li><a href="js_objects.html">Part 4: Objects</a></li>
-        <li><a href="js_dom.html">Part 5: The DOM and manipulating objects on a HTML page</a></li>
-        <!-- <li><a href="js_arrays_loops.html">Part ??: Arrays and Loops</a></li> -->
-      </ul>
-      <h3 style="margin-top: 1em;">Homestretch</h3>
-      <ul>
-        <li><a href="jquery-indepth.html">jQuery Hands-on</a></li>
-        <li><a href="resources.html">Where to go from here?</a></li>
-      </ul>
-    </article>
-
-    <!-- SLIDE: Next section -->
-    <article class='slide slide-list'>
-      <p class="centered vertically_centered"><a href="tech_overview.html"><img src="assets/next_section_icon.gif" width="230" height="70" alt="Click to go to next section" /></a></p>
-    </article>
   
   <!-- **************************************** -->  
   </div>
diff --git a/intro.html b/intro.html
index 02d3672..5b9d35c 100644
--- a/intro.html
+++ b/intro.html
@@ -50,36 +50,19 @@ <h2>I'm a H2 heading</h2>
   <!-- **************************************** -->  
 
     <!-- SLIDE: Workshop intro -->
-    <article class='slide slide-title'>
-      <div class="workshop_title">
-        <h1>Introduction to JavaScript</h1>
-      </div>
+    <article class='slide slide-title intro'>
+      <h1>Introduction to JavaScript</h1>
+  
       <div class="instructor_holder">
-        <h2>Your instructors today</h2>
-        <div>
-          <img src="assets/pearl_avatar.png" width="72" height="72" alt="pearl chen" />
-          <h4>Pearl Chen</h4>
-          pearl [at] <a href="http://karma-laboratory.com" target="_blank">karma-laboratory.com</a>
-          <br />
-          <a href="http://klab.ca/+" target="_blank">klab.ca/+</a>
-          <br />
-          <a href="http://twitter.com/pearlchen" target="_blank">@pearlchen</a>
-        </div>
-        <div>
-          <img src="assets/christina_avatar.jpg" width="72" height="72" alt="christina truong" />
-          <h4>Christina Truong</h4>
-          hello [at] <a href="http://christinatruong.com" target="_blank">christinatruong.com</a>
-          <br />
-          <a href="http://christinatruong.com" target="_blank">christinatruong.com</a>
-          <br />
-          <a href="http://twitter.com/christinatruong" target="_blank">@christinatruong</a>
-        </div>
-        <br  clear="left" />
-        <p style="padding-top: 45px; margin-bottom: 0; font-size: 0.9em; color: #999;">
-        ( Interactive code slides thanks to
-        <a href="http://cykod.github.com/CoderDeck/" target="_blank" style="color: #999;">CoderDeck</a>
-        ! )
-      </p>
+        <h2>Your instructor today</h2>
+        
+        <img src="assets/christina_avatar.jpg" width="72" height="72" alt="christina truong" />
+        <h4>Christina Truong</h4>
+        <p><a href="mailto:hello@christinatruong.com">hello@christinatruong.com</a><br />
+        <a href="http://christinatruong.com" target="_blank">http://christinatruong.com</a><br />
+        <a href="http://twitter.com/christinatruong" target="_blank">@christinatruong</a></p>
+        <br>
+        <p>(Interactive code slides thanks to <a href="http://cykod.github.com/CoderDeck/" target="_blank" style="color: #999;">CoderDeck</a>!)</p>
       </div>
     </article>
 
@@ -116,7 +99,7 @@ <h3 style="margin-top: 1em;">Homestretch</h3>
   </div>
   <!-- END div id=presentation -->
 
-  <div class="centered" style="font-size: 12px; padding-top: 10px;">(Use the left and right arrow keys on your keyboard to navigate.)</div>
+  <div class="centered" style="padding:5px;">(Use the left and right keyboard arrow keys to navigate within sections. Click the "next" arrow to move to the next section.)</div>
 
   <script src='src/jquery.min.js'></script>
   <script src="src/modernizr.js"></script>
diff --git a/js_functions.html b/js_functions.html
index b360063..eb0afcd 100644
--- a/js_functions.html
+++ b/js_functions.html
@@ -91,10 +91,8 @@ <h2>Defining a Function</h2>
     <!-- SLIDE: CALLING FUNCTIONS -->
     <article class='slide slide-list'>
       <h2>Calling a Function</h2>
-      <p>Let's define a function called <code>sayMyName</code> and use <code>alert()</code> to get the computer to "say" our names (functions can be used inside other functions too).</p>
-      <p>
-        Note that the code within a function doesn't execute until it's <strong class="keyword">called</strong>.
-      </p>
+      <p>Let's define a function called <code>sayMyName</code> and use <code>alert()</code> to get the computer to "say" our names. Functions can be used inside other functions too.</p>
+      <p>Note that the code within a function doesn't execute until it's <strong class="keyword">called</strong>.</p>
       <div class="hint single-line">
         <p>We've seen functions being called already!</p>
       </div>
@@ -131,10 +129,9 @@ <h2>Functions & Events</h2>
         The browser executes the JavaScript as soon as the page loads.
       </p>
       <p>
-        But sometimes you need to control when it executes, like when someone rolls over a navigation item or presses a Submit button, otherwise known as an event.
-        <br />
+        But sometimes you need to control when it executes, like when someone rolls over a navigation item or presses a submit button. These are referred to as an events.
       </p>
-      <p>This is another way functions are used.</p>
+      <p>In other words, functions can be used to execute events.</p>
 <textarea class='coder-editor coder-editor-full'>
 <script>
   //define function
@@ -157,7 +154,7 @@ <h2>Functions & Events</h2>
 <input type="button" value="Say my name!" onclick="sayMyName();" >
 </script>
 <br />
-<p class="sidenote">Note: You can even use <code>onclick()</code> on any HTML element</p>
+<p class="sidenote">Note: You can use <code>onclick()</code> on any HTML element</p>
 <pre class="prettyprint sidenote">
   <div onclick="sayMyName();">
     Click here to call the function!
diff --git a/js_quick_start.html b/js_quick_start.html
index 0c7834d..ca469f0 100644
--- a/js_quick_start.html
+++ b/js_quick_start.html
@@ -68,9 +68,8 @@ <h1>JavaScript Part 1</h1>
     <article class='slide slide-list'>
       <h2>JavaScript Exercise Overview</h2>
       <br />
-      <p>You'll want to do things like offer online shopping and print shipping labels!</p>
-      <p>You'll also want to make sure that everything works properly as well.</p>
-      <p>That means customers can't submit empty forms and product totals are calculated properly in their shopping carts.</p>
+      <p>You'll want your site to be capable of offering online shopping and to collect customer information to print shipping labels.</p>
+      <p>You'll also want to make sure that everything works properly as well. That means customers can't submit empty forms and product totals are calculated properly in their shopping carts.</p>
       <p>In order to create a website that can handle these requirements, we will need to learn how to use <span class="keyword">functions</span>, <span class="keyword">variables</span>, and <span class="keyword">conditionals</span>.</p>
     </article>
 
@@ -78,7 +77,7 @@ <h2>JavaScript Exercise Overview</h2>
     <article class='slide slide-list'>
       <h2>Intro to Functions</h2>
       <p>
-        What is something that you do that's very repetitive or a hassle? Wouldn't it be great if it was automated? Or at least hidden away?
+        What is something that you do that's very repetitive or a hassle? Wouldn't it be great if it was automated?
       </p>
       <table width="100%">
         <tr>
@@ -119,9 +118,7 @@ <h2>Intro to Functions</h2>
     <!-- SLIDE: INTRO TO FUNCTIONS cont -->
     <article class='slide slide-list'>
       <h2>Intro to Functions</h2>
-      <p>
-        In the improved way, we can think of step 2 as a function.  We can't see all the steps that happen but we know that if we perform the action of tapping the card, it will execute some instructions that will allow us to pay with the card.
-      </p>
+      <p>We can think of step 2 as a function.  We can't see all the steps that happen but we know that performing the action of tapping the card will execute some instructions that will allow us to pay automatically.</p>
       <table width="100%">
         <tr>
           <th width="50%" align="left" style="font-size:24px;">
@@ -146,9 +143,9 @@ <h2>Intro to Functions</h2>
       <h2>Intro to Functions</h2>
       <br />
       <p><span class="keyword">Functions</span> are used to make the code "do things."</p>
-      <p>To get the function to execute, you have to <strong>call the function</strong>  by using the function name followed by round brackets.</p>
+      <p>To get the function to execute, you have to <strong>call the function</strong>  by using the function <em>name</em> followed by <em>round brackets</em>.</p>
       <p>If the credit card tap was a function in JavaScript, it could look something like this:</p>
-      <p><code>tapCard();</code></p>
+      <p><code>tapCard()</code></p>
     </article>
 
     <article class='slide slide-list'>
@@ -220,7 +217,7 @@ <h2>Variables How-to</h2>
       <h2>Variables (cont'd)</h2>
       <br />
       <p>Variables are also like the computer's short-term memory. It doesn't remember anything unless instructed.  In this example, the computer can't remember anybody's name!</p>
-      <p><strong>But it can remember it if we use a variable.</strong></p>
+      <p><em>But it can remember it if we use a variable.</em></p>
 <textarea class='coder-editor coder-editor-full'>SCRIPT
 
   // prompt() is a function for showing a popup
@@ -271,14 +268,11 @@ <h2>Variables (cont'd)</h2>
     <!-- SLIDE: STATEMENTS -->
     <article class='slide slide-list'>
       <h2>Aside: Statements</h2>
-      <p>End a <span class="keyword">statement</span> with a semicolon (<code>;</code>).</p>
-      <p><strong>Statements</strong> are commands that tell the computer what to do.
-        <br />
-        Ending the statement with a semicolon is like ending a sentence
-        <br />
-        with a period. It tells the computer that the statement is done.
-      </p>
-      <p>You can also declare a variable and its value in one statement.</p>
+      
+      <p><span class="keyword">Statements</span> are commands that tell the computer what to do.<br>
+        End a statement with a semicolon (<code>;</code>) to tell the computer that the statement is done.</p>
+      <p>Ending a statement with a semicolon is like ending a sentence with a period.</p>
+      <p>You can also declare a variable with one or two statements.</p>
 <pre class='prettyprint'>var email;
 email = "hello@christinatruong.com";
 </pre>
@@ -289,7 +283,7 @@ <h2>Aside: Statements</h2>
 
     <!-- SLIDE: AN ASIDE -->
     <article class='slide slide-list'>
-      <h2>Variables: Say My Name</h2>
+      <h2>Say My Name, Say My Name</h2>
       <br />
       <p>Let's try creating some variables.</p>
       <p>Below is an example of a variable for your name. Try creating another variable for your email address.  Output the values using <code>document.write()</code>.</p>
@@ -323,19 +317,16 @@ <h2>Assigning Variables</h2>
       <p><span class="assignment">IMPORTANT!</span></p>
       
       <p>Using the equals (<code>=</code>) symbol in Javascript is <span class="highlight">NOT</span> the same as in math.</p>
-
+      <p>
+        <code>var total = 1 + 1</code>
+        is not the same as
+        <code>1 + 1 = 2</code>
+      </p>
       <p><code>var total = 1 + 1</code> means:<br />
         <span class="keyword">evaluate</span> everything to the <em>right</em> of the equals sign (e.g. <code>1 + 1</code>), 
         <br />then <span class="keyword">assign</span> this value (e.g. the number <code>2</code>) to the variable on the <em>left</em> side.
       </p>
-
       <p>You will see later that we can re-assign new values to an existing variable.</p>
-
-      <p>
-        <code>total = 1 + 1</code>
-        is not the same as
-        <code>1 + 1 = 2</code>
-      </p>
     </article>
 
     <!-- SLIDE: VARIOUS VARIABLES  -->
@@ -393,7 +384,7 @@ <h2>Variables: Tips & Best Practices</h2>
     <br />
       <h2>Variables: Tips & Best Practices</h2>
       <p>
-        When naming a variable, it's best to <strong>give it a descriptive name</strong>.
+        When naming a variable, it's best to give it a descriptive name.
       </p>
       <p>
         It makes it easier to see, at a glance, what kind of value that variable is going to hold.
@@ -414,7 +405,7 @@ <h2>Variables: Tips & Best Practices</h2>
     <article class='slide slide-list'>
       <h2>Variables: Tips & Best Practices</h2>
       <p>
-        Variables <strong>cannot start with a number or any special characters</strong> <em>except</em> for underscores (<code>_</code>) and dollar signs (<code>$</code>).
+        Variables cannot start with a number or any special characters <em>except</em> for underscores (<code>_</code>) and dollar signs (<code>$</code>).
       </p>
       <div class="reminders">
         <p>Although it's valid to use underscore or a dollar sign, they should only be used in special circumstances.
@@ -454,8 +445,7 @@ <h2>Variables: Tips & Best Practices</h2>
       <h2>Whitespace in JavaScript</h2>
       <p>
         <span class="keyword">Whitespace</span> refers to blank characters and includes <strong>spaces</strong>, <strong>tabs</strong> and <strong>line breaks</strong>.
-      </p>
-      <p>JavaScript ignores whitespace except when used in a string.</p>
+      JavaScript ignores whitespace except when used in a string.</p>
 <pre class="prettyprint">
 // both statements are the same to JavaScript
 var name="Christina";
@@ -533,7 +523,7 @@ <h2><div class="smaller">Mini-exercise (5-10 minutes):</div>
     <article class='slide slide-list'>
       <h2>JavaScript Arithmetic Operators</h2>
       <p>We can also use JavaScript to do math using arithmetic <span class="keyword">operators</span>.</p>
-      <p>Arithmetic operators in JavaScript are (+) for addition, (-) for subtraction, (*) for multiplication and (\) for division.</p>
+      <p>Arithmetic operators in JavaScript are (<code>+</code>) for addition, (<code>-</code>) for subtraction, (<code>*</code>) for multiplication and (<code>\</code>) for division.</p>
 <textarea class='coder-editor coder-editor-full'>SCRIPT
 
   document.write("Addition: ");
@@ -627,8 +617,8 @@ <h2><div class="smaller">Mini-exercise (5-10 minutes):</div>
 
     <!-- SLIDE: OPERATORS & ADDING STRINGS VS NUMBERS -->
     <article class='slide slide-list'>
-      <h2><span style="font-size: 0.8em;">Arithmetic Operators: </span>Numbers vs. Strings</h2>
-      <p>Remember how there are different variable types?  Arithmetic operators can only be performed on numerical values.</p>
+      <h2><span style="font-size: 0.8em;">Operators: </span>Numbers vs. Strings</h2>
+      <p>Remember that there are different variable types?  Arithmetic operators can only be performed on numerical values.</p>
       <p>But numbers can be disguised as strings too!</p>
       <p>When the addition (<code>+</code>) operator is used with string values, it doesn't "add" the values, it <span class="keyword">concatenates</span> them.</p>
 <textarea class='coder-editor'>SCRIPT
@@ -726,7 +716,7 @@ <h2>Concatenation Practice</h2>
     <!-- SLIDE: INCREMENT AND DECREMENT -->
     <article class='slide slide-list'>
       <h2>Re-assigning Variables</h2>
-      <p>Even after a variable has been assigned a value, we can still overwrite it and
+      <p>Even after a variable has been assigned a value, we can still override it and
       <strong>re-assign</strong> a new value.</p>
       <p>For example, we may want to increase or decrease values.</p>
 <textarea class='coder-editor coder-editor-full'>SCRIPT
diff --git a/src/css/coderdeck.css b/src/css/coderdeck.css
index b4b2545..efb3b7a 100644
--- a/src/css/coderdeck.css
+++ b/src/css/coderdeck.css
@@ -9,6 +9,9 @@ html, body {
 h1, h2, h3 {
   /*text-transform: uppercase;*/
 }
+.deck-container em {
+  font-weight: 600;
+}
 .deck-container #presentation {
 	
 }
@@ -124,8 +127,6 @@ h1, h2, h3 {
 .deck-container .slide-list li li {
   font-size: 0.5em;
 }
-.deck-container .slide-list p {
-}
 
 .deck-container .slide-subhead h1 {
   font-size: 4em;
@@ -278,7 +279,7 @@ table.comparison-table tr td, table.comparison-table tr th {
 
 .keyword {
   color: #B1009A;
-  font-weight: bold !important;
+  font-weight: 600!important;
   font-style: italic !important;
 }
 
@@ -353,14 +354,29 @@ span.marker {
   font-style: italic !important;
 }
 
-/* intro slide */
+/* Styles for specific slides */
+.deck-container .get-started {
+  padding: 30px 110px 0;
+}
+  .deck-container .get-started h2 {
+    margin-bottom: 20px;
+  }
+  .deck-container .get-started a {
+    margin-top: 40px;
+    display: inline-block;
+  }
+
 .deck-container .intro h1 {
-  top: 140px;
-}
-.deck-container .intro .instructor_holder {
-  margin-top: 250px;
-}
-.instructor_holder img {
-  border-radius: 50%;
-}
+  top: 120px;
+  font-size: 60px;
+}
+  .deck-container .intro .instructor_holder {
+    margin-top: 180px;
+  }
+  .instructor_holder img {
+    border-radius: 50%;
+  }
+  .instructor_holder a {
+    text-decoration: none;
+  }
 
diff --git a/tech_overview.html b/tech_overview.html
index 01dd94b..4d2ae79 100644
--- a/tech_overview.html
+++ b/tech_overview.html
@@ -396,7 +396,7 @@ <h2>A JavaScript Experiment: Results</h2>
         <li>
         And you can't <strong>see</strong> it but most analytics tracking won't work either. </li>
       </ul>
-      <p class="reminders" style="font-size: 2.2em;">
+      <p>
         <strong>The modern web just sort of gives up without JavaScript!</strong>
       </p>
     </article>

From a0d3feb75a9dbe07c2ed96ee906bce99998e546f Mon Sep 17 00:00:00 2001
From: Christina Truong <hello@christinatruong.com>
Date: Wed, 13 Mar 2013 22:05:30 -0400
Subject: [PATCH 07/16] Updated URLs from Pearl's to mine. Some copy tweaks in
 the Functions section.

---
 exercises/jquery-javascript.html            |  2 +-
 exercises/mini-exercise-2.html              |  2 +-
 exercises/shopping_cart_final.html          |  2 +-
 exercises/shopping_cart_products_final.html |  2 +-
 exercises/shopping_cart_products_start.html |  2 +-
 exercises/shopping_cart_shipping_final.html |  2 +-
 exercises/shopping_cart_shipping_start.html |  2 +-
 exercises/solutions/jquery-javascript.html  |  2 +-
 exercises/solutions/quantities-org.txt      |  2 +-
 exercises/solutions/quantities.txt          |  2 +-
 exercises/solutions/quantity-check-org.txt  |  2 +-
 exercises/solutions/quantity-check.txt      |  2 +-
 jquery-indepth.html                         |  4 +--
 js_arrays_loops.html                        |  6 ++--
 js_conditionals.html                        |  2 +-
 js_functions.html                           | 34 ++++++++++-----------
 resources.html                              |  2 +-
 17 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/exercises/jquery-javascript.html b/exercises/jquery-javascript.html
index 617bd32..8377ef9 100644
--- a/exercises/jquery-javascript.html
+++ b/exercises/jquery-javascript.html
@@ -8,7 +8,7 @@
   <body>
 
     <div id="exercise2" style="text-align: center;">
-      <img src="http://pchen.github.com/LLC-JavaScript/exercises/assets/plush-android.jpg" width="195" height="195" />
+      <img src="http://christinatruong.com/LLC-JavaScript/exercises/assets/plush-android.jpg" width="195" height="195" />
       <br />
 
       <!-- remove onclick and replace with jQuery's click event using the class name-->
diff --git a/exercises/mini-exercise-2.html b/exercises/mini-exercise-2.html
index ca09651..ae0608d 100644
--- a/exercises/mini-exercise-2.html
+++ b/exercises/mini-exercise-2.html
@@ -23,7 +23,7 @@
 
 <body>
 <div class="item">
-  <img src="http://pchen.github.com/LLC-JavaScript/exercises/assets/plush-android.jpg" width="195" height="195" /><br />   
+  <img src="http://christinatruong.com/LLC-JavaScript/exercises/assets/plush-android.jpg" width="195" height="195" /><br />   
   <button onclick="addItem();">Add</button>
   <button onclick="removeItem();">Remove</button><br />
   Quantity
diff --git a/exercises/shopping_cart_final.html b/exercises/shopping_cart_final.html
index 68afcd9..2018f3a 100644
--- a/exercises/shopping_cart_final.html
+++ b/exercises/shopping_cart_final.html
@@ -3,7 +3,7 @@
 <head>
 	<title>Planet Robot</title>
 	<link href='http://fonts.googleapis.com/css?family=Fascinate|Titan+One' rel='stylesheet' type='text/css'>
-	<link rel="stylesheet" type="text/css" href="http://pchen.github.com/LLC-JavaScript/exercises/shopping-cart.css">
+	<link rel="stylesheet" type="text/css" href="http://christinatruong.com/LLC-JavaScript/exercises/shopping-cart.css">
 	
 	<script type="text/javascript">
 		/**
diff --git a/exercises/shopping_cart_products_final.html b/exercises/shopping_cart_products_final.html
index 052e018..561ff64 100644
--- a/exercises/shopping_cart_products_final.html
+++ b/exercises/shopping_cart_products_final.html
@@ -2,7 +2,7 @@
 <html>
 <head>
   <title>Planet Robot - Shipping</title>
-  <link rel="stylesheet" href="http://pchen.github.com/LLC-JavaScript/exercises/shopping-cart.css" type="text/css" media="screen" />
+  <link rel="stylesheet" href="http://christinatruong.com/LLC-JavaScript/exercises/shopping-cart.css" type="text/css" media="screen" />
   <style>
   /* Override the styles in the final CSS file */
   #productListings {
diff --git a/exercises/shopping_cart_products_start.html b/exercises/shopping_cart_products_start.html
index 0571699..dc9b5cd 100644
--- a/exercises/shopping_cart_products_start.html
+++ b/exercises/shopping_cart_products_start.html
@@ -2,7 +2,7 @@
 <html>
 <head>
   <title>Planet Robot - Shipping</title>
-  <link rel="stylesheet" href="http://pchen.github.com/LLC-JavaScript/exercises/shopping-cart.css" type="text/css" media="screen" />
+  <link rel="stylesheet" href="http://christinatruong.com/LLC-JavaScript/exercises/shopping-cart.css" type="text/css" media="screen" />
   <style>
   /* Override the styles in the final CSS file */
   #productListings {
diff --git a/exercises/shopping_cart_shipping_final.html b/exercises/shopping_cart_shipping_final.html
index 520ac47..70e0360 100644
--- a/exercises/shopping_cart_shipping_final.html
+++ b/exercises/shopping_cart_shipping_final.html
@@ -3,7 +3,7 @@
 <head>
   <title>Planet Robot - Shipping</title>
   <link href='http://fonts.googleapis.com/css?family=Fascinate|Titan+One' rel='stylesheet' type='text/css'>
-  <link rel="stylesheet" href="http://pchen.github.com/LLC-JavaScript/exercises/shopping-cart.css" type="text/css" media="screen" />
+  <link rel="stylesheet" href="http://christinatruong.com/LLC-JavaScript/exercises/shopping-cart.css" type="text/css" media="screen" />
   <style>
   /* Override the styles in the final CSS file */
   #additionalInfo {
diff --git a/exercises/shopping_cart_shipping_start.html b/exercises/shopping_cart_shipping_start.html
index b3541c2..da4b8f7 100644
--- a/exercises/shopping_cart_shipping_start.html
+++ b/exercises/shopping_cart_shipping_start.html
@@ -3,7 +3,7 @@
 <head>
   <title>Planet Robot - Shipping</title>
   <link href='http://fonts.googleapis.com/css?family=Fascinate|Titan+One' rel='stylesheet' type='text/css'>
-  <link rel="stylesheet" href="http://pchen.github.com/LLC-JavaScript/exercises/shopping-cart.css" type="text/css" media="screen" />
+  <link rel="stylesheet" href="http://christinatruong.com/LLC-JavaScript/exercises/shopping-cart.css" type="text/css" media="screen" />
   <style>
   /* Override the styles in the final CSS file */
   #additionalInfo {
diff --git a/exercises/solutions/jquery-javascript.html b/exercises/solutions/jquery-javascript.html
index 811fa0b..b63a444 100644
--- a/exercises/solutions/jquery-javascript.html
+++ b/exercises/solutions/jquery-javascript.html
@@ -8,7 +8,7 @@
   <body>
 
     <div id="exercise2" style="text-align: center;">
-      <img src="http://pchen.github.com/LLC-JavaScript/exercises/assets/plush-android.jpg" width="195" height="195" />
+      <img src="http://christinatruong.com/LLC-JavaScript/exercises/assets/plush-android.jpg" width="195" height="195" />
       <br />
 
       <!-- removed onclick and replaced with jQuery's click event referencing the class name-->
diff --git a/exercises/solutions/quantities-org.txt b/exercises/solutions/quantities-org.txt
index 2ac1d79..e69f028 100644
--- a/exercises/solutions/quantities-org.txt
+++ b/exercises/solutions/quantities-org.txt
@@ -35,7 +35,7 @@
 
 <link rel="stylesheet" href="exercises/slides.css" type="text/css" />
 <div class="item">
-  <img src="http://pchen.github.com/LLC-JavaScript/exercises/assets/plush-android.jpg" width="195" height="195" />
+  <img src="http://christinatruong.com/LLC-JavaScript/exercises/assets/plush-android.jpg" width="195" height="195" />
   <br />
   <button onclick="addItem();">Add</button>
   <button onclick="removeItem();">Remove</button>
diff --git a/exercises/solutions/quantities.txt b/exercises/solutions/quantities.txt
index 9e78aca..7f247d2 100644
--- a/exercises/solutions/quantities.txt
+++ b/exercises/solutions/quantities.txt
@@ -35,7 +35,7 @@
 
 <link rel="stylesheet" href="exercises/slides.css" type="text/css" />
 <div class="item">
-  <img src="http://pchen.github.com/LLC-JavaScript/exercises/assets/plush-android.jpg" width="195" height="195" />
+  <img src="http://christinatruong.com/LLC-JavaScript/exercises/assets/plush-android.jpg" width="195" height="195" />
   <br />
   <button onclick="addItem();">Add</button>
   <button onclick="removeItem();">Remove</button>
diff --git a/exercises/solutions/quantity-check-org.txt b/exercises/solutions/quantity-check-org.txt
index 03eae3d..c4ab789 100644
--- a/exercises/solutions/quantity-check-org.txt
+++ b/exercises/solutions/quantity-check-org.txt
@@ -49,7 +49,7 @@
 </script>
 
 <div id="exercise2" style="text-align: center;">
-  <img src="http://pchen.github.com/LLC-JavaScript/exercises/assets/plush-android.jpg" width="195" height="195" />
+  <img src="http://christinatruong.com/LLC-JavaScript/exercises/assets/plush-android.jpg" width="195" height="195" />
   <br />
   <button onclick="addItem();">Add</button>
   <button onclick="removeItem();">Remove</button>
diff --git a/exercises/solutions/quantity-check.txt b/exercises/solutions/quantity-check.txt
index 7798710..3bf49e9 100644
--- a/exercises/solutions/quantity-check.txt
+++ b/exercises/solutions/quantity-check.txt
@@ -56,7 +56,7 @@
 </script>
 
 <div id="exercise2" style="text-align: center;">
-  <img src="http://pchen.github.com/LLC-JavaScript/exercises/assets/plush-android.jpg" width="195" height="195" />
+  <img src="http://christinatruong.com/LLC-JavaScript/exercises/assets/plush-android.jpg" width="195" height="195" />
   <br />
   <button onclick="addItem();">Add</button>
   <button onclick="removeItem();">Remove</button>
diff --git a/jquery-indepth.html b/jquery-indepth.html
index 5f2a39e..8f77457 100644
--- a/jquery-indepth.html
+++ b/jquery-indepth.html
@@ -247,8 +247,8 @@ <h2><script src=""></h2>
     <!-- SLIDE: EXTERNAL FILES -->
     <article class='slide slide-list'>
       <h2>In the external file</h2>
-      <p>In the <a href="http://pchen.github.com/LLC-JavaScript/exercises/scripts.js" target="_blank">external JavaScript file (scripts.js)</a> you don't include script tags; just JavaScript code. </p>
-      <p>View this example: <a href="http://pchen.github.com/LLC-JavaScript/exercises/external-javascript.html" target="_blank">http://pchen.github.com/LLC-JavaScript/exercises/external-javascript.html</a></p>
+      <p>In the <a href="http://christinatruong.com/LLC-JavaScript/exercises/scripts.js" target="_blank">external JavaScript file (scripts.js)</a> you don't include script tags; just JavaScript code. </p>
+      <p>View this example: <a href="http://christinatruong.com/LLC-JavaScript/exercises/external-javascript.html" target="_blank">http://christinatruong.com/LLC-JavaScript/exercises/external-javascript.html</a></p>
     </article>
       
     <!-- SLIDE: SCRIPT TAG GOTCHAS -->
diff --git a/js_arrays_loops.html b/js_arrays_loops.html
index 2d13b4c..42433ed 100644
--- a/js_arrays_loops.html
+++ b/js_arrays_loops.html
@@ -449,14 +449,14 @@ <h2>Mini-exercise #6 (10-15 minutes)</h2>
       </p>
       <p>
         Download the HTML exercise file:
-        <a href="http://pchen.github.com/LLC-JavaScript/exercises/shopping_cart_products_start.html">exercises/shopping_cart_products_start.html</a>
+        <a href="http://christinatruong.com/LLC-JavaScript/exercises/shopping_cart_products_start.html">exercises/shopping_cart_products_start.html</a>
       </p>
       <p class="assignment">TODO: Check within the code for your THREE tasks.</p>
 
       <p class="sidenote">
         If you're stuck, here's the solution file:
-        <a href="http://pchen.github.com/LLC-JavaScript/exercises/shopping_cart_products_final.html">
-          http://pchen.github.com/LLC-JavaScript/exercises/shopping_cart_products_final.html
+        <a href="http://christinatruong.com/LLC-JavaScript/exercises/shopping_cart_products_final.html">
+          http://christinatruong.com/LLC-JavaScript/exercises/shopping_cart_products_final.html
         </a>
       </p>
     </article>
diff --git a/js_conditionals.html b/js_conditionals.html
index 102c964..cd5e1bf 100644
--- a/js_conditionals.html
+++ b/js_conditionals.html
@@ -611,7 +611,7 @@ <h2><div class="smaller">Mini-exercise (10 minutes)</div>
 </script>
 
 <div id="exercise2" style="text-align: center;">
-  <img src="http://pchen.github.com/LLC-JavaScript/exercises/assets/plush-android.jpg" width="195" height="195" />
+  <img src="http://christinatruong.com/LLC-JavaScript/exercises/assets/plush-android.jpg" width="195" height="195" />
   <br />
   <button onclick="addItem();">Add</button>
   <button onclick="removeItem();">Remove</button>
diff --git a/js_functions.html b/js_functions.html
index eb0afcd..cde856c 100644
--- a/js_functions.html
+++ b/js_functions.html
@@ -71,12 +71,12 @@ <h2>Functions in JavaScript</h2>
     <article class='slide slide-list'>
       <h2>Defining a Function</h2>
       <p>
-        To create a function, it needs to be <strong class="keyword">defined</strong>
+        To create a function, it needs to be <strong>defined</strong>
         first.
       </p>
       <p>
         There are different ways to define a function, but the most common way is using the
-        <code>function</code> <strong class="keyword">keyword</strong>.
+        <code>function</code> <em>keyword</em>.
       </p>
       <p>
         The keyword is followed by the function <strong class="keyword">name</strong>, of your choosing, and round brackets <code>()</code>. And finally, the code to be executed are enclosed within curly braces <code>{ }</code>.
@@ -91,8 +91,8 @@ <h2>Defining a Function</h2>
     <!-- SLIDE: CALLING FUNCTIONS -->
     <article class='slide slide-list'>
       <h2>Calling a Function</h2>
-      <p>Let's define a function called <code>sayMyName</code> and use <code>alert()</code> to get the computer to "say" our names. Functions can be used inside other functions too.</p>
-      <p>Note that the code within a function doesn't execute until it's <strong class="keyword">called</strong>.</p>
+      <p>Let's define a function called <code>sayMyName</code> and use <code>alert()</code> to get the computer to "say" our names. The code within a function doesn't execute until it's <span class="keyword">called</span>.</p>
+      <p>Functions can also be used inside other functions too.</p>
       <div class="hint single-line">
         <p>We've seen functions being called already!</p>
       </div>
@@ -129,7 +129,7 @@ <h2>Functions & Events</h2>
         The browser executes the JavaScript as soon as the page loads.
       </p>
       <p>
-        But sometimes you need to control when it executes, like when someone rolls over a navigation item or presses a submit button. These are referred to as an events.
+        But sometimes you need to control when it executes, like when someone rolls over a navigation item or presses a submit button. These are referred to as an <span class="keyword">events</span>.
       </p>
       <p>In other words, functions can be used to execute events.</p>
 <textarea class='coder-editor coder-editor-full'>
@@ -250,7 +250,7 @@ <h2><div class="smaller">Mini-exercise (5-10 minutes):</div>
 
 <link rel="stylesheet" href="exercises/slides.css" type="text/css" />
 <div class="item">
-  <img src="http://pchen.github.com/LLC-JavaScript/exercises/assets/plush-android.jpg" width="195" height="195" />
+  <img src="http://christinatruong.com/LLC-JavaScript/exercises/assets/plush-android.jpg" width="195" height="195" />
   <br />
   <button onclick="addItem();">Add</button>
   <button onclick="removeItem();">Remove</button>
@@ -269,7 +269,7 @@ <h2><div class="smaller">Mini-exercise (5-10 minutes):</div>
     <article class='slide slide-list'>
       <h2>Functions in Functions</h2>
       <p>
-        Let's take another look at our code and see what the functions are doing.
+        Let's take a closer look at our functions.
       </p>
 <pre class="prettyprint">
 <script>
@@ -290,9 +290,9 @@ <h2>Functions in Functions</h2>
 </script>
 
 <!-- HTML and CSS -->
-<link rel="stylesheet" href="http://pchen.github.com/LLC-JavaScript/exercises/slides.css" type="text/css" media="screen" />
+<link rel="stylesheet" href="http://christinatruong.com/LLC-JavaScript/exercises/slides.css" type="text/css" media="screen" />
 <div class="item">
-  <img src="http://pchen.github.com/LLC-JavaScript/exercises/assets/plush-android.jpg" width="195" height="195" />
+  <img src="http://christinatruong.com/LLC-JavaScript/exercises/assets/plush-android.jpg" width="195" height="195" />
   <br />
   <button onclick="<strong>addItem()</strong>;">Add</button>
   <button onclick="<strong>removeItem()</strong>;">Remove</button>
@@ -311,7 +311,7 @@ <h2>Functions in Functions</h2>
     <article class='slide slide-list'>
       <h2><div class="smaller">Mini-exercise (5-10 minutes):</div>
         Quantities and Total Cost</h2>
-      <p>Let's re-visit the Quantities exercise and add a text field to show the total cost. If the Android plushie cost $20 <strong>each</strong>, how do we calculate the total cost? </p>
+      <p>Let's re-visit the Quantities exercise and add a text field to show the total cost. If the Android plushie cost $20 <strong>each</strong>, how do we calculate the <strong>total cost</strong>? </p>
 
 <textarea class='coder-editor coder-editor-full'>SCRIPT
   var quantity = 0;
@@ -345,7 +345,7 @@ <h2><div class="smaller">Mini-exercise (5-10 minutes):</div>
 
 <link rel="stylesheet" href="exercises/slides.css" type="text/css" media="screen" />
 <div class="item">
-  <img src="http://pchen.github.com/LLC-JavaScript/exercises/assets/plush-android.jpg" width="195" height="195" /><br />  
+  <img src="http://christinatruong.com/LLC-JavaScript/exercises/assets/plush-android.jpg" width="195" height="195" /><br />  
   <div id="price">$20 each</div>
   <button onclick="addItem();">Add</button>
   <button onclick="removeItem();">Remove</button><br />
@@ -385,7 +385,7 @@ <h2><div class="smaller">Mini-exercise (5-10 minutes):</div>
 
 <link rel="stylesheet" href="exercises/slides.css" type="text/css" media="screen" />
 <div class="item">
-  <img src="http://pchen.github.com/LLC-JavaScript/exercises/assets/plush-android.jpg" width="195" height="195" /><br />  
+  <img src="http://christinatruong.com/LLC-JavaScript/exercises/assets/plush-android.jpg" width="195" height="195" /><br />  
   <div id="price">$20 each</div>
   <button onclick="addItem();">Add</button>
   <button onclick="removeItem();">Remove</button><br />
@@ -591,7 +591,7 @@ <h2>Functions, Pizza and Parameters</h2>
     <article class='slide slide-list'>
       <h2>Review: Functions and Parameters</h2>
       <p>Functions are more flexible when used with parameters because variables can be <strong>passed</strong> into the function.</p>
-      <p>In the <code>makePizza()</code> function, the variables from inside the function were removed and added as parameters. Now when we call the function we can pass the values right into the function.</p>
+      <p>In the <code>makePizza()</code> function, the variables from inside the function were removed and added as parameters. Now when we <em>call</em> the function we can <em>pass</em> the values right into the function.</p>
       <img src="assets/function-parameters.jpg" alt="function-parameters" width="800" height="469" />
     </article>
 
@@ -637,7 +637,7 @@ <h2>Inline JavaScript</h2>
     <!-- SLIDE: Code Editor -->
     <article class='slide slide-list'>
       <h2>Using a Code Editor</h2>
-      <p>Go to the <code>exercises</code> folder and open up <code><a href="http://pchen.github.com/LLC-JavaScript/exercises/pizzaMaking.html" target="_blank">pizzaMaking.html</a></code><br>
+      <p>Go to the <code>exercises</code> folder and open up <code><a href="http://christinatruong.com/LLC-JavaScript/exercises/pizzaMaking.html" target="_blank">pizzaMaking.html</a></code><br>
 <span class="sidenote">(Psst: It's also in the ZIP folder that you downloaded earlier today.)</span>      </p>
       <div class="centered contains_sidebyside_icons">
         <a href="http://www.sublimetext.com" target="_blank"><img src="assets/SublimeTextIcon.jpg" width="125" height="125" alt="Sublime Text 2" /></a>
@@ -671,11 +671,11 @@ <h2><div class="smaller">Mini-exercise (now until lunch)</div>
       <p>2. Use inline JavaScript and write a new function that makes wings with these 3 variations:</p>
       <ul>
         <li>Style <span class="sidenote">e.g. crispy or regular</span></li>
-        <li>Hotness <span class="sidenote">e.g. mild, medium, hot</span></li>
+        <li>Spice Level <span class="sidenote">e.g. mild, medium, hot</span></li>
         <li>Sauce <span class="sidenote">e.g. BBQ, honey mustard, buffalo, Thai</span></li>
       </ul>
-      <p>3. Use function parameters and a single function to make the job of creating multiple types and flavours of wings easier -- versus writing multiple wing making functions.</p>
-      <p class="sidenote">If you're really stuck, go to the <code>solutions</code> folder and open up <code><a href="http://pchen.github.com/LLC-JavaScript/exercises/solutions/wingMaking.html" target="_blank">wingMaking.html</a></code>
+      <p>3. Use <em>parameters</em> in a single function to create multiple types and flavours of wings easier -- versus writing multiple wing making functions.</p>
+      <p class="sidenote">If you're really stuck, go to the <code>solutions</code> folder and open up <code><a href="http://christinatruong.com/LLC-JavaScript/exercises/solutions/wingMaking.html" target="_blank">wingMaking.html</a></code>
     </article>
     
     <!-- SLIDE: Next section -->
diff --git a/resources.html b/resources.html
index 92ef33d..848fa28 100644
--- a/resources.html
+++ b/resources.html
@@ -101,7 +101,7 @@ <h2>Online tutorials or courses</h2>
       <article class='slide slide-list'>
         <h2>Debugging</h2>
         <p>Become more effiecent with your dev tools. Learn how to debug using the Chrome Developer Tools.</p>
-        <p><a href="http://pchen.github.com/LLC-JavaScript/js_debugging.html" target="_blank">Ladies Learning Code: Going Beyond JavaScript Basics</a></p>
+        <p><a href="http://christinatruong.com/LLC-JavaScript/js_debugging.html" target="_blank">Ladies Learning Code: Going Beyond JavaScript Basics</a></p>
       </article>
 
       <article class='slide slide-title'>

From 8adee9b8806a3cd7eb3e5980377bfe6b59bb459e Mon Sep 17 00:00:00 2001
From: Christina Truong <hello@christinatruong.com>
Date: Wed, 13 Mar 2013 23:10:31 -0400
Subject: [PATCH 08/16] Copy tweaks.

---
 intro.html           |  2 +-
 jquery-indepth.html  |  8 ++++----
 js_conditionals.html | 16 ++++++++--------
 js_objects.html      |  4 ++--
 js_quick_start.html  |  4 ++--
 resources.html       | 38 +++++++++++---------------------------
 6 files changed, 28 insertions(+), 44 deletions(-)

diff --git a/intro.html b/intro.html
index 5b9d35c..c6f8170 100644
--- a/intro.html
+++ b/intro.html
@@ -2,7 +2,7 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>Ladies Learning Code - JavaScript Oct 13, 2012</title>
+  <title>Ladies Learning Code - Intro to JavaScript</title>
   <meta name="viewport" content="width=1280">
 
   <!-- CoderDeck core and extension CSS files -->
diff --git a/jquery-indepth.html b/jquery-indepth.html
index 8f77457..5e69cdd 100644
--- a/jquery-indepth.html
+++ b/jquery-indepth.html
@@ -65,7 +65,7 @@ <h2>jQuery: A brief introduction</h2>
         
 		  <p>jQuery is a cross-browser JavaScript library designed to simplify client-side scripting, manipulating HTML pages, animating and handling events.</p>
 
-      <p>jQuery is still JavaScript. It is a library of functions built on top of JavaScript to simplify your program. It does, however, have it's own syntax as well.</p>
+      <p><strong>jQuery is still JavaScript.</strong> It is a library of functions built on top of JavaScript to simplify your program. It does, however, have it's own syntax as well.</p>
 
       <p>The library contains many, many built-in functions and methods. It's not an easy task to remember them all.  Never fear, jQuery has documented their API here: <a href="http://api.jquery.com/" target="_blank">http://api.jquery.com</a>.</p>
 
@@ -265,9 +265,9 @@ <h2>script tag gotchas</h2>
     <!-- SLIDE: Included jQuery -->
     <article class='slide slide-list'>
       <h2>jQuery: Getting started</h2>
-      <p>To make use of the jQuery library, it needs to be included on your web page using an external file. There are two ways to include the file.</p>
+      <p>To make use of the jQuery library, it needs to be included on the web page using an external file. There are two ways to include the file.</p>
 
-      <p>1. <a href="http://docs.jquery.com/Downloading_jQuery" target="_blank">Download</a> the jQuery library and include it with the rest of your files.</p>
+      <p>1. <a href="http://docs.jquery.com/Downloading_jQuery" target="_blank">Download</a> the jQuery library and include it with your files.</p>
 <pre class="prettyprint">
 <script type="text/javascript" src="jquery.js"></script>
 </pre>
@@ -360,7 +360,7 @@ <h2>jQuery Events</h2>
     <!-- SLIDE: jQuery and JavaScript-->
     <article class='slide slide-list'>
       <h2>jQuery AND JavaScript</h2>
-      <p>jQuery may have its own syntax and methods but it's still JavaScript at<br /> its core. Let's look at a previous example and see how jQuery and JavaScript work together.</p>
+      <p>jQuery may have its own syntax and methods but it's still JavaScript at its core. Let's look at a previous example and see how jQuery and JavaScript work together.</p>
 
       <p>In the exercises folder, open <a href="exercises/jquery-javascript.html" target="_blank">jquery-javascript.html</a> and <a href="exercises/jquery-javascript.js" target="_blank">jquery-javascript.js</a>.</p>
       <p>While it works using pure JavaScript, the functions are currently being called "inline" by adding an <code>onclick</code> directly in the element. It's best practice to avoid inline event handlers.</p>
diff --git a/js_conditionals.html b/js_conditionals.html
index cd5e1bf..b820ef6 100644
--- a/js_conditionals.html
+++ b/js_conditionals.html
@@ -2,7 +2,7 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>Ladies Learning Code - JavaScript Oct 13, 2012</title>
+  <title>Ladies Learning Code - Intro to JavaScript</title>
   <meta name="viewport" content="width=1280">
 
   <!-- CoderDeck core and extension CSS files -->
@@ -181,7 +181,7 @@ <h2><code>if/else</code> Conditionals</h2>
             <pre class="prettyprint"  style="font-size: 24px; border: none;">
 if ( weather == rain ) {
     bringUmbrella();
-}else{
+} else {
     dressNormally();
 }
             </pre>
@@ -192,7 +192,7 @@ <h2><code>if/else</code> Conditionals</h2>
       
            <!-- SLIDE:  -->
 <article class='slide slide-list'>
-        <h2><code>if/else if/else</code> Conditionals</h2>
+        <h2><code>if/else else if</code> Conditionals</h2>
         <p>It shouldn't snow and rain at the same time so sometimes these conditions are mutually <em>exclusive</em>. </p>
         <table>
         <tr>
@@ -211,9 +211,9 @@ <h2><code>if/else if/else</code> Conditionals</h2>
             <pre class="prettyprint" style="font-size: 24px; border: none;">
 if ( weather == rain ) {
     bringUmbrella();
-}else if ( weather == snow ) {
+} else if ( weather == snow ) {
     wearWarmBoots();
-}else{
+} else {
     dressNormally();
 }
             </pre>
@@ -226,7 +226,7 @@ <h2><code>if/else if/else</code> Conditionals</h2>
           <!-- SLIDE:  -->
       <article class='slide slide-list'>
         <h2>Conditionals used for UI elements</h2>
-        <p>A basic conditional that your browser does internally is a react to mouse clicks on a HTML element.</p>
+        <p>A basic conditional that your browser does internally is to react to mouse clicks on a HTML element.</p>
         <p><img src="assets/thenewdesignguidelines-pull.gif" width="121" height="221" alt="" align="left" style="margin-right: 30px;"/></p>
         
         <p><br>
@@ -747,7 +747,7 @@ <h2><div class="smaller">Mini-exercise (15-20 minutes)</div>
     <p class="solution-link">If you get stuck, <a href="exercises/solutions/complex-form-validation.txt" target="_blank">click here</a> for  the full solution.<br />Or if you want to reset, <a href="exercises/solutions/complex-form-validation-org.txt" target="_blank">click here</a> for the original code.</p>
 
       <p>
-        Bonus: There's always different ways to get to the same end goal. If you're finished early, try out different ways that you can reduce the number of variables and lines of code.
+        <strong>Bonus:</strong> There's always different ways to get to the same end goal. If you're finished early, try out different ways that you can reduce the number of variables and lines of code.
       </p>
 
     </article>
@@ -761,7 +761,7 @@ <h2><div class="smaller">Mini-exercise (15-20 minutes)</div>
   </div>
   <!-- END div id=presentation -->
 
-  <div class="centered" style="font-size: 12px; padding-top: 10px;">(Use the left and right arrow keys on your keyboard to navigate.)</div>
+  <div class="centered" style="padding:5px;">(Use the left and right keyboard arrow keys to navigate within sections. Click the "next" arrow to move to the next section.)</div>
 
   <script src='src/jquery.min.js'></script>
   <script src="src/modernizr.js"></script>
diff --git a/js_objects.html b/js_objects.html
index 0bee7c6..8e638c6 100644
--- a/js_objects.html
+++ b/js_objects.html
@@ -190,7 +190,7 @@ <h2>Built-in JavaScript Properties</h2>
       <p>Let's look at a string object and the <code>length</code> property which returns the number of characters in a string.  Try putting your own name in here.</p>
 <textarea class='coder-editor'>SCRIPT
 
-var firstName = "Pearl";
+var firstName = "Christina";
 
 var numLetters = firstName.length;
 document.write( "numLetters: " + 
@@ -315,7 +315,7 @@ <h3>Object Methods</h3>
 var emailTemplate = "Dear [First Name], thank you for subscribing.";
 
 // uh-oh, let's make this more personal
-var emailFinal = emailTemplate.replace("[First Name]", "Pearl") 
+var emailFinal = emailTemplate.replace("[First Name]", "Christina") 
 document.write( emailFinal ); 
 
 SCRIPTEND</script>
diff --git a/js_quick_start.html b/js_quick_start.html
index ca469f0..256843e 100644
--- a/js_quick_start.html
+++ b/js_quick_start.html
@@ -2,7 +2,7 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>Ladies Learning Code - JavaScript Oct 13, 2012</title>
+  <title>Ladies Learning Code - Intro to JavaScript</title>
   <meta name="viewport" content="width=1280">
 
   <!-- CoderDeck core and extension CSS files -->
@@ -649,7 +649,7 @@ <h2>Concatenation</h2>
   document.write("Hello " + "Christina." + "<br />");
 
   var greeting = "Hello";
-  var name = " Pearl.";
+  var name = " Your name.";
   document.write(greeting + name);
 
   document.write("<br />" + greeting + " ladies learning Javascript.");
diff --git a/resources.html b/resources.html
index 848fa28..9be09bb 100644
--- a/resources.html
+++ b/resources.html
@@ -104,33 +104,17 @@ <h2>Debugging</h2>
         <p><a href="http://christinatruong.com/LLC-JavaScript/js_debugging.html" target="_blank">Ladies Learning Code: Going Beyond JavaScript Basics</a></p>
       </article>
 
-      <article class='slide slide-title'>
-      <div class="workshop_title">
-        <h1>Introduction to JavaScript</h1>
-        <br /><br /><br /><br />
-        <h1>FIN</h1>      
-      </div>
-      <div class="instructor_holder" style="margin-top:50px">
-        <h2>Your instructors today</h2>
-        <div>
-          <img src="assets/pearl_avatar.png" width="72" height="72" alt="pearl chen" />
-          <h4>Pearl Chen</h4>
-          pearl [at] karma-laboratory.com
-          <br />
-          <a href="http://klab.ca/+" target="_blank">klab.ca/+</a>
-          <br />
-          <a href="http://twitter.com/@androidsNsheep" target="_blank">@androidsNsheep</a>
-        </div>
-        <div>
-          <img src="assets/christina_avatar.jpg" width="72" height="72" alt="christina truong" />
-          <h4>Christina Truong</h4>
-          hello [at] christinatruong.com
-          <br />
-          <a href="http://christinatruong.com" target="_blank">christinatruong.com</a>
-          <br />
-          <a href="http://twitter.com/@christinatruong" target="_blank">@christinatruong</a>
-        </div>
-        <br  clear="left" />
+      <article class='slide slide-title intro'>
+        <h1>~FIN~</h1>      
+    
+      <div class="instructor_holder">
+        <h2>Your instructor today</h2>
+        
+        <img src="assets/christina_avatar.jpg" width="72" height="72" alt="christina truong" />
+        <h4>Christina Truong</h4>
+        <p><a href="mailto:hello@christinatruong.com">hello@christinatruong.com</a><br />
+        <a href="http://christinatruong.com" target="_blank">http://christinatruong.com</a><br />
+        <a href="http://twitter.com/christinatruong" target="_blank">@christinatruong</a></p>
       </div>
     </article>
 

From 9e253aa9230d8208739619ca346ccdaf640303bf Mon Sep 17 00:00:00 2001
From: Christina Truong <hello@christinatruong.com>
Date: Sat, 16 Mar 2013 01:22:30 -0400
Subject: [PATCH 09/16] Updating typos, original workshop was on a Sunday, so
 updated some boolean examples to reflect the day change of workshop.

---
 js_conditionals.html  | 14 +++++++-------
 js_dom.html           |  2 +-
 js_quick_start.html   |  6 +++---
 src/css/coderdeck.css |  6 +++---
 4 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/js_conditionals.html b/js_conditionals.html
index b820ef6..75fd1c3 100644
--- a/js_conditionals.html
+++ b/js_conditionals.html
@@ -341,24 +341,24 @@ <h2>Testing Conditions</h2>
 }
 
 // COMPARING VARIABLES AS BOOLEANS
-var isSunday = true;
-var isSaturday = false;
+var isSunday = false;
+var isSaturday = true;
 
 if ( isSunday == true ) {
-  document.write( "#5 Yeah, laundry day! <br />" );
+  document.write( "#3 Yeah, laundry day! <br />" );
 }
 
 if ( isSaturday == true ) {
-  document.write( "#6 Nope, you can't go back in time! <br />" );
+  document.write( "#4 Yay, one more day til the weekend is over! <br />" );
 }
 
 // COMPARING NUMBERS
 if ( 1 < 2 ) {
-  document.write( "#3 workks. <br />" );
+  document.write( "#5 works. <br />" );
 }
 
 if ( 2 > 1 ) {
-  document.write( "#4 won't work. <br />" );
+  document.write( "#6 works. <br />" );
 }
 
 // COMPARING STRINGS
@@ -504,7 +504,7 @@ <h3>More Conditional  Examples</h3>
 } else if ( salePrice == regularPrice) {
   //document.write("#3 Only buy it if you reeeaallly want it! <br />");
 } else {
-  //document.write("# Buy two in different colours! <br />");
+  //document.write("#3 Buy two in different colours! <br />");
 }
 </script>
       
diff --git a/js_dom.html b/js_dom.html
index 50c71d3..0758f5f 100644
--- a/js_dom.html
+++ b/js_dom.html
@@ -103,7 +103,7 @@ HTML Element Objects
  <div id="status">
   <p>Loading...>/p>
-  <p><img src="assets/loading.gif"></p>
+  <p><img src="assets/loading.gif"</p>
 </div>
 
       
diff --git a/js_quick_start.html b/js_quick_start.html
index 256843e..dc2914c 100644
--- a/js_quick_start.html
+++ b/js_quick_start.html
@@ -340,8 +340,8 @@ Various Variables

2. Boolean variable (true/false)

-var isSaturday = false;
-var isSunday = true;
+var isSaturday = true;
+var isSunday = false;

3. String variable (letters, words & sentences)

@@ -523,7 +523,7 @@ Mini-exercise (5-10 minutes):
     
       JavaScript Arithmetic Operators
       We can also use JavaScript to do math using arithmetic operators.
-      Arithmetic operators in JavaScript are (+) for addition, (-) for subtraction, (*) for multiplication and (\) for division.
+      Arithmetic operators in JavaScript are (+) for addition, (-) for subtraction, (*) for multiplication and (/) for division.
 SCRIPT
 
   document.write("Addition: ");
diff --git a/src/css/coderdeck.css b/src/css/coderdeck.css
index efb3b7a..a782f67 100644
--- a/src/css/coderdeck.css
+++ b/src/css/coderdeck.css
@@ -13,7 +13,7 @@ h1, h2, h3 {
   font-weight: 600;
 }
 .deck-container #presentation {
-	
+	margin-top: 15px;
 }
 .deck-container {
   /*font-family: 'Istok Web', Arial, sans-serif;*/
@@ -113,8 +113,8 @@ h1, h2, h3 {
   font-size: 1.8em;	
 }
 .deck-container .slide-list ul {
-    margin-left: 1em;
-    list-style-type: square;
+  margin-left: 1em;
+  /*list-style-type: square;*/
  	margin-bottom: 0.6em;
 }
 .deck-container .slide-list li {

From 3785731ac899eeca9906a174cc889e65e935468c Mon Sep 17 00:00:00 2001
From: Christina Truong <hello@christinatruong.com>
Date: Sun, 17 Mar 2013 16:50:58 -0400
Subject: [PATCH 10/16] Fixed some typos, added some resourceand simplified
 solution for Form validation exercise.

---
 .../complex-form-validation-simplified.txt    | 35 +++++++++++++++++++
 js_conditionals.html                          |  2 +-
 js_quick_start.html                           |  4 +--
 resources.html                                |  2 +-
 4 files changed, 39 insertions(+), 4 deletions(-)
 create mode 100644 exercises/solutions/complex-form-validation-simplified.txt

diff --git a/exercises/solutions/complex-form-validation-simplified.txt b/exercises/solutions/complex-form-validation-simplified.txt
new file mode 100644
index 0000000..5d2a585
--- /dev/null
+++ b/exercises/solutions/complex-form-validation-simplified.txt
@@ -0,0 +1,35 @@
+<script>
+function validateForm() {
+
+  // automagically get the typed values from the form
+  var name = document.getElementById("name").value;
+  var address = document.getElementById("address").value;
+  var city = document.getElementById("city").value;
+  var postal = document.getElementById("postal").value;
+
+  /* *** YOUR CODE _BELOW_ HERE **** */
+
+  if ( name == "" || address == "" || city == "" || postal == "") {
+    alert( "Sorry there are errors. Form fields cannot be blank!" );
+  } else {
+    alert( "Thank you for your order!" );
+  }
+  
+  /* *** YOUR CODE ^ABOVE^ HERE **** */
+}
+</script>
+
+Name:
+<input type="text" id="name" />
+<br />
+Address:
+<input type="text" id="address" />
+<br />
+City:
+<input type="text" id="city" />
+<br />
+Postal Code:
+<input type="text" id="postal" />
+<br />
+<br />
+<button onclick="validateForm()">Check out now!</button>
\ No newline at end of file
diff --git a/js_conditionals.html b/js_conditionals.html
index 75fd1c3..64fd582 100644
--- a/js_conditionals.html
+++ b/js_conditionals.html
@@ -744,7 +744,7 @@ <h2><div class="smaller">Mini-exercise (15-20 minutes)</div>
 <button onclick="validateForm()">Check out now!</button>
 
 
-    If you get stuck, click here for  the full solution.
Or if you want to reset, click here for the original code.
+    If you get stuck, click here for  the full solution and here for the simplified solution.
Or if you want to reset, click here for the original code.
 
       
         Bonus: There's always different ways to get to the same end goal. If you're finished early, try out different ways that you can reduce the number of variables and lines of code.
diff --git a/js_quick_start.html b/js_quick_start.html
index dc2914c..f4fd88e 100644
--- a/js_quick_start.html
+++ b/js_quick_start.html
@@ -164,7 +164,7 @@ 
Intro to Functions
 SCRIPTEND
 
     
-      document.write(); is a quick and easy way to output text onto the page but is not best practice for use in "the real world." console.log(); is better.
+      document.write(); is a quick and easy way to output text onto the page but is not best practice for use in "the real world." console.log(); is better. Here's some more info.
     
     
 
@@ -294,7 +294,7 @@ 
Say My Name, Say My Name
 
   document.write("
"); //just a line break
 
-  // create email variable here
+  // create an email variable here
 
 SCRIPTEND
 
-
-Name:
-
-

-Address:
-
-

-City:
-
-

-Postal Code:
-
-

-

-
\ No newline at end of file
diff --git a/exercises/solutions/complex-form-validation.txt b/exercises/solutions/complex-form-validation.txt
index 7a5cf5c..5d2a585 100644
--- a/exercises/solutions/complex-form-validation.txt
+++ b/exercises/solutions/complex-form-validation.txt
@@ -9,53 +9,12 @@ function validateForm() {
 
   /* *** YOUR CODE _BELOW_ HERE **** */
 
-  /* 1. Declare 4 variables named 
-        "nameIsBlank", "addressIsBlank", "cityIsBlank", and "postalIsBlank" 
-        that will each hold Boolean values. */
-
-  // I will assume that fields are blank by default
-  var nameIsBlank = true;
-  var addressIsBlank = true;
-  var cityIsBlank = true;
-  var postalIsBlank = true;
-
-
-  /* 2a. Use conditional if/else statements on the variables 
-         "name", "address", "city", and "postal" to determine 
-         if each individual field is not blank.
-
-         Update their respective Boolean variables (e.g. "nameIsBlank") 
-         based on their individual if/else statements. */
-
-  // If the field is NOT an empty string, set the Boolean to be false
-  if ( name != "" ) {
-    nameIsBlank = false;
-  }
-
-  if ( address != "" ) {
-    addressIsBlank = false;
-  }
-
-  if ( city != "" ) {
-    cityIsBlank = false;
-  }
-
-  if ( postal != "" ) {
-    postalIsBlank = false;
-  }
-
-  /* 3. In a final conditional, test ALL FOUR Boolean variables 
-        and alert the proper message. Below are some alerts you can use. */
-
-  // It only takes 1 field to be blank to cause an error
-  // so I will use the OR logical operator
-
-  if ( nameIsBlank || addressIsBlank || cityIsBlank || postalIsBlank ) {
+  if ( name == "" || address == "" || city == "" || postal == "") {
     alert( "Sorry there are errors. Form fields cannot be blank!" );
-  }else{
+  } else {
     alert( "Thank you for your order!" );
   }
-
+  
   /* *** YOUR CODE ^ABOVE^ HERE **** */
 }
 
diff --git a/js_conditionals.html b/js_conditionals.html
index 64fd582..9f92ce9 100644
--- a/js_conditionals.html
+++ b/js_conditionals.html
@@ -611,7 +611,7 @@ Mini-exercise (10 minutes)
 
 
 
-  
+  
   

   
   
@@ -688,9 +688,7 @@ Mini-exercise (15-20 minutes)
       
       
       
-        1. Since there are multiple fields, we'll need to keep track of them. Simplest way would be to use a descriptively named variable that can hold a true or false value.

-        2. Similiar to the previous exercise, use a conditional test so someone cannot supply any blank fields.

-        3. Alert the right message to the user. (Hint: How do you test for something AND something else OR another thing at one time? Try looking at the cheatsheet on Slide #12 of this section.)
+        
1. Use a conditional to verify that ALL the fields have been filled in. (Hint: How do you test for something AND something else OR another thing at one time? Try looking at the cheatsheet on Slide #12 of this section.)
       
 
 @@ -704,25 +702,14 @@ <h2><div class="smaller">Mini-exercise (15-20 minutes)</div>
   var postal = document.getElementById("postal").value;
 
   /* *** YOUR CODE _BELOW_ HERE **** */
-
-  /* 1. Declare 4 variables named 
-        "nameIsBlank", "addressIsBlank", "cityIsBlank", and "postalIsBlank" 
-        that will each hold Boolean values. */
-
-
-  /* 2a. Use conditional if/else statements on the variables 
-         "name", "address", "city", and "postal" to determine 
-         if each individual field is not blank.
-
-         Update their respective Boolean variables (e.g. "nameIsBlank") 
-         based on their individual if/else statements. */
-
-
-  /* 3. In a final conditional, test ALL FOUR Boolean variables 
-        and alert the proper message. Below are some alerts you can use. */
+  
+  /* 1. Use a conditional if/else statement to test for 
+  blank fields and alert the proper message. 
+  Below are some alerts you can use. */
 
   alert( "Sorry there are errors. Form fields cannot be blank!" );
   alert( "Thank you for your order!" );
+  
 
   /* *** YOUR CODE ^ABOVE^ HERE **** */
 }
@@ -744,11 +731,7 @@ <h2><div class="smaller">Mini-exercise (15-20 minutes)</div>
 <button onclick="validateForm()">Check out now!</button>
 
 
-    If you get stuck, click here for  the full solution and here for the simplified solution.
Or if you want to reset, click here for the original code.
-
-      
-        Bonus: There's always different ways to get to the same end goal. If you're finished early, try out different ways that you can reduce the number of variables and lines of code.
-      
+    If you get stuck, click here for the full solution.
Or if you want to reset, click here for the original code.

jQuery effects

diff --git a/exercises/jquery-javascript.html b/exercises/jquery-javascript.html index 8377ef9..87db2e8 100644 --- a/exercises/jquery-javascript.html +++ b/exercises/jquery-javascript.html @@ -8,7 +8,7 @@

@@ -29,7 +29,7 @@

- + diff --git a/exercises/solutions/jquery-effects.html b/exercises/solutions/jquery-effects.html index b1a0265..2bda440 100644 --- a/exercises/solutions/jquery-effects.html +++ b/exercises/solutions/jquery-effects.html @@ -1,7 +1,7 @@ jQuery Effects - +

A JavaScript Experiment: Results

Homestretch

Re-assigning Variables

JavaScript helps make very nice websites!

Intro to Functions

I'm a H2 heading

Let's get started!

Let's get started!

Introduction to JavaScript

Your instructor today

Christina Truong

Course Outline

The morning (break @ ~11:30am)

After lunch (break @ ~3:30pm)

Homestretch

JavaScript helps make very nice websites!

1. Web Browser

2. Code Editor

Intro to Functions

Comments

Variables How-to

Variables (cont'd)

HTML Element Objects

Various Variables

JavaScript Arithmetic Operators

Intro to Functions

Say My Name, Say My Name

jQuery effects