1 00:00:02,372 --> 00:00:04,144 Hello back. 2 00:00:04,144 --> 00:00:06,595 Before we move on to the next section, 3 00:00:06,595 --> 00:00:08,165 I want to show you a very important 4 00:00:08,165 --> 00:00:10,640 tool for every web developer. 5 00:00:10,640 --> 00:00:13,377 Google Chrome Developer Tools. 6 00:00:13,377 --> 00:00:15,691 These powerful tools are built right into 7 00:00:15,691 --> 00:00:18,000 Google Chrome and can be used to analyze 8 00:00:18,000 --> 00:00:20,724 and correct HTML CSS codes, 9 00:00:20,724 --> 00:00:24,605 to optimize our web page, and so much more. 10 00:00:24,605 --> 00:00:27,340 Also, remember what I told you earlier? 11 00:00:27,340 --> 00:00:29,921 About learning about other web pages? 12 00:00:29,921 --> 00:00:33,171 Here is the right tool to do just that. 13 00:00:34,349 --> 00:00:35,622 So let's see how we can use the 14 00:00:35,622 --> 00:00:37,539 Chrome Developer Tools. 15 00:00:39,413 --> 00:00:43,227 Actually, if I just open the developer tools 16 00:00:43,227 --> 00:00:45,183 in the window which has the a live 17 00:00:45,183 --> 00:00:47,285 connection with brackets, which is 18 00:00:47,285 --> 00:00:49,150 exactly this one. 19 00:00:49,150 --> 00:00:51,534 That connection will get lost. 20 00:00:51,534 --> 00:00:53,127 That is pretty annoying. 21 00:00:53,127 --> 00:00:56,810 But instead I can open the HTML file 22 00:00:56,810 --> 00:00:58,067 in the usual way, 23 00:00:58,067 --> 00:01:00,900 and then none of that will happen. 24 00:01:03,150 --> 00:01:05,567 So I'll just open the folder, 25 00:01:07,175 --> 00:01:10,750 and here are all the files we created so far. 26 00:01:10,750 --> 00:01:14,083 And I will open this with Google Chrome. 27 00:01:16,299 --> 00:01:17,935 And here we go. 28 00:01:17,935 --> 00:01:20,286 Now the Google Chrome Developer Tools 29 00:01:20,286 --> 00:01:23,888 are all about inspecting elements. 30 00:01:23,888 --> 00:01:26,221 So if we click, right click, 31 00:01:27,110 --> 00:01:30,738 here on this main heading page one element, 32 00:01:30,738 --> 00:01:33,521 and hit inspect element, 33 00:01:33,521 --> 00:01:36,354 we see the Chrome tools down here. 34 00:01:37,702 --> 00:01:41,472 And this is the H1 element I just selected. 35 00:01:41,472 --> 00:01:45,041 So here we have all the HTML code 36 00:01:45,041 --> 00:01:48,674 and as we hover the different elements 37 00:01:48,674 --> 00:01:51,762 you see that in Google Chrome is shows us 38 00:01:51,762 --> 00:01:54,429 which element we are inspecting. 39 00:01:57,453 --> 00:01:58,655 Down on the right side, 40 00:01:58,655 --> 00:02:01,496 we have all the CSS properties. 41 00:02:01,496 --> 00:02:03,996 And you can turn these off, on 42 00:02:06,234 --> 00:02:07,817 to see what happens 43 00:02:09,592 --> 00:02:10,995 if these properties 44 00:02:10,995 --> 00:02:13,137 are active or not active. 45 00:02:13,137 --> 00:02:16,470 Here we can actually change some things. 46 00:02:17,771 --> 00:02:20,438 Say you want this 45 or 48 or 60 47 00:02:23,021 --> 00:02:25,521 just to see how it looks like. 48 00:02:28,024 --> 00:02:30,691 Of course, none of these changes 49 00:02:31,541 --> 00:02:34,429 will be reflected in the actual code 50 00:02:34,429 --> 00:02:37,762 which means if I just refresh this page, 51 00:02:38,760 --> 00:02:42,528 it looks exactly as it looked before. 52 00:02:42,528 --> 00:02:43,851 Another useful thing, 53 00:02:43,851 --> 00:02:45,482 is when I have this selected, 54 00:02:45,482 --> 00:02:47,612 you see that the H1 element test, 55 00:02:47,612 --> 00:02:50,904 this blue area, which is the content, 56 00:02:50,904 --> 00:02:52,645 remember, the box model? 57 00:02:52,645 --> 00:02:54,634 So the blue is the content, 58 00:02:54,634 --> 00:02:57,384 and the orange one is the margin. 59 00:02:58,834 --> 00:03:01,584 So that orange is these 20 pixels 60 00:03:02,945 --> 00:03:04,695 margin bottom, right? 61 00:03:08,298 --> 00:03:10,669 And this is the blog post div, 62 00:03:10,669 --> 00:03:13,454 and if you remember we set a right 63 00:03:13,454 --> 00:03:15,569 petting to 30 pixels. 64 00:03:15,569 --> 00:03:19,319 And that 30 pixels is that green area we see. 65 00:03:21,833 --> 00:03:24,055 So this can be pretty useful. 66 00:03:24,055 --> 00:03:26,312 And actually we have the box model 67 00:03:26,312 --> 00:03:27,562 also down here. 68 00:03:29,459 --> 00:03:31,628 So when we have the bigger web page 69 00:03:31,628 --> 00:03:33,151 this can be pretty useful 70 00:03:33,151 --> 00:03:35,234 inspect all our elements. 71 00:03:37,713 --> 00:03:39,713 So this is our web page. 72 00:03:41,978 --> 00:03:45,577 Now remember we can also do the same thing 73 00:03:45,577 --> 00:03:48,994 with other websites to see how they work. 74 00:03:51,066 --> 00:03:54,234 This is the square website that I used before. 75 00:03:54,234 --> 00:03:56,317 And some design lectures. 76 00:03:57,326 --> 00:03:58,750 Imagine, you want to know 77 00:03:58,750 --> 00:04:01,229 how this button here works. 78 00:04:01,229 --> 00:04:03,229 We'll do inspect element 79 00:04:04,965 --> 00:04:07,048 and then I have the code. 80 00:04:08,115 --> 00:04:10,858 The HTML code, is here on the right side, 81 00:04:10,858 --> 00:04:14,018 you can see the HTML attributes. 82 00:04:14,018 --> 00:04:16,851 The color, the background color... 83 00:04:17,849 --> 00:04:20,844 So these strike through here, 84 00:04:20,844 --> 00:04:24,583 means that this property is not active. 85 00:04:24,583 --> 00:04:25,966 It means that it has been overwritten 86 00:04:25,966 --> 00:04:27,466 by something else. 87 00:04:29,652 --> 00:04:31,440 So the background color, we can turn it 88 00:04:31,440 --> 00:04:34,190 off and on, and see what happens. 89 00:04:35,797 --> 00:04:37,714 And, what else is here? 90 00:04:40,584 --> 00:04:42,048 So just the margin, 91 00:04:42,048 --> 00:04:44,881 we can turn it off and on as well. 92 00:04:46,144 --> 00:04:47,854 And here we see, for example, 93 00:04:47,854 --> 00:04:49,341 that this button has a border rate 94 00:04:49,341 --> 00:04:52,758 at three pixels, if you were just curious 95 00:04:54,514 --> 00:04:56,634 how this was designed. 96 00:04:56,634 --> 00:04:59,670 And the font family is square market. 97 00:04:59,670 --> 00:05:02,253 And the font size is 11 pixels. 98 00:05:04,048 --> 00:05:06,517 So you see, this is pretty useful 99 00:05:06,517 --> 00:05:08,799 to find out about anything 100 00:05:08,799 --> 00:05:11,636 that you want to know on other webpages. 101 00:05:11,636 --> 00:05:14,219 For example, like this element, 102 00:05:16,504 --> 00:05:17,751 here you see... 103 00:05:17,751 --> 00:05:20,584 You can inspect all the HTML code. 104 00:05:22,354 --> 00:05:24,410 So you have different divs here. 105 00:05:24,410 --> 00:05:26,243 And then this extreme, 106 00:05:27,811 --> 00:05:29,644 this particular color. 107 00:05:31,218 --> 00:05:34,518 And, you know, I use this a lot 108 00:05:34,518 --> 00:05:37,826 to see what other websites are doing right. 109 00:05:37,826 --> 00:05:42,393 Okay, this was just the very basic introduction 110 00:05:42,393 --> 00:05:44,554 but we will see more applications 111 00:05:44,554 --> 00:05:47,221 of the developer tools later on. 112 00:05:48,323 --> 00:05:50,793 And this was actually the last lecture 113 00:05:50,793 --> 00:05:53,893 in the introductory CSS section. 114 00:05:53,893 --> 00:05:56,861 Wow, you have learned such a lot so far. 115 00:05:56,861 --> 00:05:58,796 Congratulations! 116 00:05:58,796 --> 00:06:01,159 And I'm really, really happy and grateful 117 00:06:01,159 --> 00:06:03,945 that you're still with me on this journey. 118 00:06:03,945 --> 00:06:05,700 You're good to go for our killer website 119 00:06:05,700 --> 00:06:09,212 project that we will start in a moment. 120 00:06:09,212 --> 00:06:11,291 But wait, first I have another 121 00:06:11,291 --> 00:06:14,175 nice little quiz for you again. 122 00:06:14,175 --> 00:06:15,450 Good luck with that, 123 00:06:15,450 --> 00:06:18,117 and see you in the next section.