Original subtitles

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 here 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 or it can be very helpful.

So you'll 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 there 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 H1 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 of 26

and does all of this.

Right.

Then we also have this rule somewhere,

which sets the color.

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 H1 element,

and the reason for that

is basically the default style.

So those default styles for the H1

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 the font weight

is set to bold 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,

all 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 exploring

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 of 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 the state

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.

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,

because 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 dev 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 liked 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 it's 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.