Now at this point, before we dive deeper
into HTML and CSS, which we will do in the next lectures,
I want to come back to this slide from the first course
section where we learned how the web works.
There you learned that websites and these
browser instructions, HTML and CSS and so on,
are requested by the browser with such a request
which reaches a server,
which then returns those instructions to the browser.
Now here on this page, on which we worked thus far,
we saw this in action.
Actually, as mentioned earlier in this section,
we don't really have a real web server yet, we're just
loading a locally stored file into the browser here.
We'll add a development server in the next course section,
but generally the big picture still applies.
Loading this file into the browser is pretty similar
to returning that file in a response here.
Now that is all not new though.
What is new? Is that in the last course lecture,
we added a separate CSS file, which we are
including here with this link into the HTML file.
And now here is something very important to understand:
including external files like this CSS file into an HTML
file is something we'll do a lot throughout this course,
not just with CSS files.
We're going to add more CSS files as well,
but not just that, but later in this course
we're also going to add JavaScript code,
and at some point we're going to start including JavaScript
files- external JavaScript files- into the HTML code,
similar to, as we're doing it here, with the CSS file.
Now it's super important to understand that including
external files like this CSS file here does not mean that
behind the scenes, the CSS code stored in that CSS file
is magically merged into this HTML file.
Instead, we keep two separate files.
What happens instead is that the browser now actually
requests a separate CSS file after it loaded this HTML file.
And you can view that in the browser developer tools,
which we already used a bit throughout the discourse.
You can open them by inspecting any part on your page or by
going to the menu here and then there to
"more tools", "developer tools".
Once you open those developer tools,
you got the Elements tab, with which we already worked,
but you also got another tab here, the Network tab.
Now you will also get other tabs.
Most of them are more advanced and you don't need them that
often, but the Network tab is quite useful.
If you visit that tab,
you can see all the network requests that are caused by the
website on which you currently are.
And later in the course,
we're going to learn how we could send requests from the
already loaded website with help of JavaScript.
But at the moment, we're not doing that yet.
Here, by the way,
you can also simulate that you have a slower connection so
that you can see how fast your website would load if you
would be on a slower device or network.
But for the moment, we'll keep that to no throttling.
Now what's interesting is if you keep that network tab open
and you then reload this page by clicking the reload button
or pressing the reload shortcut,
what you see then is that there, we got multiple requests.
We got two requests, to be precise:
one for the index HTML file,
and then here a second request below that to the
daily challenge CSS file.
And that's the important takeaway here
and from this course in general.
As I just explained,
external files are not merged into this HTML file.
Instead when you link to a CSS file like this,
or if you would include an image,
which is something we'll also do later,
or a JavaScript file,
then those files are requested with separate requests,
after the first request has been fulfilled,
the first request for the HTML file.
So your HTML file is always the first thing to be requested
because that's the file that contains your content,
your structure, and your metadata.
But then other files on which this file might depend,
like this CSS file, are then all requested automatically
by the browser,
like it's requesting this daily-challenge CSS file here.
So we actually got two requests and responses going on here.
And for bigger, more complex websites,
it's absolutely not uncommon that you have multiple,
sometimes even dozens, of requests and responses going on as
the page loads.
Now, this all happens pretty fast and the browser also has
various optimization techniques for caching.
So for storing files, which had already loaded in the past,
but it does request all these files separately with separate
request response cycles as your page loads.
And this is just important to understand: when I say that we
include or import an external file into this HTML file,
That actually means that we point at some extra file and the
browser will then request that extra file when the page
loaded.