Voiceover: Hello back. 2 2
Before we move on to the next section, 3 3
I want to show you a very important 4 4
tool for every web developer. 5 5
Google Chrome Developer Tools. 6 6
These powerful tools are built right into 7 7
Google Chrome and can be used to analyze 8 8
and correct HTML CSS codes, 9 9
to optimize our web page, and so much more. 10 10
Also, remember what I told you earlier? 11 11
About learning about other web pages? 12 12
Here is the right tool to do just that. 13 13
So let's see how we can use the 14 14
Chrome Developer Tools. 15 15
Actually, if I just open the developer tools 16 16
in the window which has the a live 17 17
connection with brackets, which is 18 18
exactly this one. 19 19
That connection will get lost. 20 20
That is pretty annoying. 21 21
But instead I can open the HTML file 22 22
in the usual way, 23 23
and then none of that will happen. 24 24
So I'll just open the folder, 25 25
and here are all the files we created so far. 26 26
And I will open this with Google Chrome. 27 27
And here we go. 28 28
Now the Google Chrome Developer Tools 29 29
are all about inspecting elements. 30 30
So if we click, right click, 31 31
here on this main heading page one element, 32 32
and hit inspect element, 33 33
we see the Chrome tools down here. 34 34
And this is the H1 element I just selected. 35 35
So here we have all the HTML code 36 36
and as we hover the different elements 37 37
you see that in Google Chrome is shows us 38 38
which element we are inspecting. 39 39
Down on the right side, 40 40
we have all the CSS properties. 41 41
And you can turn these off, on 42 42
to see what happens 43 43
if these properties 44 44
are active or not active. 45 45
Here we can actually change some things. 46 46
Say you want this 45 or 48 or 60 47 47
just to see how it looks like. 48 48
Of course, none of these changes 49 49
will be reflected in the actual code 50 50
which means if I just refresh this page, 51 51
it looks exactly as it looked before. 52 52
Another useful thing, 53 53
is when I have this selected, 54 54
you see that the H1 element test, 55 55
this blue area, which is the content, 56 56
remember, the box model? 57 57
So the blue is the content, 58 58
and the orange one is the margin. 59 59
So that orange is these 20 pixels 60 60
margin bottom, right? 61 61
And this is the blog post div, 62 62
and if you remember we set a right 63 63
petting to 30 pixels. 64 64
And that 30 pixels is that green area we see. 65 65
So this can be pretty useful. 66 66
And actually we have the box model 67 67
also down here. 68 68
So when we have the bigger web page 69 69
this can be pretty useful 70 70
inspect all our elements. 71 71
So this is our web page. 72 72
Now remember we can also do the same thing 73 73
with other websites to see how they work. 74 74
This is the square website that I used before. 75 75
And some design lectures. 76 76
Imagine, you want to know 77 77
how this button here works. 78 78
We'll do inspect element 79 79
and then I have the code. 80 80
The HTML code, is here on the right side, 81 81
you can see the HTML attributes. 82 82
The color, the background color... 83 83
So these strike through here, 84 84
means that this property is not active. 85 85
It means that it has been overwritten 86 86
by something else. 87 87
So the background color, we can turn it 88 88
off and on, and see what happens. 89 89
And, what else is here? 90 90
So just the margin, 91 91
we can turn it off and on as well. 92 92
And here we see, for example, 93 93
that this button has a border rate 94 94
at three pixels, if you were just curious 95 95
how this was designed. 96 96
And the font family is square market. 97 97
And the font size is 11 pixels. 98 98
So you see, this is pretty useful 99 99
to find out about anything 100 100
that you want to know on other webpages. 101 101
For example, like this element, 102 102
here you see... 103 103
You can inspect all the HTML code. 104 104
So you have different divs here. 105 105
And then this extreme, 106 106
this particular color. 107 107
And, you know, I use this a lot 108 108
to see what other websites are doing right. 109 109
Okay, this was just the very basic introduction 110 110
but we will see more applications 111 111
of the developer tools later on. 112 112
And this was actually the last lecture 113 113
in the introductory CSS section. 114 114
Wow, you have learned such a lot so far. 115 115
Congratulations! 116 116
And I'm really, really happy and grateful 117 117
that you're still with me on this journey. 118 118
You're good to go for our killer website 119 119
project that we will start in a moment. 120 120
But wait, first I have another 121 121
nice little quiz for you again. 122 122
Good luck with that, 123 123
and see you in the next section.