1
00:00:02,440 --> 00:00:05,939
Now Prettier is very useful for structuring our code.

2
00:00:05,939 --> 00:00:10,090
Another very useful tool is a tool built into the browser,

3
00:00:10,090 --> 00:00:13,040
into Chrome in this case, but other browsers

4
00:00:13,040 --> 00:00:14,300
have it as well.

5
00:00:14,300 --> 00:00:17,170
I'm talking about the developer tools.

6
00:00:17,170 --> 00:00:20,500
We are a developer or we're becoming a developer,

7
00:00:20,500 --> 00:00:21,880
but we already wrote some code.

8
00:00:21,880 --> 00:00:24,820
So I guess we are a developer. And as a developer,

9
00:00:24,820 --> 00:00:28,760
we often want to, dieback the result of our code.

10
00:00:28,760 --> 00:00:33,210
We want to look into our result and inspect it at runtime.

11
00:00:33,210 --> 00:00:35,650
So we want to have a look at the result in the browser

12
00:00:35,650 --> 00:00:37,750
and look behind the scenes there.

13
00:00:37,750 --> 00:00:40,590
Now we can do this by viewing the page source,

14
00:00:40,590 --> 00:00:43,220
but there, we just see the code we wrote.

15
00:00:43,220 --> 00:00:46,730
Sometimes you want to find out which styles are applied

16
00:00:46,730 --> 00:00:48,060
on an element.

17
00:00:48,060 --> 00:00:51,120
And of course, we can just look into our code to find out

18
00:00:51,120 --> 00:00:53,160
which styles are applied.

19
00:00:53,160 --> 00:00:55,110
But what about the browser default styles

20
00:00:55,110 --> 00:00:56,520
I mentioned before?

21
00:00:56,520 --> 00:01:00,180
If for example, this h1 tag has a bigger size,

22
00:01:00,180 --> 00:01:03,170
a bigger font size than this paragraph,

23
00:01:03,170 --> 00:01:06,470
because it has some browser default styles applied.

24
00:01:06,470 --> 00:01:07,400
And for this,

25
00:01:07,400 --> 00:01:11,820
you can right click on some content and choose inspect.

26
00:01:11,820 --> 00:01:13,200
And if you click there,

27
00:01:13,200 --> 00:01:16,600
this will open up the browser developer tools.

28
00:01:16,600 --> 00:01:18,260
Alternatively, in Chrome,

29
00:01:18,260 --> 00:01:23,193
you can open them with view, developer, developer tools.

30
00:01:24,560 --> 00:01:27,800
Or by using the shortcut, which you see here.

31
00:01:27,800 --> 00:01:31,150
Now there, you got various parts that make up

32
00:01:31,150 --> 00:01:32,910
the developer tools, but for us,

33
00:01:32,910 --> 00:01:36,000
the elements tab here is the important one.

34
00:01:36,000 --> 00:01:37,070
And as a side note,

35
00:01:37,070 --> 00:01:40,110
the developer tools do not look the same across all

36
00:01:40,110 --> 00:01:44,190
browsers, so I do recommend that you also give Chrome a try

37
00:01:44,190 --> 00:01:47,650
if you want to follow along with exactly the set of features

38
00:01:47,650 --> 00:01:48,923
I'm showing here.

39
00:01:49,810 --> 00:01:53,250
In the elements tab, you see your HTML content.

40
00:01:53,250 --> 00:01:55,470
You actually see more than the content,

41
00:01:55,470 --> 00:01:57,970
more elements that we haven't written yet,

42
00:01:57,970 --> 00:02:00,150
but we can ignore them right now.

43
00:02:00,150 --> 00:02:03,090
HTML, head, body, we can ignore it right now.

44
00:02:03,090 --> 00:02:07,360
Instead here we see the h1 and the p element.

45
00:02:07,360 --> 00:02:09,110
And you see if I hover over them,

46
00:02:09,110 --> 00:02:10,949
they get selected on the left.

47
00:02:10,949 --> 00:02:14,200
We can also click on this icon here and then select

48
00:02:14,200 --> 00:02:16,880
the item in the left here, so on our webpage

49
00:02:16,880 --> 00:02:19,150
and it's then selected here on the right.

50
00:02:19,150 --> 00:02:21,580
And why are these tools useful?

51
00:02:21,580 --> 00:02:23,380
Because if we have a look at them,

52
00:02:23,380 --> 00:02:25,270
if we select an element here,

53
00:02:25,270 --> 00:02:28,080
then at the bottom of this screen,

54
00:02:28,080 --> 00:02:32,250
we can see the styles that affect this element.

55
00:02:32,250 --> 00:02:35,070
And here we see the styles we added

56
00:02:35,070 --> 00:02:38,973
directly on the element with this style attribute.

57
00:02:39,870 --> 00:02:41,663
That's the styles we see here,

58
00:02:42,580 --> 00:02:45,890
but we also see some user agent styles here.

59
00:02:45,890 --> 00:02:48,550
And user agent, that's simply our browser.

60
00:02:48,550 --> 00:02:53,170
It's the agent we as a user use to access this website.

61
00:02:53,170 --> 00:02:56,579
And here we see some default styles which are applied

62
00:02:56,579 --> 00:02:59,740
onto this h1 element in this case.

63
00:02:59,740 --> 00:03:02,660
And whilst we haven't learned about all those styles yet,

