Jen's story

Jen would like to get some information about labradoodles.

She opens up her browser on her laptop

Types https://www.allaboutdogs.com/labradoodles.html in her browser

And is now able to find out all about labradoodles!

What is this magic?

1. How does Jen's computer fetch the content of the webpage?
2. What makes up the content of the webpage?
3. What types of developers work on the webpage?

How does Jen's computer fetch the content of the webpage?

The content is fetched over the web

What is the web?

• Computers communicating with each other with REQUESTS and RESPONSES
• Computers can be CLIENTS or SERVERS

The client

• Jen's computer is the CLIENT
• It sends a REQUEST over the web for the content of the webpage.

The request

contains instructions detailing

• The domain: The web address of the server to send the request to

www.allaboutdogs.com

• The action: What it wants the server to do

GET

• The path: What it wants from the server

labradoodles.html

The request

GET /labradoodles.html HTTP/1.1
	Host: www.allaboutdogs.com
						

The server

• The computer at allaboutdogs.com is the SERVER
• It receives the REQUEST for the content of the webpage.

The server

• The SERVER sends the content back to Jen's computer in a RESPONSE

The response

contains the status of the request

"OK" (successful request!)

and the content of the webpage

• HTML (text and images)
• CSS (styling)
• Javascript (functionality)
• JSON (data)

More on these later...

Back to the client

Jen's computer receives the response and displays the content in her browser.

What makes up the content of the webpage?

• HTML (text and images)
• CSS (styling)
• Javascript (functionality)
• JSON (data)

HTML

<h1>All about dogs</h1>
<img id="header-image" width="4%" height="4%" src="images/dogpaws.jpeg">
						

HTML

• Use to add content to your webpage (text, images) using HTML elements
• HTML elements are represented by tags and have content inside them.

<h3>This is the content of a header</h3>
					

Exercise

1. Go to All About Dogs
2. Open the inspector
3. Change the text of 'All About Dogs'
4. Change the header tag to make your new heading smaller

CSS

header {
  color: white;
  background-color: powderblue;
}
						

CSS

• Use to add styling to your webpage (color, layout)
• Is separate from HTML and can add the same styling to multiple webpages

Exercise

1. Go to All About Dogs
2. Open the inspector
3. Change the header background color to green
4. Change the header text color to red

Learn more!

Come to our HTML/CSS and Advanced CSS series

Bonus Exercise

1. Go back to All About Dogs
2. Try to submit your favorite dog using the form. What happens?

Javascript

addDog(name, breed);
					

Javascript

• Use to add functionality to your webpage
• Makes webpages dynamic and interactive

Exercise

1. Go to All About Dogs
2. Try to submit your favorite dog using the form. What happens?

The form works! Javascript gives it functionality

3. Refresh the page. Does the data persist?

The data disappears! It is not being stored or retrieved.

To store and retrieve data we use JSON

Learn more!

Come to JS 101 and our Advanced JS series

JSON

A popular way to format data

[
{"id":38,"name":"Lassie","breed":"border collie"},
{"id":39,"name":"Snoopy","breed":"beagle"},
{"id":40,"name":"Benji","breed":"Mutt"},
{"id":41,"name":"Bud","breed":"Golden"},
{"id":42,"name":"Boomer","breed":"Mutt"}
]
						    

JSON

• The CLIENT can send new data as JSON in a REQUEST to the SERVER to be stored

"Tell the SERVER at allaboutdogs.com to store this new dog information"

JSON

• The SERVER can lookup data and send it back to the CLIENT as JSON in a RESPONSE

"Here is the dog information that I have stored"

The Database

• The SERVER stores and looks up data in a DATABASE
• Code is written in a server-side programming language to do this

Dog.new(name, breed).save
				

Exercise

1. Go to All About Dogs
2. Enter your name and favorite breed into the form and submit
3. Refresh the page. Does the data persist?

The data persists! It is being stored in a DATABASE.

4. Look over at your neighbor's screen. Do you see your entries on their page? What does this tell you?

Our clients all send requests to the same server and store in the same database

What types of developers work on these webpages?

Front-end developers

Write client-side code to...

• create and design webpages using HTML and CSS
• give websites functionality using Javascript
• send requests to servers and handle their responses

Back-end developers

Write server-side code to...

• receive requests from clients and send back responses
• connect to a database to store and look up data sent as JSON
• handle other logic such as transforming data or performing calculations

Full-stack developers

Write server-side
and
client-side code!

Day in the life

Planning, thinking, drawing, debugging

Learn more!

Come to our event on Nontraditional Paths to Tech

Closing