Revised morning slides, moved void elements to extras.

christinatruong · christinatruong · commit 16cfc9ae8985 · 2014-09-21T23:38:02.000-04:00
diff --git a/framework/extras-void-elements.html b/framework/extras-void-elements.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <title>Ladies Learning Code: Intro to HTML & CSS</title>
+    <!-- Don't alter slideshow.css, CSSS slide deck needs it to work -->
+    <link rel="stylesheet" href="css/slideshow.css">
+
+    <!-- Theme-specific styles -->
+    <link href='http://fonts.googleapis.com/css?family=Quicksand|Pacifico|Open+Sans:400,300' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" href="css/font-awesome.css">
+    <link rel="stylesheet" href="css/highlightjs-themes/monokai.css">
+    <link rel="stylesheet" href="css/theme-llc.css">
+    <link rel="shortcut icon" href="img/favicon.ico"> 
+
+    <!-- Workshop-specific styles -->
+    <link rel="stylesheet" href="css/workshop.css">
+
+    <!-- Takes care of CSS3 prefixes! -->
+    <script src="scripts/prefixfree.min.js"></script>
+</head>
+
+<body>
+    
+    <base target="_blank">
+
+    <main>
+    	<section class="slide">
+            <h2>Void / Self-closing Element</h2>
+
+            <p>Void tags don’t format content — instead, they embed objects in the page. These tags <strong>do not</strong> come in pairs since they do not wrap content like the other tags we’ve been using so far. They <em>are</em> the content!</p>
+
+            <p>The syntax is slightly different in the latest version of HTML so you may see it written in two ways. Prior to HTML5, these tags were self-closed with a forward slash immediately before the right angled bracket (<code>/&gt;</code>). In HTML5, void tags are not required to self close.</p>
+
+            <p>A common void tag is the <code>&lt;br /&gt;</code> or <code>&lt;br&gt;</code> tag used to create a line break.</p>
+
+<pre><code class="xml">&lt;p&gt;This text&lt;br&gt;goes over&lt;br&gt;several&lt;br&gt;lines.&lt;/p&gt;</code></pre>
+            
+            <!-- example -->
+            <p>This text<br>goes over<br>several<br>lines.</p>
+
+            <p>Another example of a void element is the horizontal rule, <code>&lt;hr&gt;</code> or <code>&lt;hr /&gt;</code>.</p>
+
+            <!-- example -->
+            <hr>
+        </section>
+    </main><!-- cls main section -->
+
+    <footer>
+        <p class="license"><a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/"><img alt="Creative Commons License" src="img/cc-by-nc.svg" /></a> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://ladieslearningcode.com" property="cc:attributionName" rel="cc:attributionURL">Ladies Learning Code</a></p>
+        <p class="instructions">Use the left <i class="fa fa-arrow-left"></i> and right <i class="fa fa-arrow-right"></i> arrow keys to navigate</p>
+    </footer>
+    
+    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
+    <script src="scripts/slideshow.js"></script>
+
+    <!-- Uncomment the plugins you need -->
+    <script src="scripts/plugins/css-edit.js"></script>
+    <script src="scripts/plugins/css-snippets.js"></script>
+    <script src="scripts/plugins/css-Ctrls.js"></script>
+    <!-- <script src="plugins/code-highlight.js"></script>-->
+
+    <script src="scripts/plugins/markdown/marked.js"></script>
+    <script src="scripts/plugins/markdown/markdown.js"></script>
+    <script src="scripts/plugins/highlight/highlight.js"></script>
+    <script>hljs.initHighlightingOnLoad();</script>
+
+    <!-- Prettify -->
+    <script src="scripts/plugins/prettify.js"></script>
+    <script src="scripts/plugins/lang-css.js"></script>
+    <script src="scripts/plugins/prism.js"></script>
+
+    <script>
+        var slideshow = new SlideShow();
+
+        // Grabs all the .snippet elements
+        var snippets = document.querySelectorAll('.snippet');
+        for(var i=0; i<snippets.length; i++) {
+            new CSSSnippet(snippets[i]);
+        }
+
+        // Opens all links in a new window
+        var links = document.getElementsByTagName("a");
+        for (var i = 0; i < links.length; i++) {
+            var link = links[i];
+            link.addEventListener(function() {
+                window.open(this.href);
+            });
+        }
+
+        jQuery(document).ready(function(){
+            jQuery(".snippet").before("<span class=\"edit\">edit me</span>");
+        });
+    </script>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -207,7 +207,7 @@ <h2 id="making-changes">Making changes</h2>
 ```
 Just like the different languages that we speak and write, HTML has to follow proper "grammar" rules. This is referred to as **syntax**. Tags are used to describe the content, **not** what they look like.  That's what CSS is for.
 
-The are many different HTML tags used to create structure and add semantics (meaning) to the content. For example, any content between the `&lt;html>&lt;/html>` tag tells the browser that it is HTML code and content between the `&lt;title>&lt;/title>` tag describes the web page title.
+The are many different HTML tags used to create structure and add semantics (meaning) to the content.
 
 ```xml
 &lt;p>I'm a paragraph because I'm wrapped by paragraph tags.&lt;/p>
