Original subtitles

1 1

Hello back. 2

2

Before we move on to the next section, 3

3

I want to show you a very important 4

4

tool for every web developer. 5

5

Google Chrome Developer Tools. 6

6

These powerful tools are built right into 7

7

Google Chrome and can be used to analyze 8

8

and correct HTML CSS codes, 9

9

to optimize our web page, and so much more. 10

10

Also, remember what I told you earlier? 11

11

About learning about other web pages? 12

12

Here is the right tool to do just that. 13

13

So let's see how we can use the 14

14

Chrome Developer Tools. 15

15

Actually, if I just open the developer tools 16

16

in the window which has the a live 17

17

connection with brackets, which is 18

18

exactly this one. 19

19

That connection will get lost. 20

20

That is pretty annoying. 21

21

But instead I can open the HTML file 22

22

in the usual way, 23

23

and then none of that will happen. 24

24

So I'll just open the folder, 25

25

and here are all the files we created so far. 26

26

And I will open this with Google Chrome. 27

27

And here we go. 28

28

Now the Google Chrome Developer Tools 29

29

are all about inspecting elements. 30

30

So if we click, right click, 31

31

here on this main heading page one element, 32

32

and hit inspect element, 33

33

we see the Chrome tools down here. 34

34

And this is the H1 element I just selected. 35

35

So here we have all the HTML code 36

36

and as we hover the different elements 37

37

you see that in Google Chrome is shows us 38

38

which element we are inspecting. 39

39

Down on the right side, 40

40

we have all the CSS properties. 41

41

And you can turn these off, on 42

42

to see what happens 43

43

if these properties 44

44

are active or not active. 45

45

Here we can actually change some things. 46

46

Say you want this 45 or 48 or 60 47

47

just to see how it looks like. 48

48

Of course, none of these changes 49

49

will be reflected in the actual code 50

50

which means if I just refresh this page, 51

51

it looks exactly as it looked before. 52

52

Another useful thing, 53

53

is when I have this selected, 54

54

you see that the H1 element test, 55

55

this blue area, which is the content, 56

56

remember, the box model? 57

57

So the blue is the content, 58

58

and the orange one is the margin. 59

59

So that orange is these 20 pixels 60

60

margin bottom, right? 61

61

And this is the blog post div, 62

62

and if you remember we set a right 63

63

petting to 30 pixels. 64

64

And that 30 pixels is that green area we see. 65

65

So this can be pretty useful. 66

66

And actually we have the box model 67

67

also down here. 68

68

So when we have the bigger web page 69

69

this can be pretty useful 70

70

inspect all our elements. 71

71

So this is our web page. 72

72

Now remember we can also do the same thing 73

73

with other websites to see how they work. 74

74

This is the square website that I used before. 75

75

And some design lectures. 76

76

Imagine, you want to know 77

77

how this button here works. 78

78

We'll do inspect element 79

79

and then I have the code. 80

80

The HTML code, is here on the right side, 81

81

you can see the HTML attributes. 82

82

The color, the background color... 83

83

So these strike through here, 84

84

means that this property is not active. 85

85

It means that it has been overwritten 86

86

by something else. 87

87

So the background color, we can turn it 88

88

off and on, and see what happens. 89

89

And, what else is here? 90

90

So just the margin, 91

91

we can turn it off and on as well. 92

92

And here we see, for example, 93

93

that this button has a border rate 94

94

at three pixels, if you were just curious 95

95

how this was designed. 96

96

And the font family is square market. 97

97

And the font size is 11 pixels. 98

98

So you see, this is pretty useful 99

99

to find out about anything 100

100

that you want to know on other webpages. 101

101

For example, like this element, 102

102

here you see... 103

103

You can inspect all the HTML code. 104

104

So you have different divs here. 105

105

And then this extreme, 106

106

this particular color. 107

107

And, you know, I use this a lot 108

108

to see what other websites are doing right. 109

109

Okay, this was just the very basic introduction 110

110

but we will see more applications 111

111

of the developer tools later on. 112

112

And this was actually the last lecture 113

113

in the introductory CSS section. 114

114

Wow, you have learned such a lot so far. 115

115

Congratulations! 116

116

And I'm really, really happy and grateful 117

117

that you're still with me on this journey. 118

118

You're good to go for our killer website 119

119

project that we will start in a moment. 120

120

But wait, first I have another 121

121

nice little quiz for you again. 122

122

Good luck with that, 123

123

and see you in the next section.