1 00:00:02,120 --> 00:00:04,400 Let's get started with making our lives 2 00:00:04,400 --> 00:00:06,480 a bit easier first. 3 00:00:06,480 --> 00:00:08,270 Up to this point in the course, 4 00:00:08,270 --> 00:00:11,280 whenever we changed anything in our code and saved 5 00:00:11,280 --> 00:00:12,460 this envious code, 6 00:00:12,460 --> 00:00:16,260 we had to reload our browser to retrieve this latest code 7 00:00:16,260 --> 00:00:18,350 from the HTML file. 8 00:00:18,350 --> 00:00:19,200 As an example, 9 00:00:19,200 --> 00:00:22,780 we can go to our full week HTML file here and delete 10 00:00:22,780 --> 00:00:26,083 the upcoming road here in our H1 element. 11 00:00:27,130 --> 00:00:29,810 If we do that and go back to our website, 12 00:00:29,810 --> 00:00:31,510 this change is not reflected here. 13 00:00:31,510 --> 00:00:34,030 The upcoming word is still this plate. 14 00:00:34,030 --> 00:00:36,470 If we reload the browser, you see that 15 00:00:36,470 --> 00:00:38,363 Now we have the latest code. 16 00:00:39,570 --> 00:00:41,460 Now, though, this is not a big issue, 17 00:00:41,460 --> 00:00:42,980 It's not very comfortable. 18 00:00:42,980 --> 00:00:46,670 So I think it will be better if this reload would take place 19 00:00:46,670 --> 00:00:47,670 automatically. 20 00:00:47,670 --> 00:00:50,700 So whenever we change anything in the code in the HTML or 21 00:00:50,700 --> 00:00:53,550 CSS files, once this change is saved, 22 00:00:53,550 --> 00:00:57,410 then the page gets automatically reloaded. 23 00:00:57,410 --> 00:00:58,243 Thankfully, 24 00:00:58,243 --> 00:01:02,150 VS code comes with an extension which does exactly that. 25 00:01:02,150 --> 00:01:05,230 You can find this extension here, in the view ribbon, 26 00:01:05,230 --> 00:01:06,703 and they're in extensions. 27 00:01:08,060 --> 00:01:10,713 And now just search for live server. 28 00:01:11,620 --> 00:01:14,350 This extension here by Ritwick Dey. 29 00:01:14,350 --> 00:01:18,500 Now what happens with this extension is that we can launch a 30 00:01:18,500 --> 00:01:22,030 development server, a local development server, 31 00:01:22,030 --> 00:01:24,923 which comes with this live reload feature. 32 00:01:26,080 --> 00:01:29,537 The local development server is not a server in the web or 33 00:01:29,537 --> 00:01:30,370 anything like that. 34 00:01:30,370 --> 00:01:32,670 So your computer is not opened to the world suddenly. 35 00:01:32,670 --> 00:01:35,500 It's still running locally in your environment, 36 00:01:35,500 --> 00:01:38,750 but it simulates a real server in the internet. 37 00:01:38,750 --> 00:01:42,370 So it kind of simulates your website as if it would be 38 00:01:42,370 --> 00:01:43,240 deployed already. 39 00:01:43,240 --> 00:01:46,960 So if your website would be running in the internet. 40 00:01:46,960 --> 00:01:48,060 As I said, it doesn't do that 41 00:01:48,060 --> 00:01:51,090 of course, it's still running locally on your machine. 42 00:01:51,090 --> 00:01:53,760 But with this life development server feature, 43 00:01:53,760 --> 00:01:57,400 we have this hot reload feature and that's exactly what we 44 00:01:57,400 --> 00:02:00,180 want. So make sure to download or in my case, 45 00:02:00,180 --> 00:02:02,053 enable this extension. 46 00:02:03,610 --> 00:02:04,680 Once this is done, 47 00:02:04,680 --> 00:02:08,622 we can now close this and go back to our explorer here. 48 00:02:10,400 --> 00:02:11,780 A quick side note here, 49 00:02:11,780 --> 00:02:16,780 the first folder now in our Explorer is this VS code folder, 50 00:02:17,640 --> 00:02:18,870 highlighted green here. 51 00:02:18,870 --> 00:02:20,960 This is just added by our live server, 52 00:02:20,960 --> 00:02:23,240 nothing important for us here. 53 00:02:23,240 --> 00:02:26,800 And now you can select one of the HTML files. 54 00:02:26,800 --> 00:02:29,370 I'll go for the full week HTML file here. 55 00:02:29,370 --> 00:02:32,480 Right click onto the file name and now select 56 00:02:32,480 --> 00:02:34,793 open with live server. 57 00:02:35,640 --> 00:02:38,280 This should open a new browser window. 58 00:02:38,280 --> 00:02:42,330 And if we switched to this window, now you see that up here, 59 00:02:42,330 --> 00:02:44,250 where we entered our URL, 60 00:02:44,250 --> 00:02:47,770 we previously had the path to our file stored 61 00:02:47,770 --> 00:02:50,010 locally on our system. 62 00:02:50,010 --> 00:02:54,260 Now we have a combination of the IP of our computer, 63 00:02:54,260 --> 00:02:58,950 the so-called port, and here default week HTML file again. 64 00:02:58,950 --> 00:03:01,690 This is not very important at this point of the course. 65 00:03:01,690 --> 00:03:04,980 It just shows you that the development server is running in 66 00:03:04,980 --> 00:03:06,380 the end. 67 00:03:06,380 --> 00:03:08,790 Now and if we switch back to our code 68 00:03:08,790 --> 00:03:11,060 and add back our upcoming 69 00:03:12,140 --> 00:03:14,630 text here into the H1 element, 70 00:03:14,630 --> 00:03:17,670 save this and switch back. 71 00:03:17,670 --> 00:03:21,390 Well, suddenly the upcoming text is already added. 72 00:03:21,390 --> 00:03:22,270 As I said, 73 00:03:22,270 --> 00:03:24,670 with this live development server running, 74 00:03:24,670 --> 00:03:27,980 we now immediately have this hot reload feature and the 75 00:03:27,980 --> 00:03:31,130 content gets updated immediately. 76 00:03:31,130 --> 00:03:33,610 So this is it about your preparation here. 77 00:03:33,610 --> 00:03:36,833 Let's now dive into the core content of this module.