Understanding how websites work, a glimpse into the request/response lifecycle (beginner friendly!) | Kalob Taulien | Skillshare
Drawer
Search

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Understanding how websites work, a glimpse into the request/response lifecycle (beginner friendly!)

teacher avatar Kalob Taulien, Web Development Teacher

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Understand how websites work, a glimpse into the request/response lifecycle (beginner friendly!)

      1:12

    • 2.

      What is a browser?

      1:18

    • 3.

      What does your browser do?

      1:11

    • 4.

      What are web requests?

      2:41

    • 5.

      The request lifecycle

      0:58

    • 6.

      What are server responses?

      3:20

    • 7.

      Interpreting HTML, CSS, and JavaScript

      1:28

    • 8.

      Viewing your requests and responses

      4:39

    • 9.

      Your project

      1:31

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

407

Students

20

Projects

About This Class

Learn how your computer "talks" to a website.

In this course, you will learn how your computer (and web browser) communicate with a website. When you go to http://www.yourwebsite.com your browser is doing a lot of things behind the scenes, including "making requests" and "accepting responses".

  1. But what does our browser ask for?
  2. How can we tell what the browser has received?
  3. What does a server give us? 
  4. And how does it all work?

As a web developer, it's vital to know how these things work. This is one of those skills that separates good developers from great developers — aim to be great! 

Requests

When you ask a website for information, your browser makes a request for information. The server then checks to see if you're allowed to see certain things and use certain files, and gives you the data (and files) you need to display the website. 

Your browser will then download all the files it needs, piece them together, and display the website. 

But at some point, it needs to determine what is HTML, what is CSS, and what is JavaScript (plus other file types like images or fonts). 

Responses

When you ask a website for information, the server you're talking to gives you files to download. Your browser safely does this in the background and puts all the different files together. If it needs to make more requests, it will make more requests and await another server response.

In this course, you will learn how all of this works, why it's important to know all this, and how to check in on your requests and responses. 

Resources:

Meet Your Teacher

Teacher Profile Image

Kalob Taulien

Web Development Teacher

Teacher

Hi everybody! I'm Kalob Taulien.

 

Here's the TL;DR (short) version about me:

I have been coding since 1999 and teaching people how to code since 2013 I have over 350,000 web development students world-wide I'm on the Wagtail CMS core development team (Wagtail is Python's #1 most popular website making system) I try my best to answer EVERY question my students have  I love teaching — it's definitely one of my natural talents  Also I love goats! (Great conversation starter with me if we ever get to meet in person)

Below you can find all my Skillshare courses. The categories go from easiest to hardest, except for the Misc. Coding Courses at the very end. 

If you're brand new to coding, start with BEGINNERS WEB DEV.&nb... See full profile

Related Skills