@@ -292,10 +292,10 @@ <h2>Nesting HTML tags</h2>
         <section class="slide" data-markdown>
 ##Exercise #1 - Updating your home page (10 mins)
 
-1. In your text editor (Sublime Text), update your name.
+1. In the Sublime Text editor, update your name in the `h1` if you haven't already.
 1. Add your tag line under your name using the appropriate heading tag.
 1. Change the content in the `&lt;title>&lt;/title>` tag. Where do you see this change?
-1. Add a copyright message. Use a paragraph (`&lt;p>`) tag *inside* of the `&lt;footer>` tag.
+1. Add a copyright message using a paragraph (`&lt;p>`) tag *inside* of the `&lt;footer>` tag.
 
 **Bonus:** Try using an HTML code for the copyright *symbol*. Here are some resources:    
 http://character-code.com/ascii-table.php  
@@ -321,7 +321,7 @@ <h2>Nesting HTML tags</h2>
         <section class="slide" data-markdown>
 ##Navigation menu & Lists
 
-There are two kinds of lists in HTML: ordered (`ol`) for numbered lists & undordered (`ul`) for lists with bullets. *Content must be included only within the list item* (`li`).
+There are two kinds of lists in HTML: ordered (`ol`) for numbered lists & unordered (`ul`) for lists with bullets. Content must be included **only within the list item** (`li`).
 
 ```xml
 &lt;ul&gt;
@@ -342,7 +342,7 @@ <h2>Nesting HTML tags</h2>
         <section class="slide" data-markdown>
             ##Class exercise: Add a navigation
 
-            Let's go back to **index.html** and add an unordered list, before `&lt;header>`, as a navigation menu for the three pages: **Home**, **About**, **Contact**.
+            Let's go back to **index.html** and add an unordered list, *before* `&lt;header>`, as a navigation menu for the three pages: **Home**, **About**, **Contact**.
 
             It should look like this:
             
@@ -354,7 +354,7 @@ <h2>Nesting HTML tags</h2>
 
 The purpose for creating page navigation is to link to other pages.  In addition to creating a list, we'll also need to add links to navigate between the three pages.
 
-Links are represented by the `&lt;a>` (anchor) tag. Unlike the tags we've looked at so far, anchor tags need additional information to specify a link location. An **attribute** can provide additional information and is added inside the opening tag. 
+Links are represented by the `&lt;a>` (anchor) tag. Unlike the tags we've looked at so far, anchor tags need additional information to specify where to link to. An **attribute** can provide additional information and is added inside the opening tag. 
 
 ```xml
 Visit &lt;a href="http://ladieslearningcode.com">Ladies Learning Code&lt;/a>.
@@ -384,9 +384,9 @@ <h2>Nesting HTML tags</h2>
         <section class="slide" data-markdown>
 ##HTML5 Sectioning Tags
 
-Sometimes, multiple HTML elements need to be grouped together for organization and/or for styling. For example, the heading contains multiple elements (name and tagline) as well as the navigation on the about and contact page.
+Sometimes, multiple HTML elements need to be grouped together for organization and/or for styling. For example, the `header` contains multiple elements (name and tagline) as well as the navigation on the about and contact page.
 
-Prior to HTML5, the `&lt;div&gt;` tag was used for grouping elements together to create page layouts. The header and footer of the page might look something like this:
+Prior to HTML5, the `&lt;div&gt;` tag was used for grouping elements together to create page layouts. The header of the page might look something like this:
 
 ```xml
 &lt;div&gt;
@@ -509,26 +509,6 @@ <h2>Exercise #2 - Adding pages and content (20mins)</h2>
 ```
         </section>
 
