1 00:00:02,170 --> 00:00:05,610 Now at this point, before we dive deeper 2 00:00:05,610 --> 00:00:09,920 into HTML and CSS, which we will do in the next lectures, 3 00:00:09,920 --> 00:00:14,520 I want to come back to this slide from the first course 4 00:00:14,520 --> 00:00:18,630 section where we learned how the web works. 5 00:00:18,630 --> 00:00:21,620 There you learned that websites and these 6 00:00:21,620 --> 00:00:25,579 browser instructions, HTML and CSS and so on, 7 00:00:25,579 --> 00:00:29,960 are requested by the browser with such a request 8 00:00:29,960 --> 00:00:31,500 which reaches a server, 9 00:00:31,500 --> 00:00:35,330 which then returns those instructions to the browser. 10 00:00:35,330 --> 00:00:39,050 Now here on this page, on which we worked thus far, 11 00:00:39,050 --> 00:00:40,724 we saw this in action. 12 00:00:40,724 --> 00:00:44,240 Actually, as mentioned earlier in this section, 13 00:00:44,240 --> 00:00:48,790 we don't really have a real web server yet, we're just 14 00:00:48,790 --> 00:00:52,680 loading a locally stored file into the browser here. 15 00:00:52,680 --> 00:00:56,700 We'll add a development server in the next course section, 16 00:00:56,700 --> 00:01:00,450 but generally the big picture still applies. 17 00:01:00,450 --> 00:01:04,209 Loading this file into the browser is pretty similar 18 00:01:04,209 --> 00:01:08,370 to returning that file in a response here. 19 00:01:08,370 --> 00:01:10,689 Now that is all not new though. 20 00:01:10,689 --> 00:01:14,957 What is new? Is that in the last course lecture, 21 00:01:14,957 --> 00:01:19,060 we added a separate CSS file, which we are 22 00:01:19,060 --> 00:01:22,885 including here with this link into the HTML file. 23 00:01:22,885 --> 00:01:27,360 And now here is something very important to understand: 24 00:01:27,360 --> 00:01:32,360 including external files like this CSS file into an HTML 25 00:01:32,442 --> 00:01:37,442 file is something we'll do a lot throughout this course, 26 00:01:37,460 --> 00:01:39,912 not just with CSS files. 27 00:01:39,912 --> 00:01:42,854 We're going to add more CSS files as well, 28 00:01:42,854 --> 00:01:46,380 but not just that, but later in this course 29 00:01:46,380 --> 00:01:49,160 we're also going to add JavaScript code, 30 00:01:49,160 --> 00:01:53,110 and at some point we're going to start including JavaScript 31 00:01:53,110 --> 00:01:58,110 files- external JavaScript files- into the HTML code, 32 00:01:58,330 --> 00:02:02,364 similar to, as we're doing it here, with the CSS file. 33 00:02:02,364 --> 00:02:07,000 Now it's super important to understand that including 34 00:02:07,000 --> 00:02:11,420 external files like this CSS file here does not mean that 35 00:02:11,420 --> 00:02:15,163 behind the scenes, the CSS code stored in that CSS file 36 00:02:15,163 --> 00:02:19,530 is magically merged into this HTML file. 37 00:02:19,530 --> 00:02:22,700 Instead, we keep two separate files. 38 00:02:22,700 --> 00:02:26,760 What happens instead is that the browser now actually 39 00:02:26,760 --> 00:02:31,760 requests a separate CSS file after it loaded this HTML file. 40 00:02:33,230 --> 00:02:36,420 And you can view that in the browser developer tools, 41 00:02:36,420 --> 00:02:40,410 which we already used a bit throughout the discourse. 42 00:02:40,410 --> 00:02:44,280 You can open them by inspecting any part on your page or by 43 00:02:44,280 --> 00:02:47,197 going to the menu here and then there to 44 00:02:47,197 --> 00:02:50,009 "more tools", "developer tools". 45 00:02:50,009 --> 00:02:53,075 Once you open those developer tools, 46 00:02:53,075 --> 00:02:57,275 you got the Elements tab, with which we already worked, 47 00:02:57,275 --> 00:03:01,206 but you also got another tab here, the Network tab. 48 00:03:01,206 --> 00:03:04,140 Now you will also get other tabs. 49 00:03:04,140 --> 00:03:07,860 Most of them are more advanced and you don't need them that 50 00:03:07,860 --> 00:03:11,910 often, but the Network tab is quite useful. 51 00:03:11,910 --> 00:03:13,460 If you visit that tab, 52 00:03:13,460 --> 00:03:17,130 you can see all the network requests that are caused by the 53 00:03:17,130 --> 00:03:19,440 website on which you currently are. 54 00:03:19,440 --> 00:03:20,800 And later in the course, 55 00:03:20,800 --> 00:03:24,100 we're going to learn how we could send requests from the 56 00:03:24,100 --> 00:03:28,030 already loaded website with help of JavaScript. 57 00:03:28,030 --> 00:03:30,520 But at the moment, we're not doing that yet. 58 00:03:30,520 --> 00:03:31,420 Here, by the way, 59 00:03:31,420 --> 00:03:35,130 you can also simulate that you have a slower connection so 60 00:03:35,130 --> 00:03:38,450 that you can see how fast your website would load if you 61 00:03:38,450 --> 00:03:41,460 would be on a slower device or network. 62 00:03:41,460 --> 00:03:44,600 But for the moment, we'll keep that to no throttling. 63 00:03:44,600 --> 00:03:48,365 Now what's interesting is if you keep that network tab open 64 00:03:48,365 --> 00:03:52,450 and you then reload this page by clicking the reload button 65 00:03:52,450 --> 00:03:55,065 or pressing the reload shortcut, 66 00:03:55,065 --> 00:04:00,065 what you see then is that there, we got multiple requests. 67 00:04:00,700 --> 00:04:03,530 We got two requests, to be precise: 68 00:04:03,530 --> 00:04:06,000 one for the index HTML file, 69 00:04:06,000 --> 00:04:09,550 and then here a second request below that to the 70 00:04:09,550 --> 00:04:12,610 daily challenge CSS file. 71 00:04:12,610 --> 00:04:14,830 And that's the important takeaway here 72 00:04:14,830 --> 00:04:17,339 and from this course in general. 73 00:04:17,339 --> 00:04:18,378 As I just explained, 74 00:04:18,378 --> 00:04:23,378 external files are not merged into this HTML file. 75 00:04:23,720 --> 00:04:27,260 Instead when you link to a CSS file like this, 76 00:04:27,260 --> 00:04:29,045 or if you would include an image, 77 00:04:29,045 --> 00:04:31,604 which is something we'll also do later, 78 00:04:31,604 --> 00:04:33,374 or a JavaScript file, 79 00:04:33,374 --> 00:04:38,374 then those files are requested with separate requests, 80 00:04:38,434 --> 00:04:41,670 after the first request has been fulfilled, 81 00:04:41,670 --> 00:04:44,344 the first request for the HTML file. 82 00:04:44,344 --> 00:04:49,344 So your HTML file is always the first thing to be requested 83 00:04:50,360 --> 00:04:52,840 because that's the file that contains your content, 84 00:04:52,840 --> 00:04:55,174 your structure, and your metadata. 85 00:04:55,174 --> 00:04:59,400 But then other files on which this file might depend, 86 00:04:59,400 --> 00:05:03,750 like this CSS file, are then all requested automatically 87 00:05:03,750 --> 00:05:04,950 by the browser, 88 00:05:04,950 --> 00:05:08,430 like it's requesting this daily-challenge CSS file here. 89 00:05:08,430 --> 00:05:13,430 So we actually got two requests and responses going on here. 90 00:05:13,810 --> 00:05:16,410 And for bigger, more complex websites, 91 00:05:16,410 --> 00:05:20,120 it's absolutely not uncommon that you have multiple, 92 00:05:20,120 --> 00:05:24,360 sometimes even dozens, of requests and responses going on as 93 00:05:24,360 --> 00:05:25,960 the page loads. 94 00:05:25,960 --> 00:05:30,130 Now, this all happens pretty fast and the browser also has 95 00:05:30,130 --> 00:05:33,820 various optimization techniques for caching. 96 00:05:33,820 --> 00:05:37,620 So for storing files, which had already loaded in the past, 97 00:05:37,620 --> 00:05:42,300 but it does request all these files separately with separate 98 00:05:42,300 --> 00:05:46,650 request response cycles as your page loads. 99 00:05:46,650 --> 00:05:50,640 And this is just important to understand: when I say that we 100 00:05:50,640 --> 00:05:55,640 include or import an external file into this HTML file, 101 00:05:55,760 --> 00:06:00,180 That actually means that we point at some extra file and the 102 00:06:00,180 --> 00:06:04,150 browser will then request that extra file when the page 103 00:06:04,150 --> 00:06:04,983 loaded.