2. Recap of Unit 1 (I)
• HTML is very important and is used in everything from websites to
email messages to sending data with forms
• HTML files are easy to create – no harder than writing a Word
document
2
3. Recap of Unit 1 (II)
• Using HTML, we can add images, video, and forms to create a rich
experience for the visitors to our website
• Meta tags and search engine optimization help potential visitors to find
our website on search engines like Google or Yahoo
This is the meta description tag
3
4. Recap of Unit 1 (III)
• CSS is just as important as HTML because it allows us to style a page
to make it look pretty
• CSS always needs to be paired with HTML for the styling to take effect,
but due to separation of concerns, they should be split into two
separate files
4
5. Recap of Unit 1 (IV)
• Remember the DRY Principle: Don’t Repeat Yourself. Reuse code
whenever possible!
• Using open source code and frameworks like Twitter Bootstrap can
save us a lot of time
5
6. Unit 2 will focus on jQuery
Unit 1:
HTML/CSS
Unit 2:
jQuery
Unit 3:
Javascript
6
7. Lesson 1: Introduction to jQuery
Introduction
to jQuery
Syntax and
Structure
Abstraction
Pictures, Vid
eo, and
Media
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Learning to
Use CSS
Introduction
to CSS
Search
Engine
Optimization
HTML and
Forms
Lesson 8
Lesson 7
Lesson 6
Lesson 5
Separation of
Concerns
3 Ways to
Use CSS
Reusing
Code
Launching
Your Own
Website
Lesson 9
Lesson 10
Lesson 11
Lesson 12
7
8. HTML/CSS alone have limited capabilities
• We’ve seen that HTML and CSS are excellent tools for creating
webpages, but they don’t allow us to do everything we might want
• Remember our Prince William analogy from Unit 1?
HTML as the
structure/skeleton
CSS as the
presentation/clothing
jQuery/Javascript as
the action/movement
8
9. jQuery gives us the ability to animate a website
• To animate our webpage, we need to learn a new language – jQuery
• We’re learning jQuery for two main purposes:
1. Make dynamic websites that engage and interact with our users
2. Take advantage of the full range of our computer’s power
9
10. jQuery appears everywhere on the web
• jQuery is now used by more than half of the top 10,000 websites
• You’ve probably visited many of these, such as Amazon, The
Guardian, and ESPN
10
11. So what exactly is jQuery?
• jQuery is one of the fastest ways to bring movement to a webpage and
have it come to life!
• It’s easy to use because it’s not a programming language of its own;
instead it is a library (a bunch of commonly used pieces of code),
written in a programming language called Javascript
• To use jQuery, you don’t need to know Javascript (we will cover this in
detail in Unit 3)
11
12. Think of jQuery as a phrase book (I)
• If you’re getting ready to visit France, but don’t speak any French, you
could buy a French phrase book – a book that has translations for
commonly used phrases:
English
French
Do you speak English?
Parlez-vous anglais?
Is there someone here
who speaks English?
Est-ce qu’il y a quelqu’un
ici qui parle anglais?
• While we may not understand the individual words (what does qu’il or
quelqu’un mean by themselves?), we can still use the entire phrase to
convey what we mean
12
13. Think of jQuery as a phrase book (II)
• Just as a French phrase book helps us understand common phrases
without knowing individual words, jQuery helps us with common
features without needing to understand Javascript
• Some of the common features we might want to enable include:
• Zoom in on an image
• Slowly fade in some text
• Slide down a box when clicked
13
14. Think of jQuery as a phrase book (III)
• jQuery takes the Javascript code needed to run each of these common
features and packages them into some simple commands
• For example, the complicated Javascript code on the left becomes the
much simpler jQuery on the right
Javascript
var anchors =document.getElementsByTagName(“a”);
for(var z =0; z < anchors.length; z++){
var elem = anchors[z];
elem.onclick = function(){
alert(“hello”);
};
}
jQuery
$(document).ready(function() {
$('a').click(function() {
alert('hello');
});
});
14
15. jQuery can transform a static webpage into a
dynamic, interactive website
Before
After
Date inputted using a
regular HTML form
Date inputted through a
jQuery calendar popup
15
16. Examples of jQuery in action (I)
“Password Meter” evaluates
password strength
16
17. Examples of jQuery in action (II)
Numbers and circular bars
update in real-time
17
18. Examples of jQuery in action (III)
Image appears when cursor
hovers over tooltip
18
19. Summary (I)
• jQuery is one of the fastest ways to bring movement to a webpage
and have it come to life
• It’s easy to use because it’s not a programming language of its own;
instead it is a library (a bunch of commonly used pieces of
code), written in a programming language called Javascript
• To use jQuery, you don’t need to know Javascript (we will cover this
in detail in Unit 3)
19
20. Summary (II)
• Just as a French phrase book helps us understand common
phrases without knowing individual words, jQuery helps us with
common features without needing to understand Javascript
• jQuery takes the Javascript code needed to run each of these
common features and packages them into some simple commands
20
21. What to do on your own
1. Go to URL to complete the Codecademy course online
2. Do the practice set on the material learned
1. Take the follow-up quiz to test your understanding
21