-        <section class="slide">
-            <h2>Void / Self-closing Element</h2>
-
-            <p>Void tags don’t format content — instead, they embed objects in the page. These tags <strong>do not</strong> come in pairs since they do not wrap content like the other tags we’ve been using so far. They <em>are</em> the content!</p>
-
-            <p>The syntax is slightly different in the latest version of HTML so you may see it written in two ways. Prior to HTML5, these tags were self-closed with a forward slash (<code>/</code>) immediately before the right angled bracket (<code>&gt;</code>). In HTML5, void tags are not required to self close.</p>
-
-            <p>A common void tag is the <code>&lt;br /&gt;</code> or <code>&lt;br&gt;</code> tag used to create a line break.</p>
-
-<pre><code class="xml">&lt;p&gt;This text&lt;br&gt;goes over&lt;br&gt;several&lt;br&gt;lines.&lt;/p&gt;</code></pre>
-            
-            <!-- example -->
-            <p>This text<br>goes over<br>several<br>lines.</p>
-
-            <p>Another example of a void element is the horizontal rule, <code>&lt;hr&gt;</code> or <code>&lt;hr /&gt;</code>.</p>
-
-            <!-- example -->
-            <hr>
-        </section>
-
         <section class="slide" data-markdown>
 ##Image Types
 There are many different file types that can be used for the web. Each type is best suited for specific kinds of images. Use the format that maintains the best quality while reducing the file size.
@@ -559,7 +539,9 @@ <h2>Void / Self-closing Element</h2>
         <section class="slide">
             <h2>Adding images</h2>
 
-            <p>Images are another example of a void element.  Just like links, the image tag also requires an <em>attribute</em> to define the file path of the image file. However, it uses the <code>src</code> attribute (not <code>href</code>).  The value can be an absolute or relative path. The below is an example of an absolute path.</p>
+            <p>Images are an example of a void element. It doesn't need a closing tag because it <em>is</em> the content. Read more about void elements <a href="framework/extras-void-elements.html">here</a>.</p>
+
+            <p>Just like links, the image tag also requires an <em>attribute</em> to define the file path of the image file. However, it uses the <code>src</code> attribute (not <code>href</code>).  The value can be an absolute or relative path. The below is an example of an absolute path.</p>
 
             <pre><code>&lt;img src="http://fillmurray.com/200/300"&gt;</code></pre>
 
@@ -657,7 +639,7 @@ <h2>Adding images</h2>
         <section class="slide" data-markdown>
 ##CSS & HTML
 
-CSS is a different language from HTMl and has its own syntax rules though the two are closely paired. CSS is made up of rules that refer to HTML elements and define what those elements should look like.
+Though CSS and HTML are closely paired, CSS is a different language and has its own syntax rules. CSS is made up of *declarations* that refer to HTML elements and define what those elements should look like.
 
 CSS separates content (i.e. text) from presentation (i.e. text colour) and helps to reduce redundancy.  
 
@@ -787,12 +769,14 @@ <h2>Write some CSS</h2>
 
 Create a new CSS file by selecting **File > New File** in Sublime Text or use a shortcut, **CMND/CNTRL + N**. Name the file with a **.css** extension.  Some commonly used names are **global.css**, **main.css** or **style.css**.
 
-Remember, external stylesheets are added using the `&lt;link>` tag.
+Let's add it to **about.html**.
+
+**Protip!** Can't remember the syntax?  Sublime Text has a shortcut.  Simply type "link" with no brackets and press tab. Voila!
 
 ```
 &lt;link rel="stylesheet" href="css/style.css">
 ```
-**Protip!** Can't remember the syntax?  Sublime Text has a shortcut.  Simply type "link" with no brackets and press tab. Voila!
+
 
 Let's do a quick check to see if it works and is linked properly by adding a background color on the entire viewport as a test.
 
@@ -891,6 +875,10 @@ <h2>CSS Font Styles</h2>
             </div>
 
             <p>Resource: <a href="http://reference.sitepoint.com/css/typography">Sitepoint Typographical Properties</a></p>
+
+            <div class="presenter-notes">
+                <p>Explain what each property does while updating each example in the code editor.</p>
+            </div>
         </section>
 
         <section class="slide" data-markdown>
@@ -945,7 +933,7 @@ <h2>Lunchtime exercise!</h2>
             <p>Feel free to peek at the next exercise ;)</p>
 
             <div class="presenter-notes">
-                <p>Aim to get to lunch by 12:30-1:00pm. A 45min lunch is recommended. Let the learners know this is optional but most people tend to enjoy continuing with a bit of exercises over the break and this will help speed up the next exercise.</p>
+                <p>Aim to get to lunch by 12:30-1:00pm. A 45min lunch is recommended. Let the learners know this is optional but most people tend to enjoy continuing on a bit of exercises over the break. This will help speed up the next exercise.</p>
             </div>
         </section>
         <section class="slide">
