`- So, Every modern browser contains a set of tools
which makes our lives as developers a lot easier.
And we call these tools collectively
developer tools or for short dev tools.
And so in this lecture
let's learn how to use the Google Chrome dev tools
and let's give ourselves some more space here to start.
And now there are three ways to open up the developer tools.
So first, you can right click anywhere
on the page and then click inspect or inspect element.
So these are the dev tools
but let me first show you two other ways.
The second way is to come here to the view menu
then developer, and then hear developer tools.
All right?
Or the third way is a shortcut on the keyboard
and that is option command or option control on Windows I.
All right?
And then we will want to come here
to the very first tab which says elements.
Just make this a bit bigger so you can actually see it.
All right?
So the first thing that we can see here
in the elements tab is the exact HTML
that we wrote in our HTML documents, right?
So here we can open up each element by clicking on them
and then as we hover them
they actually get highlighted here
on the page where it can be very helpful.
So you see, for example, that our header is
this entire box that we see highlighted here in blue, right?
So that's this.
Then the navigation is all this, and if we open it
then each of these links is just this very small box here
and they're sitting here side by side, as we can see, right?
So that is the first thing that we can explore here.
And then the second thing, and even more important is
the style tab here on the left side.
So here we can see all the styles that have been applied
to a certain element.
So let's go to the H 1 for example here, and then
we can click it.
And then here on the left side, all the styles that are
currently applied to this element in our CSS file
are displayed here.
So we have this rule somewhere in our code
which sets the font to 26 and does all of this, right?
And we also have this rule somewhere
which sets the color and, and in fact, it is this one here
right?
So this, first one is this.
Then here we get this one.
And finally there's also this one here, right?
And so that is exactly this one.
Okay? Now, maybe you had wondered before why
the text here is actually bold in this H 1 element.
And the reason for that is basically the default style.
So those default styles
for the H 1 are what are displayed here
in this rule of the user agent style sheet.
So that's just a fancy word for basically the default style.
And down here we can see that font weight is set to bolt
by default.
Okay? Then this one here is something that we will learn
about very soon.
So don't worry about it for now.
And then here, let's see, for example, these links.
And so here is the code for them.
So the CSS that we had applied to them already.
So the color and the text decoration, right?
But now what
if we actually wanted to add some more styles here
so we could actually do that.
So just for testing purposes, of course
we could now add a font size...
let's say
of 30 pixels.
And then immediately all the links on the page
so not just this one, but also this one and the other ones
all of them will now have the font size of 30 pixels.
And to test that, we can then turn it on and off.
And of course, we can also turn the other styles
on and off simply by clicking here.
All right?
And of course, these values that we specify here
they will not affect the final website.
So our code does not get changed if we do this.
And we can prove that by very easily reload the page
and then everything is back to normal.
All right?
But that's actually explore links a little bit more
because there's something cool that we can do.
So right now there is only this CSS rule here applied.
So only the one that has the link pseudo class.
And that's because right now the link is not being hovered
or it's not active, and so therefore the style
for that does not apply.
However, by clicking here, we can basically fake one
of these states.
So we can, for example, fake that the link is currently
being hovered.
So if we click here on hover, then you see that now
this rule here is applying
because now A with the pseudo class hover does
actually exist. So let's see that on the page.
and the one that should have this date is the one
that I actually have selected here.
So this is the one that I selected.
And so this is the one that now looks
as if it is being hovered, even though it is not.
And so this is great.
So we can test our webpage without actually
having to manually go there and hover over the links.
Now, okay, of course we can do the same for this one here
and we could go ahead and search that here in the HTML tree
but I find it easier to simply right click
on the element that I want and then inspect.
And so that then automatically moves there.
So if I click on hover now
then it automatically becomes hover
even though it's not really
And the same of course for active, right?
So it's active, but we also want it to look
like it's hovered at the same time.
Cause usually when it's active, it is also hovered.
But anyway, what matters is that now we have
all these rules here applying in this moment.
All right?
But now let's turn it off again.
And yeah, I think that's actually all I had to
show you at this point.
So we're going to use the DEF tools all the time
throughout the rest of the course
because these are absolutely essential to create a website
in an efficient way.
So I was actually really excited when I found out myself
about these tools, and I hope you like them as well.
And that you maybe go ahead
and experiment around a little bit with this now.
So you can just click on any element that you'd like
and experiment maybe a little bit with turning these styles
on and off, maybe adding some other ones
and really analyzing a bit what happens here
with all these different rules being applied.
So have some fun with that
and I see you soon in the next video.