0 1 00:00:00,680 --> 00:00:06,500 So, now that we've spoken about how the Internet works, in this episode I want to talk about: How exactly 1 2 00:00:06,500 --> 00:00:07,980 do websites work? 2 3 00:00:08,030 --> 00:00:12,800 What exactly does HTML, CSS and Javascript do exactly? 3 4 00:00:12,830 --> 00:00:19,850 Now, in order to access a web page, we all know that you need a browser, right? And that can be Chrome, Safari, 4 5 00:00:19,850 --> 00:00:22,160 Firefox - whatever is your favorite one. 5 6 00:00:22,160 --> 00:00:29,810 These are all pieces of software that allow you to look up the IP address of your website and be able 6 7 00:00:29,810 --> 00:00:36,860 to receive data that it can render into these beautiful websites that we see. Now, the data that you 7 8 00:00:36,860 --> 00:00:41,410 receive from the server usually consists of three types of files: 8 9 00:00:41,670 --> 00:00:44,270 HTML, CSS and Javascript. 9 10 00:00:44,270 --> 00:00:50,570 And it's very likely that you would have come across these types of files or these words before because 10 11 00:00:50,780 --> 00:00:54,490 they're so common and they're so integral to how websites work. 11 12 00:00:54,530 --> 00:00:59,850 But what exactly do they do and why are there so many different types of files? 12 13 00:00:59,900 --> 00:01:03,440 Why can't we just have one file that's, you know, a website? 13 14 00:01:03,650 --> 00:01:06,260 Well, they actually have very different jobs. 14 15 00:01:06,260 --> 00:01:11,520 The HTML code file is responsible for the structure of your web site. 15 16 00:01:11,630 --> 00:01:17,990 So if a website was a house, then the HTML would be the builder who would come in to build the walls 16 17 00:01:18,230 --> 00:01:19,780 or put in a toilet. 17 18 00:01:19,790 --> 00:01:26,630 Basically they establish the structure of your house and when you write HTML code, you also build up the 18 19 00:01:26,630 --> 00:01:33,620 structure of your website. So you could use HTML to add an image or button or text box - whatever it 19 20 00:01:33,620 --> 00:01:35,890 is that you need in your website. 20 21 00:01:35,960 --> 00:01:42,950 Now the second type of files are CSS files. And these files are responsible for styling your website. 21 22 00:01:43,010 --> 00:01:48,740 So, if you are building a house, then this would be the painters and decorators. They would be going around 22 23 00:01:48,740 --> 00:01:55,610 painting the walls or adding stylistic flourishes to your place and generally making the place look 23 24 00:01:55,640 --> 00:01:57,110 the way that you want it to. 24 25 00:01:57,290 --> 00:02:00,380 And that's exactly what CSS code does as well. 25 26 00:02:00,410 --> 00:02:06,000 When you incorporate CSS, it allows you to specify how you want your website to look. 26 27 00:02:06,140 --> 00:02:12,410 So you could say that "Yes, I have a button that I got from my HTML, but that button, I want it to 27 28 00:02:12,410 --> 00:02:19,040 be red. And I want the text to be white. And I want the font of the text to be in Aerial." That is all done 28 29 00:02:19,130 --> 00:02:20,960 using CSS code. 29 30 00:02:20,960 --> 00:02:27,830 Now the final component is the Javascript code. And this is the code that allows your website to actually 30 31 00:02:27,980 --> 00:02:30,410 do things or have behavior. 31 32 00:02:30,470 --> 00:02:35,180 And if you were building a house you would have the electrician come in, who would be able to connect 32 33 00:02:35,300 --> 00:02:40,520 the wires so that your lightbulbs actually switch on. Or somebody who comes in and does the plumbing 33 34 00:02:40,550 --> 00:02:45,360 so that your toilet can actually flush. And the Javascript code does exactly that. 34 35 00:02:45,470 --> 00:02:50,000 It allows your website to actually do things and have behavior. 35 36 00:02:50,090 --> 00:02:55,970 So, for example, that button I added earlier on with my HTML code - only when I have the Javascript 36 37 00:02:55,970 --> 00:03:00,620 code can I actually make it do something interesting like send off an email. 37 38 00:03:00,620 --> 00:03:06,470 So if we take the Google website as an example again. Once we receive these files from Google server 38 39 00:03:06,650 --> 00:03:12,110 when our browser loads up the HTML files, we'll get to see the structure of the website. 39 40 00:03:12,110 --> 00:03:14,900 Namely there's one image which has their logo. 40 41 00:03:14,900 --> 00:03:19,130 There's two buttons. And there's a text box where we can enter our search. 41 42 00:03:19,430 --> 00:03:26,560 Now when we receive the CSS files, then that will modify the appearance of all of those components. 42 43 00:03:26,570 --> 00:03:33,590 We don't have any more buttons or any more images, but they now look the way that Google wanted it to. 43 44 00:03:34,070 --> 00:03:41,150 And finally when we incorporate the Javascript files, then our website actually starts having behavior. 44 45 00:03:41,370 --> 00:03:47,540 It has functionality and it's actually able to do something rather than just display some images and text 45 46 00:03:47,540 --> 00:03:48,140 to us. 46 47 00:03:48,170 --> 00:03:53,390 Now, with the knowledge that we've already acquired, we can already start messing around with websites 47 48 00:03:53,450 --> 00:03:54,640 on the Internet. 48 49 00:03:54,680 --> 00:03:57,760 So open up chrome and head over to techcrunch.com. 49 50 00:03:57,860 --> 00:04:03,080 And if you're not familiar with it, it's basically a technology news website where I get my latest tech 50 51 00:04:03,080 --> 00:04:03,780 news. 51 52 00:04:03,890 --> 00:04:13,180 Now, once you're over here, I want you to right-click on the title here and click on "Inspect". 52 53 00:04:13,190 --> 00:04:19,760 Now, this brings up the Chrome developer tools. And we're going to be exploring this in a lot more detail. 53 54 00:04:19,820 --> 00:04:23,610 But for now, we're going to use it to do something really simple. 54 55 00:04:23,630 --> 00:04:30,020 You can see that when I right-click on that heading and click "Inspect", it automatically opens up the 55 56 00:04:30,020 --> 00:04:34,100 entire code file that was used to render this website. 56 57 00:04:34,100 --> 00:04:37,740 So these are all of the elements that make up this website. 57 58 00:04:37,850 --> 00:04:44,720 And when you click on "Inspect", it will highlight to you the part of the code that corresponds to the 58 59 00:04:44,720 --> 00:04:46,380 thing that you right-clicked, right? 59 60 00:04:46,400 --> 00:04:48,720 In this case it's this title. 60 61 00:04:48,920 --> 00:04:54,340 And inside this title, you can see that there is a link, which means that when you click on it. 61 62 00:04:54,350 --> 00:04:58,770 It'll go to another web page, but it's also got a bit of text. 62 63 00:04:58,840 --> 00:05:04,580 So right inside Chrome developer tools, if you double click on the bit of text that corresponds to the 63 64 00:05:04,580 --> 00:05:07,640 title, you can actually edit it. 64 65 00:05:07,640 --> 00:05:11,380 So let's go ahead and change the front page of Tech Crunch. 65 66 00:05:11,450 --> 00:05:12,520 Let's say something like ... 66 67 00:05:16,060 --> 00:05:21,400 So this is a great way of pranking your friends. Especially when they can see that you're on 67 68 00:05:21,430 --> 00:05:22,040 techcrunch.com 68 69 00:05:22,090 --> 00:05:28,540 And the title, of any of the text on the website, is what you wanted to say. And this is a great joke 69 70 00:05:28,540 --> 00:05:33,850 to play on friends who are maybe not quite as technologically advanced as you because they haven't taken 70 71 00:05:33,850 --> 00:05:36,330 the course that you have. Now unfortunately 71 72 00:05:36,370 --> 00:05:41,300 when I hit refresh on this website, all of my good work is gone. 72 73 00:05:41,410 --> 00:05:49,660 And the reason is because when I'm editing it here, inside my browser, I'm actually changing the local 73 74 00:05:49,660 --> 00:05:56,950 copy of this file that I got back from the Google servers. But when I click refresh, then that makes a 74 75 00:05:56,950 --> 00:06:02,280 new request to the Google servers to load up a fresh copy of the website. 75 76 00:06:02,290 --> 00:06:08,110 So, of course, then it updates to the original content. But in the coming lessons, we're going to be working 76 77 00:06:08,110 --> 00:06:15,960 with HTML, CSS and Javascript so that you can create and host - live on the internet - your very own web 77 78 00:06:15,960 --> 00:06:21,340 sites. And through learning how to code and how to build websites, you're going to be able to make websites 78 79 00:06:21,430 --> 00:06:27,250 that say anything that you want it to, look the way that you want it to, and have the functionality that 79 80 00:06:27,250 --> 00:06:28,230 you need. 80 81 00:06:28,240 --> 00:06:30,150 So all of that and more, 81 82 00:06:30,340 --> 00:06:31,780 I'll see you on the next lesson.