Skip to content

Commit

Permalink
small content tweaks. Added generic instructor content blocks for per…
Browse files Browse the repository at this point in the history 
…sonalization.
  • Loading branch information
@christinatruong
christinatruong committed Nov 2, 2014
1 parent 22587c3 commit 37f70e9
Show file tree
Hide file tree
Showing 3 changed files with 139 additions and 25 deletions.
34 changes: 34 additions & 0 deletions framework/css/theme-llc.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,6 +229,40 @@ table img {
text-transform: lowercase;
font-weight: 400; }

/* Last slide
-------------------------------*/
.last .title {
color: white;
margin-top: 40px; }
.last ul {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 2.2rem; }
.last .fa {
padding-right: 10px; }
.last .title-bg {
background: rgba(177, 9, 170, 0.8);
border-radius: 5px;
padding: 0 10px 0 6px; }
.last .instructor-img {
border-radius: 50%;
width: 100px;
float: left;
margin-right: 20px; }
.last h3 {
margin-bottom: 20px; }
.last h3 span {
color: #b109aa;
font-family: "Pacifico", cursive;
margin-right: 4px;
font-size: 3rem;
text-transform: lowercase;
font-weight: 400; }
.last .attribution {
position: absolute;
bottom: 20px; }

/* highlight.js customizations
-------------------------------*/
.hljs {
Expand Down
42 changes: 42 additions & 0 deletions framework/sass/theme-llc.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -313,6 +313,48 @@ table {
}
}

/* Last slide
-------------------------------*/
.last {
.title {
color: $white;
margin-top: 40px;
}
ul {
@include list-reset();
font-size: 2.2rem;
}
.fa {
padding-right: 10px;
}
.title-bg {
background: rgba($llc-pink, 0.8);
border-radius: 5px;
padding: 0 10px 0 6px;
}
.instructor-img {
border-radius: 50%;
width: 100px;
float: left;
margin-right: 20px;
}
h3 {
margin-bottom: 20px;
span {
color: $llc-pink;
font-family: $cursive;
margin-right: 4px;
font-size: 3rem;
text-transform: lowercase;
font-weight: $normal;
}
}
.attribution {
position: absolute;
bottom: 20px;
}
}

