1
00:00:01,440 --> 00:00:03,080
This it's going to be a pretty quick video.

2
00:00:03,090 --> 00:00:07,800
I just want to highlight some of the developer tools that Google Chrome gives us to work with each team

3
00:00:07,800 --> 00:00:09,710
out and see assess.

4
00:00:09,720 --> 00:00:12,260
So this is the To Do list that we made in the last video.

5
00:00:12,360 --> 00:00:16,950
It's still as ugly as it was then and I want to just highlight two things.

6
00:00:17,130 --> 00:00:23,040
So the first we can actually view page source just like we did on other peoples.

7
00:00:23,040 --> 00:00:28,210
Each came out way early on in this course but that's not all that useful.

8
00:00:28,230 --> 00:00:35,400
We can't really change this or anything but what we can do is right click and click on inspect element

9
00:00:35,400 --> 00:00:37,110
.

10
00:00:37,110 --> 00:00:40,170
And what this will do is launch the element inspector.

11
00:00:40,320 --> 00:00:43,170
So you'll see we get this new view here.

12
00:00:43,530 --> 00:00:47,080
So there's a bunch of tabs we're going to learn about all of these in time.

13
00:00:47,160 --> 00:00:50,270
For now we're just starting at this element's tab.

14
00:00:50,370 --> 00:00:56,700
So what this is it's it's actually a nice interactive representation of all of the elements.

15
00:00:56,700 --> 00:00:59,280
So you can see we have our doctype.

16
00:00:59,370 --> 00:01:03,600
Each team will have the head of body.

17
00:01:03,840 --> 00:01:11,970
Or each one or us and our allies as well as the inputs and the first thing I want you to notice is as

18
00:01:11,970 --> 00:01:13,650
I hover over these elements.

19
00:01:13,710 --> 00:01:15,420
So let's hover over this H-1.

20
00:01:15,690 --> 00:01:17,810
It's actually highlighted up here.

21
00:01:18,000 --> 00:01:23,230
So I hover here and it's highlighted to show me here's the one that you're talking about.

22
00:01:23,260 --> 00:01:27,960
Here's the UL or here's the input checkbox.

23
00:01:28,290 --> 00:01:30,020
Here's the text and so on.

24
00:01:30,120 --> 00:01:32,790
So this is useful in its own right.

25
00:01:32,790 --> 00:01:38,340
Just to debug things and see what space an element is taking up and where it falls in the flow of a

26
00:01:38,340 --> 00:01:39,100
document.

27
00:01:39,360 --> 00:01:44,140
But what I really want to focus on is the CSSA tab over here the styles tab.

28
00:01:44,190 --> 00:01:45,890
So let's select one of these things.

29
00:01:46,080 --> 00:01:51,600
Let's select this ally with class completed the top or the second one.

30
00:01:51,810 --> 00:01:53,000
And I'm going to click on it.

31
00:01:53,160 --> 00:02:00,600
And over here I'm actually seeing an interactive view of all of the styles that this element has applied

32
00:02:00,600 --> 00:02:01,700
to it currently.

33
00:02:02,070 --> 00:02:10,620
So we see because of the completed class it has this text decoration line through because of the fly

34
00:02:10,770 --> 00:02:12,540
code that I wrote for all allies.

35
00:02:12,540 --> 00:02:16,500
It has a red border and what we can do is actually turn these on or off.

36
00:02:16,920 --> 00:02:21,360
So I now have toggled all allies red borders off.

37
00:02:21,390 --> 00:02:29,800
I can turn them back on and I can change this live here to be 6 pixels or 10 or one pixel.

38
00:02:30,210 --> 00:02:35,050
I can click on the color and pick a new color give it a blue border.

39
00:02:35,100 --> 00:02:38,900
One thing I will highlight though this does not actually change our file at all.

40
00:02:38,910 --> 00:02:44,360
This is only in the browser as soon as I refresh this page or close the window my changes go away.

41
00:02:44,370 --> 00:02:47,340
So this is useful in really two different ways.

42
00:02:47,340 --> 00:02:54,150
One is to work on your own code your own page and test things out and see what happens when you change