Development Web Development
Level: Beginner

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Understand how websites work, a glimpse into the request/response lifecycle (beginner friendly!): Hello and welcome to understanding websites. In this course, we're going to take a look at how websites talk to your computer and how your computer talks to a website. We're not going to be writing any code today, but we will be exploring requests and responses, which is basically the communication between your computer and a website and how it sort of downloads files from a server and then puts them together and displays your website. Hello, my name is Caleb Pauline. I am a senior web developer. I'm a premium coating instructor. I've taught over 300 thousand students how to code. And today I'm going to be your instructor. At the end of this course, you're going to learn how to explore your requests and find your responses from your browser. So you're going to be able to see how your computer or how your browser is communicating with a website, what a website is sending back to your computer. If this interests you, I highly recommend you take this course. This is very, very vital information for anyone who is in web development, even if you're brand new, it's really good to understand how this works. So if this is something you're interested in, please step in and we'll get started right away. 2. What is a browser?: Alright, first things first, let's take a look at what a browser is. So what is a browser? A browser is a program that asks a website for information. This ask Is called a request, and when the request is completed, the website returns and answer called a response. It's a lot like when you pick up the phone and you call your mom or your dad or your best friend, they pick up their end of the phone, they say hello, that's the response. Now the response has data in the form of HTML, CSS, and JavaScript. You can also include things like images and, and other forms of data. But we're not really going to touch too much into what that is. But really you just need to know that the response has this thing called a payload and it sends back files. And then your computer downloads all of these little tiny files. And your browser is the program that reads them, pieces them altogether, and makes your beautiful website. Now when it pieces things together, that's called rendering. So it's going to try to render the final output. Now there are four major browsers. There's actually thousands and thousands of browsers out there. But there's four major ones. Google Chrome, Mozilla, Firefox, Apple Safari, and Microsoft Edge. But again, there's hundreds, if not thousands of smaller, lesser-known web browsers available. Your phone might even come with a different one that's not one of these four. 3. What does your browser do?: What does your browser do? So your browser collects information and its job is to display it. Know when it collects information is actually just asking the server, hey, can I have some information? The server says, yep, you can have this information, sends the files on your computer than downloads them or your browser will download them, piece them all together in a nice way and kick starts all the code. And that sort of creates your nice interactive website. Not all browsers are the same. That should actually say not, not now. Not all browsers are the same. So what works in one browser may not necessarily work on another browser. So if you ever stumble on a website that seems broken and let's say Google Chrome will try opening it in Firefox or vice versa, or Apple Safari or Microsoft Edge, just try it in another browser because some, sometimes the rendering engines behind the scenes don't work the exact same they're supposed to, but they don't always. Your browser's job is also to communicate. It's responsible for the communication slash transactions between your computer and the web site. And again, it's like picking up the phone and dialing your best friend. You need to wait for them to actually answer the phone, say hello, and then you can start a conversation. 4. What are web requests?: What are web requests? Requests is simply asking for information. So web requests are when you ask for information from a website, you're simply asking for the files that you need to display the website. And often this is called a handshake. So let's take a look at how this works. It starts off by going to a website like Google.com. Your browser then asks Google.com for the data it needs to display the page nicely. Now this whole process is called a request. And actually when it sends you the information back, it's called response, but we'll touch on that in just a little bit. Requests can have sizes as well, so or a request can be literally any size. Google.com is a small request. Or really any website. We're just going to the website and saying, Hey, can we have the files and then the website determines what it should send back. But that that first request, that first handshake is usually pretty small. Now if you load up something like Instagram.com, every image will be a new request. So as you scroll through your instant feed, it's going to load more and more images and that's going to be a new request every single time. Or if you go on Facebook.com, every comment you make, every link that you click, those are all requests. That's a different type of request. And again, we'll get into that in just a little bit. But all of those are called Requests. Anytime you send a little piece of data to a website to either ask for information or even to ask to delete information or update information or to save information. Those are all requests and these are called request types. So sometimes our request comes in the form of asking for information. And this is called a GET request, but it can also be in the form of asking to save information. Now technically, those are called post requests. There's also a delete request to delete information and a put or patch request to update information. And once again, a normal handshake is just a GET request and that's the most common one. And this is actually getting into RESTful APIs. Now if you're interested in API is I have a course on RESTful APIs. Feel free to go and take a look at that after this course. Now one thing to notice that everything has to travel through the internet. Smaller requests and responses means less bandwidth. It means it can travel through the internet, through the wires that are sent all across the globe through your Wi-Fi a can serve that a lot faster because it's a lot smaller and it's a lot like this. Think about the last time you had to download a one gigabyte file versus downloading a one kilobyte file, right? The one gigabyte file takes a little while. It could take several hours depending on your internet speed. But at one kilobyte file, even if you have fairly slow internet, is still a very, very fast download. Requests are the exact same thing. 5. The request lifecycle: The request lifecycle. Let's take a look at how this begins when you ask for information from a website, you're actually doing a lot more than that. When you ask, let's say my website, Caleb dot IO for information, there's the domain mapping behind it. So Caleb dot IO actually points to an IP address and that IP address connects to my server. So you're not actually requesting information directly from Caleb dot IO. It's just sort of masking it so you don't have to remember IP addresses. And then how it ends. The server is going to accept my request or your request. It's going to understand what it is supposed to output and sends files like HTML, CSS, JavaScript images, all that other stuff that makes your website look good in this thing called a response. Lastly, the browser downloads these files and saves them onto your computer. And if it has downloaded more than once, sometimes it'll just use the old, old, old files and that's called a cache. It's going to then piece all these files together and render your content. 6. What are server responses?: What our server responses anyway. So a response happens when the server responds to your web request. A response happens after the request is made, so it always goes request and then response. And responses can be pretty much any format, but typically it's HTML, CSS, JavaScript, or plain text or JSON for like an API. If you don't know what an API is, honestly, that's okay. You can just ignore that bit. But if you're interested in learning a little bit more about APIs, there are some cases where an API, also known as an application programming interface, will send XML or JSON formatted data. Now typically this is, it's kinda like plain text. Text. It's not really specialized. Mark down too much. It has some rules, but not too many rules. But the nice thing about that is because it's sort of plain texts. That means there's not much to interpret. And your browser can deal with this a lot faster. Or your server even could deal with this a lot faster and then render HTML, CSS, JavaScript, whatever it needs to do. Know often Javascript or a server programming language like Python is going to handle these API responses. Again, if you don't know too much about APIs, if you're brand new to web development. Don't worry about this part right now. So as an example, when you load up Instagram.com, you're making a request to the website to load the initial data. As you scroll down it loads more and more images dynamically so that the first request can always be small and fast at o, it really only shows you or tries to get like two or three images, but it's not going to save a 1000 images or it's not going to ask for 1000 images because that's going to be really slow to load. Your request is going to be a pretty small request payload. And that response is also going to be a fairly small response payload. And that just means that, for example, Instagram.com can load really, really fast. Now as you scroll down the page, you're going to see that more in images show up and sometimes it's so fast, you don't even notice that second request, third request, fourth requests, when you click load more on any website or you scroll down on Instagram, usually an API endpoint that returns JSON or XML. And the reason is because both of them are lot more lightweight than HTML. Then your browser reads the JSON response. For example, JavaScript takes over and it says, oh, I need to display more photos. And it dynamically creates your HTML structure for you and adds it to the page. And as soon as it's added to the page, your browser then takes over for JavaScript and says, Oh, I need to make another request. And then the cycle repeats. The server says, Oh, there's a request coming in for this particular image, serve that image. Now on the topic of images and other assets like images, each one is likely to be its own request. The browser creates a new request for each image file to download. The server sends a request with the image data. And again, your browser then displays that image. Though technically there are ways to bundle responses together for a faster one time payload response. This way you can just ask the server once and it will send all the images all at the same time. So it doesn't have to go one by one by one. And again, that just makes that response payload faster. And the reason for that is because if you think about driving to and from work or to and from the hospital to and from your house. There's a lot of travel time in the internet. And so if you can reduce the travel time and just carry all the images in one load, then is going to be a lot faster. 7. Interpreting HTML, CSS, and JavaScript: Interpreting HTML, CSS, and JavaScript. So these are the most common response datatypes. So when you make a request and you get a response from a server, you're likely going to be getting HTML, CSS, and JavaScript. Your browser's job is to download each one of those files. But the browser also has these things called engines. And so these engines have certain rules for HTML. They have different rules for CSS and they have different rules for JavaScript. If your browser thinks it's opening a JavaScript file, it'll use the JavaScript engine to read and interpret and make your websites interactive. Likewise with CSS and HTML, the realizes that there's a CSS file, a cascading style sheet file. That is, it's going to try to interpret that and make your website look good. And so they have different purposes. Once all the files are downloaded as best as they possibly can, it's going to piece them all together. And again, it's going to try to display your website or it's going to perform a render. But at some point that JavaScript is going to take over the browser just because the browser has a particular purpose, but JavaScript also has its own purpose. So after the initial response is rendered or displayed in your browser, most of the time, JavaScript is going to take over, not all the time. And sometimes there's some cooperation between JavaScript and your browser. Javascript can tell the browser to make more requests on the flyby, dynamically adding links, images, and other assets to your page or by directly communicating with the browser and creating a new requests. So JavaScript can make its own request, but your browser can also make requests to. 8. Viewing your requests and responses: Viewing your requests and responses. So to view any sort of request and response, you're going to need a modern browser. I recommend Chrome or Firefox for this. And then I'm going to demonstrate in just a second how I can see all the responses from a website like Google.com. So you're gonna wanna pay close attention because you'll be trying this in the next video. So I'm just going to get out of this and go over to Google.com. And so this is just the regular Google website. And what I can do is right-click go to Inspect. And you're going to see these options in here. Now yours might be a light color mode, so I've got dark mode on, and this might actually show up on the right side or the left side. But either way you're going to see sort of these options here. For us. We're going to want to go over to the network tab and we're not going to see anything in here. And I have my unfiltered by CSS already. Let's go ahead and filter that by all. And if you don't see anything, that's totally fine. This is going to process all the requests that are coming in right now from the time you open this to anytime you close it. So let's go ahead and just click refresh. And we can see all these requests were coming in. And so there's a lot of different things in here. We have a document which is HTML. We've gotta P&G, that's an image. Web P, that's also an image. We have a plain text one in here. We've got a text, HTML, we've had a script in here as well. We've got all sorts of stuff that we can see that maybe what I'll do is I'll just make this a touch bigger. So if we wanted to see an image, we could right-click and then go to open in new tab. And that's the image that it loaded. So we now know that Google made a request for its own logo. Lets take a look at another one here. Right click open in a new tab. And this is what's called a sprite. So it's one big image with all these little symbols in it. And then it uses CSS to sort of display the images like just a particular part of it. So like just the notification sign. Now the benefit to doing this is it's making one request for the image. Instead of making 12345678910, I don't know, 2025 requests for all these different images. It just has to do the one. And so that's significantly faster and that's how Google loads so fast is it really optimizes these request response lifecycles. Now you can also filter by JavaScript. So let, let's see what happens when I type in here, k, b. And you can see in here that it's doing a search for q is equal to kx. Q is equal to K, Q is equal to K, L, and as it types, it makes a new request every single time. Now this is all JavaScript. This is not your browser. This is JavaScript doing this. And this is using a thing called ajax or the fetch JavaScript API. If you don't know what those are, that's honestly OK. We can look at just JavaScript requests. So these are the files that we requested from JavaScript. We didn't request any CSS at the moment. I don't know why that's that doesn't seem right. I guess there's no CSS in there. That probably means if we go into here, right click and view page source, we're going to see all the CSS in here. And there it is. All this CSS is in the page. So it wasn't loading any CSS files that came with the HTML document. Interesting. We can also see all the different images, media's fonts, documents, web sockets manifests all these other things. Now we can also see if I just go back to all how long it took to get what the file size is. We can filter by the file size here. We can see the biggest file here was the document itself, that's the entire page. It was about 61 kilobytes and it took a 140 milliseconds to get. And again, the idea here is that I went to Google.com. Google.com is going to point to some form of IP address That's going to connect to some server that they have. That servers then going to say, OK, well, serve this HTML document and serve all of these other assets with it as well. And so essentially, I asked for a bunch of information. I didn't even know I was going to be asking for all of this, but I asked for a bunch of information from Google. Google determined what information it needed to give me. And then as a response said, here, have all of these files in here. And that effectively is how you view your requests and your responses. Again, you don't need to use Google Chrome. I was just using Chrome because that's the tool that I like to use when I'm doing things like this. But you can also use Firefox Safari edge. Really any browser will be able to do this. 9. Your project: Your project. So here's what I would like you to do. I want you to open your favorite browser. Could be Chrome, Firefox, Safari edge. Load up my website. Just as an example, goto Caleb dot IO, right-click on the page and then inspect, and then click the Network tab and then refresh your page if you don't see anything like we did in the last video. And then I want you to be able to filter your responses by documents. So like HTML, CSS, images or JavaScript and just kinda see what kinda things my website's going to try to serve you. Find an image and then open that image in a new tab and then take a screenshot of your network panel, just the entire panel, not the image itself, but take a screenshot of your network panel while it's open with all the different requests and responses in there and share it in your project section. Now don't worry, anything you're doing here is it's not going to break your browser. It's not going to hurt your computer, is not going to do anything that you can't undo by simply clicking the refresh button on your browser. So feel free to experiment. It's completely safe to do this. Go ahead and give this a shot. Take a screenshot of your network panel while it's open, shared in your project section. And once you've done that, you have completed this course. Thank you for taking the time to watch this course. I hope you learn something new and exciting. Again, this is really important when it comes to web development. And if you wanted to learn more about HTML, CSS, JavaScript APIs, anything that, anything like that. Always feel free to view my profile. I have courses on all of these subjects already. Thanks again, and I hope to see you in another course.