/* highlight.js customizations
-------------------------------*/
.hljs {
Expand Down
88 changes: 63 additions & 25 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,13 +35,12 @@ <h1>
<span class="title-bg">Introduction</span><br>
<span class="title-bg">to jQuery</span>
</h1>
<h2><span>with</span> Arron Gibson</h2>
<img class="instructor-img" src="framework/img/workshop/arron-gibson.jpg" alt="arron gibson">
<h2><span>with</span> Instructor Name</h2>
<img class="instructor-img" src="framework/img/workshop/" alt="Your Name">
<ul>
<li><i class="fa fa-envelope"></i><a href="mailto:arron@vivaandco.com">arron@vivaandco.com</li>
<li><i class="fa fa-desktop"></i><a href="http://arrongibson.com" target="_blank">arrongibson.com</a></li>
<li><i class="fa fa-twitter"></i><a href="http://twitter.com/arrongibson" target="_blank">@arrongibson</a></li>
<li><i class="fa fa-github"></i><a href="https://github.com/infn8/" target="_blank">@infn8</a></li>
<li><i class="fa fa-envelope"></i> <a href="">youremail@domain.com</li>
<li><i class="fa fa-desktop"></i> <a href="">your-site.com</a></li>
<li><i class="fa fa-twitter"></i> <a href="http://twitter.com/">@your-twitter</a></li>
</ul>
</div>
</header>
Expand Down Expand Up @@ -447,7 +446,7 @@ <h2>Class exercise (continued)</h2>
</section>

<section class="slide" data-markdown>
## Exercise (10 mins)
## Exercise (5-10 mins)

Create a program using the concepts covered so far: variables & arithmetic operators.

Expand Down Expand Up @@ -510,8 +509,16 @@ <h2>Class exercise (continued)</h2>
"Raindrops On Roses",
"Whiskers On Kittens"
];
```
</section>
<section class="slide" data-markdown>
##Array values

To access the value of a variable, use the variable name. For **arrays**, the values are accessed by their array name and **numerical index**, also contained in square brackets, which always **starts at ```0```**. To get the value of the first item in an array, the syntax will look like this:

```javascript
myFavoriteThings[0];
```
The values in an array can then be accessed by their **numerical index**, also contained in square brackets, which always **starts at ```0```**.

![array vs variables](framework/img/workshop/console-var-array.gif)

Expand Down Expand Up @@ -981,7 +988,7 @@ <h2>Using jQuery</h2>
</li>
</ul>

<pre><code class="xml">&lt;script src="js/jquery-1.11.1.js">&lt;/script></code></pre>
<pre><code class="xml">&lt;script src="js/jquery-1.11.1.min.js">&lt;/script></code></pre>

<p><strong>Important</strong>: Unlike CSS, which always has to be included within the <code>&lt;head&gt;</code> tags, JavaScript can be included pretty much anywhere on the page, in the <code>&lt;head&gt;</code> or the <code>&lt;body&gt;</code>. Often, it is included just before the closing <code>&lt;/body&gt;</code> to allow the page document to load first.</p>

Expand Down Expand Up @@ -1185,9 +1192,11 @@ <h2>CLASS EXERCISE</h2>
<section class="slide" data-markdown>
##Click Events

Now you've seen that you can set the width of an element with jQuery but we could use CSS to do that. Let's try something only JavaScript could help us with. Let's add a **click event**.
Now you've seen that you can set the width of an element with jQuery but we could use CSS to do that.

Let's try something only JavaScript could help us with, the **click event**.

Like the document ready **event**, a click event is a moment in time when we want to trigger some code to run. But instead of the browser running the event right away, it only runs a click event when an item is actually clicked by the user.
Like the document ready **event**, a click event is a moment in time when we want to trigger some code to run. But instead of the browser running the event right away, it only runs when an item is actually clicked by the user.

Adding a function to a **user triggered event** is called an **event listener**. The code just sits around waiting and listening for the event to happen. When someone finally clicks the item, it triggers the function to run.

Expand Down Expand Up @@ -1379,9 +1388,9 @@ <h2>Exercise: Active Menu - <code>addClass()</code> method</h2>

<p><img src="framework/img/workshop/console-menu-active.gif" alt="" title=""> </p>

<p>Now go to <strong>style.css</strong> to create a new CSS style for the active state. This will change the color (but you can apply whatever style you like).</p>
<p>Now go to <strong>style.css</strong> to create a new CSS style for the active state. This will change the color (but you can apply whatever style you like). Since the color has been added to <code>.menu a</code>, create a selector using the new <code>active</code> class</p>

<pre><code>.menu .active {
<pre><code>.menu a.active {
color: #A8258D;
}
</code></pre>
Expand All @@ -1394,21 +1403,23 @@ <h2>Exercise: Active Menu - <code>addClass()</code> method</h2>

Almost there. We were able to add the class to the clicked item but now we need to remove the class from the non-active items. Remember, JavaScript/jQuery executes commands from top to bottom. One way to fix this issue is to remove the class **first**, *then* add the class to the clicked item.

Since we don't know which item the user will click, we can remove the class from **all** of the menu items. So in this case, we won't use the `$(this)` selector. Instead, we want all the menu links.
In this case, we won't use the `$(this)` selector since we are looking for any element with the `active` class to remove it. That means `.active` will be our selector.

```javascript
$(".menu a").click(function(){
//console.log("It works!");
$(".menu a").removeClass("active");
$(".active").removeClass("active");
$(this).addClass("active");
});
```

Now try it!

**Note**: if the class of `active` is used anywhere else on the page, it will be affected as well. Another option is to use a selector more specific to the menu such as `$(".menu a.active")`.
</section>

<section class="slide" data-markdown>
##Exercise: Personalize Your Page (15mins)
##Exercise: Personalize Your Page (15-20mins)

Now that you've had a chance to get some JavaScript & jQuery practice, take some time to personalize your page. Here are some suggestions to get you started:

Expand Down Expand Up @@ -1547,6 +1558,7 @@ <h2>Add Flexslider to Your project: Step 1</h2>
&lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot;&gt;
&lt;/head&gt;
</code></pre>
<p><strong>Note:</strong> This is just one way to organize your folder structure. Some people like to create a <strong>plugins</strong> folder for example for these types of files. Just make sure that your file paths match when linking to the js, image and css files.</p>
</section>

<section class="slide" data-markdown>
Expand All @@ -1559,14 +1571,28 @@ <h2>Add Flexslider to Your project: Step 1</h2>
```xml
&lt;div class=&quot;flexslider&quot;&gt;
&lt;ul class=&quot;slides&quot;&gt;
&lt;li&gt;&lt;img src=&quot;images/rotator/image1.jpg&quot; /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img src=&quot;images/rotator/image2.jpg&quot; /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img src=&quot;images/rotator/image3.jpg&quot; /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img src=&quot;images/rotator/image1.jpg&quot;&gt;&lt;/li&gt;
&lt;li&gt;&lt;img src=&quot;images/rotator/image2.jpg&quot;&gt;&lt;/li&gt;
&lt;li&gt;&lt;img src=&quot;images/rotator/image3.jpg&quot;&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
```

You can put this code anywhere you want it to show on the page. Save the file and check your page. You probably won't see anything right? That's because we still have to active the plugin with a little jQuery.

**Note!** You will see the example image tag code in the Flexslider documentation with an extra forward slash at the end of the image tag. This is the XHTML syntax (previous version). HTML5 doesn't require it.


```xml
&lt;!-- XHTML -->
&lt;img src=&quot;path/to/file.jpg&quot; /&gt;