64
00:03:02,660 --> 00:03:05,810
we see that, for example, there's a font size style

65
00:03:05,810 --> 00:03:09,980
being set, set to a strangely looking value of QM,

66
00:03:09,980 --> 00:03:13,423
which clearly controls the font size of this element.

67
00:03:14,260 --> 00:03:16,710
And being able to inspect your code like this

68
00:03:16,710 --> 00:03:20,090
is very useful because you can see what affects an element.

69
00:03:20,090 --> 00:03:23,430
And especially if your webpage becomes more complex and you

70
00:03:23,430 --> 00:03:26,700
have more and more elements with more and more styles,

71
00:03:26,700 --> 00:03:30,480
being able to look into these dev tools and look into the

72
00:03:30,480 --> 00:03:33,700
styles that affect an element directly on your page

73
00:03:33,700 --> 00:03:35,720
is very convenient.

74
00:03:35,720 --> 00:03:38,290
You can also not just look into your style there,

75
00:03:38,290 --> 00:03:39,810
you can also edit them.

76
00:03:39,810 --> 00:03:43,730
For example, here I can switch text to align to left,

77
00:03:43,730 --> 00:03:46,980
and I get a preview of how this would look like.

78
00:03:46,980 --> 00:03:50,300
And I can also click on this color preview here and actually

79
00:03:50,300 --> 00:03:54,080
pick a different color and see how that looks like.

80
00:03:54,080 --> 00:03:56,820
And if we reload, those changes are gone

81
00:03:56,820 --> 00:03:59,510
because if we play around with styles here,

82
00:03:59,510 --> 00:04:01,810
we don't change our original code.

83
00:04:01,810 --> 00:04:03,790
We just changed the loaded page.

84
00:04:03,790 --> 00:04:06,050
But if we then reload that page thereafter,

85
00:04:06,050 --> 00:04:09,310
we reload the page based on our actual code.

86
00:04:09,310 --> 00:04:13,470
And it is worth pointing out that these developer tools are

87
00:04:13,470 --> 00:04:17,300
not just available on sites you are working on.

88
00:04:17,300 --> 00:04:21,959
You can inspect any website with those dev tools.

89
00:04:21,959 --> 00:04:25,320
So for example, here, I'm on google.com and here,

90
00:04:25,320 --> 00:04:27,564
if I open those dev tools,

91
00:04:27,564 --> 00:04:32,100
I can also inspect elements here on google.com,

92
00:04:32,100 --> 00:04:34,280
this image, for example,

93
00:04:34,280 --> 00:04:37,870
and I can see the styles that affect this image.

94
00:04:37,870 --> 00:04:41,470
And of course we can also change the styles here or add

95
00:04:41,470 --> 00:04:45,310
a brand new style here, if I wanted to.

96
00:04:45,310 --> 00:04:47,740
That's all something we can do.

97
00:04:47,740 --> 00:04:51,480
Now, keep in mind that we're not changing the original code,

98
00:04:51,480 --> 00:04:53,900
so we're not hacking Google here.

99
00:04:53,900 --> 00:04:56,750
We're only changing what was loaded for us.

100
00:04:56,750 --> 00:04:59,120
So we're only hacking ourselves.

101
00:04:59,120 --> 00:05:01,770
And if we change something here and reload,

102
00:05:01,770 --> 00:05:06,320
that will also be gone, any changes we made will be gone.

103
00:05:06,320 --> 00:05:11,320
But these dev tools are a very useful tool for experimenting

104
00:05:11,340 --> 00:05:13,630
and playing around with your own page,

105
00:05:13,630 --> 00:05:17,320
for understanding why certain things look the way they look,

106
00:05:17,320 --> 00:05:21,510
and of course also for exploring other pages,

107
00:05:21,510 --> 00:05:23,360
which you did not build,

108
00:05:23,360 --> 00:05:27,550
maybe to find inspiration or to see how the developers

109
00:05:27,550 --> 00:05:31,190
of that page achieved a certain style.

110
00:05:31,190 --> 00:05:32,080
That being said,

111
00:05:32,080 --> 00:05:35,085
if you do inspect other pages like google.com,

112
00:05:35,085 --> 00:05:36,760
of course at the moment,

113
00:05:36,760 --> 00:05:41,480
you will still see many HTML elements and also CSS

114
00:05:41,480 --> 00:05:44,440
properties you haven't learned about yet,

115
00:05:44,440 --> 00:05:46,710
but that's something we're going to work on

116
00:05:46,710 --> 00:05:47,913
throughout this course.

117
00:05:49,160 --> 00:05:52,820
So the dev tools are another useful tool,

118
00:05:52,820 --> 00:05:55,610
which you should be aware of and which we will use from time

119
00:05:55,610 --> 00:05:56,690
to time in this course,

120
00:05:56,690 --> 00:06:00,200
and that's why I wanted to introduce them early.

121
00:06:00,200 --> 00:06:01,890
Now I will close them for now.

122
00:06:01,890 --> 00:06:04,790
And we are now going to dive back into our code,

123
00:06:04,790 --> 00:06:07,720
but the dev tools and this auto format shortcut,

124
00:06:07,720 --> 00:06:08,880
which you'll learn about,

125
00:06:08,880 --> 00:06:11,123
these are things you should keep in mind.