This document provides an overview and agenda for a lesson on HTML fundamentals. It introduces HTML, CSS, jQuery and JavaScript as the main building blocks of websites. It explains that HTML provides structure, CSS provides presentation, and jQuery and JavaScript provide interactivity. It also summarizes that when a web page is requested, the user's internet connection routes the request to a server, which sends the page files to the user's computer to display the content, so any local edits made are not saved globally. The lesson agenda includes learning activities, independent practice, and a follow-up quiz.

1. Unit 1: Web Fundamentals
Lesson 1: Introduction to HTML
August 19, 2013

2. Agenda
Course overview
Our lesson for today
Review
What’s next?
2

3. Agenda
Course overview
Our lesson for today
Review
What’s next?
3

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

12. Agenda
Course overview
Our lesson for today
Review
What’s next?
12

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

27. Agenda
Course overview
Our lesson for today
Review
What’s next?
27

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

29. HAHAHA
Router
ISP
Facebook
server
Amazon
server
Youtube
server
DNS
Summary (II)
• When we navigate to a website, our request is transmitted to a
server which sends us the files to load the page
• Any local changes we make can be seen on our computer only
29

30. Agenda
Course overview
Our lesson for today
Review
What’s next?
30

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