In the previous video, we learned that a browser simply sends a request to a server somewhere in the
world over internet using the HTTPS protocol, and then it receives those JavaScript, HTML and CSS
files so that it's able to display a website.
Now.
How can we actually check this?
Well, I can actually go to view developer and this is using Google Chrome.
So I recommend for this part to use Google Chrome so you can follow what I'm doing.
If I go to developer tools here, it's going to open up a little box here with some information for
me.
Now what I want to focus on is this network tab.
And this network tab is going to tell us what type of information we receive from the server.
If I refresh here, you'll notice that.
I get some data here?
Now you want to make sure that there's no filter involved.
So we want to say over here that we want everything.
So there's no filter, everything.
There's no searching going on and we can refresh again and.
All right, we see a lot more files, but this looks intimidating.
Let's think about what we just learned.
We learn that we first get an HTML file, which happens to be this one.
It says over here type document.
And if I click over here, this is an HTML document.
So the response from the server when I hit refresh, remember it communicated to a server somewhere
in the world that had these files on that computer.
And here we have our HTML file.
If I'll scroll down.
Look at that.
We can see over here webcomic of romance, sarcasm, math and language, which is right over here.
Remember how I said HTML is the text that gets displayed on a website?
Well, this is our HTML here that the server responded with and the browser knows how to read this and
display the text.
What about the CSIS?
Well, I can actually click on this CSIS tab here and show me all the CSIS files that came from the
server.
And you see over here that this, again, looks a little bit different.
It's in a different syntax than an HTML.
But all it does here is it gives me the styles that I want.
You can see over here we can pick background color.
We can pick different position, width left position.
And this gives us the styling that we want on a website.
And then if we go to JavaScript, we actually see the JavaScript files that this website uses.
Now we don't have to worry about JavaScript here.
JavaScript allows us to do some interactivity on this website that for now, we probably don't need
to worry about.
Now, I do want to point out that there's a few other things in here like image and media.
And as you can see, images, we definitely have some images in here that we are using.
If I click on preview, we can see the images.
But at the end of the day, the concept is the same.
We have an HTML file.
Which in our case is right over here.
You see how the HTML file is displayed without CSS, which is just the textual textual data we have.
The CSS, which is the styling.
Of our page and then some JavaScript to make our page interactive and maybe some images.
But at the end of the day, all these things are actually just textual data that we receive from the
server.
So that means that in order for us to be able to build our website, we need to create these three things
an HTML file, a CSS file and a JavaScript file.
Actually, we don't even need a JavaScript file if we don't want any interactivity.
We don't even need a CSS file.
If we don't want any styling, we can even just use an HTML file.
So in the next video, we're going to build our first Web site.
I'll see you in that one.
Bye bye.