WDIR Info Session Code Along

Agenda + Objectives

• Describe the Request Response Cycle
• Understand the differences between HTML, CSS and Javascript
• Build a webpage using HTML, CSS and Javascript
• Bonus
• Conclusion

The request/response cycle

Question: Can someone explain the process of how a webpage is rendered in our browser when we visit a given address?

The request/response cycle is how your browser retrieves files from a server and renders a webpage.


When you visit ESPN you're making a request to a server that's located somewhere on the internet. Espn.com is merely an alias for the server's actual IP (Internet Protocol) address which is http://199.181.133.15. I would never remember that!

The server then sends you a response that generally consists of HTML, CSS and Javascript files. We also receive other files like images, video, ads.

Your browser takes those ingredients (the files) and bakes (renders) a webpage for you to view and interact with.

• Copy and paste 199.181.133.15 into your browser URL. Where does it take you?
• Let's open the Chrome Developer Tools (option + command + i) and select the Network tab. Notice all of the files that are being sent back to us in the response from ESPN!
• Let's check out some request and response headers.

1. Describe the request/response cycle in your own words.
2. What are the three file types that compose a basic webpage (hint... we're about to build a site with these three types)?

Our webpage ingredients: HTML + CSS + Javascript

Most webpages (at a minimum) consist of HTML, CSS and Javascript files.

• HTML stands for Hyper Text Markup Language. We use HTML tags to create HTML elements which give our page structure. You can think of HTML as the NOUNS of our page.
• CSS stands for Cascading Style Sheets. You can think of CSS as the ADJECTIVES of our page. CSS consists of rules that determine the color, fonts, and sizes of our HTML elements.
• Javascript dictates the behavior of our webpage. You can think of Javascript as the VERBS of a webpage. It allows events to happen when we click on a button to submit a form. Javascript also helps Google or Amazon "guess" what we're searching for in the search box.

Our browser bakes these ingredients (files) together to render a webpage.

Build a webpage using HTML, CSS and Javascript

Question: Has anyone heard of these terms? Has anyone built a website using HTML, CSS and Javascript?

We're gonna use an online tool called Codepen.io to build a webpage that contains HTML, CSS and Javascript so we can see what each does for us. We'll walk through each of the steps below together.

1. Go to Codepen.io and click on + New Pen in the top right corner.

   

2. Inside the HTML box, let's add an h1 tag that says "Hello World!". Our HTML markup should look like so:

   <h1>Hello World!</h1>

   Hit the Save button and you should see the following in the preview window:

   

3. Let's change the color and font of our "Hello World!" by adding a CSS rule to all the h1 tags.

   h1 {
     font-family: Georgia;
     color: green
   }

   The browser window in Cloud9 should automatically refresh and show your changes like so:

   

   Finally, let's add a button that will use Javascript to alert your name. We'll add this to our JS window.

4. Let's add a button element to our page and a Javascript onclick event. When our button is clicked, it'll fire off a browser alert. Let's add the code below to our HTML window:

   <button onclick="alert('Hello World!')">Click me!</button> 
   <!-- add the button inside the body of your page, just below your h1 -->

   The alert should look like this when clicked:

   

   
   

If you're feeling super confident, here are a few bonus suggestions...

1. Add an external image to your page
2. Try adding a todo list
3. Try to move your CSS rules to an external stylesheet

## 

Great work! Keep going! Here are some additional resources.

• W3 Schools HTML Tutorial
• W3 Schools CSS Tutorial
• W3 Schools Javascript Tutorial
• Request Response Cycle