1 of 12

WEEK 3

DAY 1

Intro to Web Dev

2 of 12

Intro to Web Dev

What’s the Internet?
Mobile Development
The big 3

3 of 12

WHAT’S THE INTERNET

What is it?
Who runs it?
Where do websites “live”?

Preempt the conversation by talking with students about the internet:

It’s a vital component to the SI’s goal, mobile web development
Ask: “How would you define ‘the internet’?” (this is just to get an idea of what students’ understanding is)

(Students may already allude to this) Describe the internet as a network of computers connecting to each other

Ask: “Who regulates the internet?” Elicit: no one! (Technically, some countries put restrictions on content and the connections citizens can make!)

“Because our internet is NOT regulated, you can literally make a webpage right now and put it up for others to connect with!”

Ask: “If you were to make a website for others to see, where does it ‘live?’” Elicit or provide: On servers

Ask: “What are servers?” Elicit or provide: they’re just computers, but computers dedicated to ‘serving’ up webpages.

4 of 12

THE BROWSER

Browsers:

Reads web page
Renders the website to LOOK and ACT as it should

5 of 12

READING A WEB PAGE

Websites are written in a markup language
Markup Language:

HTML and CSS
describes how something LOOKS
NOT a programming language, like JS

6 of 12

READING A WEB PAGE

Websites can also have a programming language

Most do these days!

Programming Language:

JavaScript (JS)
describes how website ACTS

7 of 12

MOBILE DEVELOPMENT

What does “mobile” mean?

8 of 12

WHAT’S AN APP?

“There’s an app for that!”
Programs for phones

Phones are computers, too!

9 of 12

ANDROID VS. IPHONE

Why won’t iPhone apps work on an Android device? And vice versa?

Different hardware
Different Operating System

10 of 12

NATIVE DEVELOPMENT

Programming for a specific device

11 of 12

MOBILE WEB DEVELOPMENT

What if there was

something that worked the same

way on ALL devices?

{dat title, tho}

This is what we’ll teach you!

12 of 12

THE BIG 3

Explain that although there are many ways to create a website, one of the most common ways is to use HTML, CSS, and JavaScript

Check for understanding:

Ask: “What kind of language is JavaScript?” Elicit: “Programming language”

Ask: “What kind of language is HTML and CSS?” Elicit or provide: “Markup languages”

Ask: “What does a markup language do?” Elicit or provide: it dictates how something should LOOK

Explain the image on the right is how browsers take information about a website and builds it to LOOK and ACT the way the developer wants

HTML is the skeleton (structure)
CSS is skin and clothes (style/presentation)
JS is the act of running/dancing/etc. (behavior)

Transition into the code along by mentioning how we’ll deconstruct a website to see how what role each of these 3 elements plays in making the website what it is.