43
00:02:54,420 --> 00:02:59,180
the color or you change the border or you change some other attribute of some of their property and

44
00:02:59,340 --> 00:03:01,320
just visually see it immediately.

45
00:03:01,320 --> 00:03:05,990
The other thing that's useful for is actually looking at someone else's code.

46
00:03:06,150 --> 00:03:09,570
So I have MVNO open just the home page.

47
00:03:10,200 --> 00:03:14,910
Let's say I wanted to know some more about this text right here.

48
00:03:15,270 --> 00:03:20,790
What I can do is actually right click on it and click on inspect element.

49
00:03:21,360 --> 00:03:25,000
And if I click on an element in particular it will actually be highlighted for me.

50
00:03:25,350 --> 00:03:31,670
So you can see that it jumped right away to the correct tag which is an H-1 shared knowledge.

51
00:03:31,680 --> 00:03:33,430
And then there's a span in there as well.

52
00:03:33,450 --> 00:03:34,920
It says for the open web.

53
00:03:35,240 --> 00:03:37,190
So let's take a look at the H-1.

54
00:03:37,470 --> 00:03:40,530
And over here I get all of the styles.

55
00:03:40,650 --> 00:03:41,980
So the first one is color.

56
00:03:42,210 --> 00:03:46,630
If I change that the color of that H-1 changes.

57
00:03:46,890 --> 00:03:54,390
So let's say I wanted to know the font so I would scroll down and at some point someone that Mazola

58
00:03:54,720 --> 00:03:57,360
wrote the styles that applies a font.

59
00:03:57,360 --> 00:04:03,060
Here the thing is and this is what we're going to focus on in the next few videos is that this might

60
00:04:03,060 --> 00:04:06,030
be inherited from another selector somewhere.

61
00:04:06,030 --> 00:04:11,200
So it might have been applied to the entire body not just H-1 directly.

62
00:04:11,250 --> 00:04:13,940
So if you scroll down it looks like it's right here.

63
00:04:13,950 --> 00:04:21,640
Font family open sends light a very real sense if and that looks like that does it.

64
00:04:22,560 --> 00:04:25,010
So this is not to show you how we actually do font's.

65
00:04:25,020 --> 00:04:26,950
That's a separate video coming up soon.

66
00:04:26,970 --> 00:04:31,800
This is just to show you that if you wanted to find something out about a page let's say I wanted to

67
00:04:31,800 --> 00:04:35,810
know what type of element are these buttons right here.

68
00:04:35,900 --> 00:04:45,330
The role of icon I can select is magnifying glass and hover over things and click and it will show me

69
00:04:45,330 --> 00:04:47,250
right here that an eye.

70
00:04:47,340 --> 00:04:52,790
So an eye is another tag used for icons and we can see all the styles over here.

71
00:04:52,880 --> 00:04:57,810
Same thing if I want to see what element this is here I can click on it once they have the magnifying

72
00:04:57,810 --> 00:05:03,080
glass and I see that it's an anchor tag and it looks like.

73
00:05:03,090 --> 00:05:08,730
So it's not an image tag it's an anchor tag that must mean that they're setting a background image somewhere

74
00:05:08,960 --> 00:05:11,190
and let's see where that is.

75
00:05:11,270 --> 00:05:11,850
Here we go.

76
00:05:11,850 --> 00:05:14,860
They're setting the background image to be this image right here.

77
00:05:15,090 --> 00:05:20,130
So to summarize all of this I just wanted to demonstrate that you can open up this Inspektor in Google

78
00:05:20,130 --> 00:05:26,550
Chrome and you can view HMO and you can view the assess and not only can you view it but you can manipulate

79
00:05:26,550 --> 00:05:31,260
it you can interact with it you can try changing things and you can do that on your own sites or you

80
00:05:31,260 --> 00:05:33,100
can do that on anyone else's site.

81
00:05:33,150 --> 00:05:37,740
And so it's really useful when you want to go out and replicate somebody's design where you want to

82
00:05:37,740 --> 00:05:39,130
replicate in effect.

83
00:05:39,150 --> 00:05:43,500
And when we get to Javascript you actually see we can do the exact same thing for javascript as well

84
00:05:43,510 --> 00:05:43,670
.