&lt;!-- HTML5 -->
&lt;img src=&quot;path/to/file.jpg&quot;&gt;

```
`

</section>

<section class="slide" data-markdown>
Expand Down Expand Up @@ -1615,9 +1641,9 @@ <h2>Add Flexslider to Your project: Step 1</h2>

&lt;div class=&quot;flexslider&quot;&gt;
&lt;ul class=&quot;slides&quot;&gt;
&lt;li&gt;&lt;img src=&quot;images/rotator/image1.jpg&quot; /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img src=&quot;images/rotator/image2.jpg&quot; /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img src=&quot;images/rotator/image3.jpg&quot; /&gt;&lt;/li&gt;
&lt;li&gt;&lt;img src=&quot;images/rotator/image1.jpg&quot;&gt;&lt;/li&gt;
&lt;li&gt;&lt;img src=&quot;images/rotator/image2.jpg&quot;&gt;&lt;/li&gt;
&lt;li&gt;&lt;img src=&quot;images/rotator/image3.jpg&quot;&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;

Expand Down Expand Up @@ -1758,10 +1784,22 @@ <h2>Add Flexslider to Your project: Step 1</h2>
</section>

<!-- Last slide -->
<section class="slide" data-markdown>
## Thank You.
<section class="slide last">
<h2>Thank You!</h2>

Slidedecks created with [Lea Verou's CSS-based SlideShow System](https://github.com/LeaVerou/csss) and [reveal.js](http://lab.hakim.se/reveal-js/).
<h2 class="title">
<span class="title-bg">Intro to jQuery</span>
</h2>
<h3><span>with</span> Instructor Name</h3>

<img class="instructor-img" src="framework/img/" alt="">
<ul>
<li><i class="fa fa-envelope"></i> <a href="">youremail@domain.com</li>
<li><i class="fa fa-desktop"></i> <a href="">your-site.com</a></li>
<li><i class="fa fa-twitter"></i> <a href="http://twitter.com/">@your-twitter</a></li>
</ul>

<p class="attribution">Slidedecks created with <a href="https://github.com/LeaVerou/csss">Lea Verou's CSS-based SlideShow System</a> and <a href="http://lab.hakim.se/reveal-js/">reveal.js</a>.</p>
</section>
</main><!-- cls main section -->

Expand Down

0 comments on commit 37f70e9

Please sign in to comment.