This it's going to be a pretty quick video.
I just want to highlight some of the developer tools that Google Chrome gives us to work with each team
out and see assess.
So this is the To Do list that we made in the last video.
It's still as ugly as it was then and I want to just highlight two things.
So the first we can actually view page source just like we did on other peoples.
Each came out way early on in this course but that's not all that useful.
We can't really change this or anything but what we can do is right click and click on inspect element
.
And what this will do is launch the element inspector.
So you'll see we get this new view here.
So there's a bunch of tabs we're going to learn about all of these in time.
For now we're just starting at this element's tab.
So what this is it's it's actually a nice interactive representation of all of the elements.
So you can see we have our doctype.
Each team will have the head of body.
Or each one or us and our allies as well as the inputs and the first thing I want you to notice is as
I hover over these elements.
So let's hover over this H-1.
It's actually highlighted up here.
So I hover here and it's highlighted to show me here's the one that you're talking about.
Here's the UL or here's the input checkbox.
Here's the text and so on.
So this is useful in its own right.
Just to debug things and see what space an element is taking up and where it falls in the flow of a
document.
But what I really want to focus on is the CSSA tab over here the styles tab.
So let's select one of these things.
Let's select this ally with class completed the top or the second one.
And I'm going to click on it.
And over here I'm actually seeing an interactive view of all of the styles that this element has applied
to it currently.
So we see because of the completed class it has this text decoration line through because of the fly
code that I wrote for all allies.
It has a red border and what we can do is actually turn these on or off.
So I now have toggled all allies red borders off.
I can turn them back on and I can change this live here to be 6 pixels or 10 or one pixel.
I can click on the color and pick a new color give it a blue border.
One thing I will highlight though this does not actually change our file at all.
This is only in the browser as soon as I refresh this page or close the window my changes go away.
So this is useful in really two different ways.
One is to work on your own code your own page and test things out and see what happens when you change
the color or you change the border or you change some other attribute of some of their property and
just visually see it immediately.
The other thing that's useful for is actually looking at someone else's code.
So I have MVNO open just the home page.
Let's say I wanted to know some more about this text right here.
What I can do is actually right click on it and click on inspect element.
And if I click on an element in particular it will actually be highlighted for me.
So you can see that it jumped right away to the correct tag which is an H-1 shared knowledge.
And then there's a span in there as well.
It says for the open web.
So let's take a look at the H-1.
And over here I get all of the styles.
So the first one is color.
If I change that the color of that H-1 changes.
So let's say I wanted to know the font so I would scroll down and at some point someone that Mazola
wrote the styles that applies a font.
Here the thing is and this is what we're going to focus on in the next few videos is that this might
be inherited from another selector somewhere.
So it might have been applied to the entire body not just H-1 directly.
So if you scroll down it looks like it's right here.
Font family open sends light a very real sense if and that looks like that does it.
So this is not to show you how we actually do font's.
That's a separate video coming up soon.
This is just to show you that if you wanted to find something out about a page let's say I wanted to
know what type of element are these buttons right here.
The role of icon I can select is magnifying glass and hover over things and click and it will show me
right here that an eye.
So an eye is another tag used for icons and we can see all the styles over here.
Same thing if I want to see what element this is here I can click on it once they have the magnifying
glass and I see that it's an anchor tag and it looks like.
So it's not an image tag it's an anchor tag that must mean that they're setting a background image somewhere
and let's see where that is.
Here we go.
They're setting the background image to be this image right here.
So to summarize all of this I just wanted to demonstrate that you can open up this Inspektor in Google
Chrome and you can view HMO and you can view the assess and not only can you view it but you can manipulate
it you can interact with it you can try changing things and you can do that on your own sites or you
can do that on anyone else's site.
And so it's really useful when you want to go out and replicate somebody's design where you want to
replicate in effect.
And when we get to Javascript you actually see we can do the exact same thing for javascript as well
.