Voiceover: Hello back.
Before we move on to the next section,
I want to show you a very important
tool for every web developer.
Google Chrome Developer Tools.
These powerful tools are built right into
Google Chrome and can be used to analyze
and correct HTML CSS codes,
to optimize our web page, and so much more.
Also, remember what I told you earlier?
About learning about other web pages?
Here is the right tool to do just that.
So let's see how we can use the
Chrome Developer Tools.
Actually, if I just open the developer tools
in the window which has the a live
connection with brackets, which is
exactly this one.
That connection will get lost.
That is pretty annoying.
But instead I can open the HTML file
in the usual way,
and then none of that will happen.
So I'll just open the folder,
and here are all the files we created so far.
And I will open this with Google Chrome.
And here we go.
Now the Google Chrome Developer Tools
are all about inspecting elements.
So if we click, right click,
here on this main heading page one element,
and hit inspect element,
we see the Chrome tools down here.
And this is the H1 element I just selected.
So here we have all the HTML code
and as we hover the different elements
you see that in Google Chrome is shows us
which element we are inspecting.
Down on the right side,
we have all the CSS properties.
And you can turn these off, on
to see what happens
if these properties
are active or not active.
Here we can actually change some things.
Say you want this 45 or 48 or 60
just to see how it looks like.
Of course, none of these changes
will be reflected in the actual code
which means if I just refresh this page,
it looks exactly as it looked before.
Another useful thing,
is when I have this selected,
you see that the H1 element test,
this blue area, which is the content,
remember, the box model?
So the blue is the content,
and the orange one is the margin.
So that orange is these 20 pixels
margin bottom, right?
And this is the blog post div,
and if you remember we set a right
petting to 30 pixels.
And that 30 pixels is that green area we see.
So this can be pretty useful.
And actually we have the box model
also down here.
So when we have the bigger web page
this can be pretty useful
inspect all our elements.
So this is our web page.
Now remember we can also do the same thing
with other websites to see how they work.
This is the square website that I used before.
And some design lectures.
Imagine, you want to know
how this button here works.
We'll do inspect element
and then I have the code.
The HTML code, is here on the right side,
you can see the HTML attributes.
The color, the background color...
So these strike through here,
means that this property is not active.
It means that it has been overwritten
by something else.
So the background color, we can turn it
off and on, and see what happens.
And, what else is here?
So just the margin,
we can turn it off and on as well.
And here we see, for example,
that this button has a border rate
at three pixels, if you were just curious
how this was designed.
And the font family is square market.
And the font size is 11 pixels.
So you see, this is pretty useful
to find out about anything
that you want to know on other webpages.
For example, like this element,
here you see...
You can inspect all the HTML code.
So you have different divs here.
And then this extreme,
this particular color.
And, you know, I use this a lot
to see what other websites are doing right.
Okay, this was just the very basic introduction
but we will see more applications
of the developer tools later on.
And this was actually the last lecture
in the introductory CSS section.
Wow, you have learned such a lot so far.
Congratulations!
And I'm really, really happy and grateful
that you're still with me on this journey.
You're good to go for our killer website
project that we will start in a moment.
But wait, first I have another
nice little quiz for you again.
Good luck with that,
and see you in the next section.