4. Our goal – to change the way we use technology
• Most of us already use technology through websites and mobile
phones
• We‟ll start with a foundation of how all of this works, then begin to
program ourselves
• Let‟s learn to produce with technology, not just consume it!
4
Computer monkey Computing wizard
5. We will be learning HTML, CSS, jQuery, and
Javascript
• Together, these form the building blocks for most websites
• If a website were a person, you could think of:
5
HTML as the
structure/skeleton
CSS as the
presentation/clothing
jQuery/Javascript as
the action/movement
6. Let’s look at an example (I)
6
HTML is used
to write text
7. Let’s look at an example (II)
7
HTML is used
to write text
CSS is used to
choose the
font and color
8. Let’s look at an example (III)
8
HTML is used
to write text
jQuery and Javascript allow a
calendar to appear when clicked
CSS is used to
choose the
font and color
9. The course is split into three units total
9
Unit 1:
HTML and CSS
Unit 2:
jQuery
Unit 3:
Javascript
10. Each unit contains lessons that either build
understanding or develop skills
10
Unit 1:
HTML and CSS
Lesson 1 Lesson 2
Lesson 3
Lesson 11
...
Lesson 4
Lesson 12
...Build understanding Develop skills
11. Each 2-hour lesson has the same structure
11
Activity Purpose Time
Teacher instruction Provide context for what we will be learning 20 min
Codecademy course Learn and apply your knowledge 60 min
Practice set Practice the material on your own 30 min
Quiz Test your understanding 10 min
After finishing all lessons in a unit, everyone gets to
work on a fun project of their own
OnlineOffline
13. Lesson 1: Introduction to HTML
13
Introduction
to HTML
Learning to
Use HTML
HTML and
Email
Pictures, Vid
eo, and
Media
HTML and
Forms
Search
Engine
Optimization
Learning to
Use CSS
Introduction
to CSS
Reusing
Code
3 Ways to
Use CSS
Separation of
Concerns
Launching
Your Own
Website
Lesson 1 Lesson 2 Lesson 3 Lesson 4
Lesson 8 Lesson 7 Lesson 6 Lesson 5
Lesson 9 Lesson 10 Lesson 11 Lesson 12
Build understanding Develop skills
14. You’re now the editor of the Guardian! (I)
1. Open up your Chrome web browser and navigate to
www.theguardian.com/uk
2. Right click on the first news headline and click „Inspect Element‟
14
Right click
here
Then click
here
15. You’re now the editor of the Guardian! (II)
3. You should now see a box pop up on the lower part of the screen.
The multi-colored text you see here is HTML – the language used
behind-the-scenes to build what you see on the Guardian. Now
let‟s see if we can edit the Guardian ourselves…
15
This is HTML!
16. You’re now the editor of the Guardian! (III)
4. Scroll down a couple lines in this lower area until you see the text
of the news headline. Double-click on this text
16
Double-click here
17. You’re now the editor of the Guardian! (IV)
5. Let‟s type in “The Daily Prophet” instead. Now press enter
17
Now it says “The Daily Prophet”
18. You’re now the editor of the Guardian! (V)
6. You‟ll see that the headline changed! And no, this isn‟t magic – any
Muggle can revise any website. You just need to understand
HTML. Now let‟s see what happens when we reload the page…
18
Pretty
cool, huh?
19. You’re now the editor of the Guardian! (VI)
7. Click the reload button near the top of your browser
19
Click!
20. You’re now the editor of the Guardian! (VII)
8. The headline changed back! I guess it‟s not so easy to start your
own online newspaper…
20
Back to before
21. To see why our changes weren’t saved, we need
to understand how the internet works
21
1. When Andy Murray opens his Chrome browser and navigates to a
website, his request is sent to a router, a box that helps him
connect to the internet
I want to
watch cat
videos!
Router
22. How does the internet work? (II)
22
2. The router then tells a company (the Internet Service Provider, or
ISP) to help pull up the website
Router
ISP
23. How does the internet work? (III)
23
3. The ISP uses a dictionary (called a Domain Name System, or
DNS) to look up which computer is holding all the Youtube files
Router
ISP
Facebook
server
Amazon
server
Youtube
server
DNS
24. How does the internet work? (IV)
24
4. Once the correct computer is found, this specialized computer
(known as a server) sends Andy the files so he can open the
website
HAHAHA
Router
ISP
Facebook
server
Amazon
server
Youtube
server
DNS
25. So back to our question: why didn’t our changes
get saved? (I)
• We changed the headline of the Guardian on our computer only.
This is known as a local change
• When we reloaded the page, our computer asked the Guardian‟s
servers to send us its files for the page we requested
25
26. So back to our question: why didn’t our changes
get saved? (II)
• We changed the headline of the Guardian on our computer only.
This is known as a local change
• When we reloaded the page, our computer asked the Guardian‟s
servers to send us its files for the page we requested
• Since we only made a local change, we receive the same files as
before and end up seeing the original website
• In order for everyone to be able to see our changes, we must
change the files directly on the servers
26
28. Summary (I)
• HTML is very important because it‟s used in all websites
• Along with CSS and jQuery/Javascript, HTML is one of the building
blocks of the internet
28
HTML as the
structure/skeleton
CSS as the
presentation/clothing
jQuery/Javascript as
the action/movement
31. 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
31
