0
1
00:00:01,000 --> 00:00:09,880
Now in the last few lessons we looked at why CSS is useful and how you can implement it using inline
1

2
00:00:10,120 --> 00:00:13,390
internal or external CSS.
2

3
00:00:13,510 --> 00:00:20,080
Now in this lesson we're going to start to develop a really important skill and that is debugging your
3

4
00:00:20,080 --> 00:00:29,590
code. Inevitably, as a developer of any sort, web, mobile, backend, you will write code that have logical
4

5
00:00:29,590 --> 00:00:35,810
flaws or that have typos because we are all human and we make mistakes.
5

6
00:00:36,100 --> 00:00:44,260
And it's really important to learn the skill of diagnosing your bugs so when something doesn't work
6

7
00:00:44,260 --> 00:00:45,980
the way you expect it to,
7

8
00:00:46,240 --> 00:00:49,100
how can you figure out what is the cause.
8

9
00:00:49,300 --> 00:00:51,530
And how do you go about fixing it.
9

10
00:00:51,850 --> 00:01:00,850
And so in this lesson in the resources you'll find two text files, one called Debugging Problem 1, and
10

11
00:01:00,850 --> 00:01:03,360
the other one called Debugging Problem 2.
11

12
00:01:03,640 --> 00:01:11,530
And what I want you to do is to go inside your index.html and hit command A or control A
12

13
00:01:11,890 --> 00:01:18,490
to select everything and then hit backspace to delete everything and you're going to go to Debugging
13

14
00:01:18,490 --> 00:01:25,240
Problem 1 and you're going to hit command a or control a to select everything and then you're going to hit
14

15
00:01:25,240 --> 00:01:32,430
command or control C and then you're going to copy all of this code over to your index.html
15

16
00:01:32,480 --> 00:01:40,790
and then you're going to hit save and you're going to refresh your page to see that.
16

17
00:01:40,820 --> 00:01:41,790
Oh what happened?
17

18
00:01:41,930 --> 00:01:45,380
Where did all of our beautiful CSS styling go?
18

19
00:01:45,680 --> 00:01:54,600
And this is your first challenge to debug and fix the code and try to figure out what's going on here.
19

20
00:01:54,920 --> 00:01:59,850
So pause the video and give it a go.
20

21
00:01:59,850 --> 00:02:08,350
All right so you might have found out the issue by painstakingly going through the code line by line.
21

22
00:02:08,360 --> 00:02:10,830
Now you might have also not found the bug.
22

23
00:02:10,860 --> 00:02:18,020
So let me walk you through a workflow of how you can approach debugging now and also in the future.
23

24
00:02:18,030 --> 00:02:23,250
So the first thing that we're going to use is we're going to pull up the Chrome Developer Tools and
24

25
00:02:23,250 --> 00:02:31,140
this is one of the reasons why we're using Chrome to develop our web sites and web apps even though
25

26
00:02:31,350 --> 00:02:36,300
perhaps there are other browsers that you might prefer using on a day to day basis.
26

27
00:02:36,420 --> 00:02:41,010
And one of the reasons is because of something called the Chrome Developer Tools.
27

28
00:02:41,040 --> 00:02:48,270
So if you head over to View in the Chrome menu and you go over to Developer then you have this thing
28

29
00:02:48,270 --> 00:02:54,940
called Developer Tools and if you click on it it brings up this console.
29

30
00:02:55,110 --> 00:03:00,810
So there's a whole bunch of tabs here including Network, Performance, Sources, Elements, and we've checked
30

31
00:03:00,810 --> 00:03:05,400
out Elements before when we right clicked on something and we said Inspect.
31

32
00:03:05,550 --> 00:03:06,840
That's what we were bringing up.
32

33
00:03:06,840 --> 00:03:08,850
We were bringing up the Chrome Developer Tools.
33

34
00:03:08,850 --> 00:03:15,600
So if we head over to Console then you can see that Chrome is actually reporting an error here to you
34

35
00:03:17,010 --> 00:03:24,510
and it's telling you that it failed to load the resource and there's an error where the file that you're
35

36
00:03:24,510 --> 00:03:31,320
trying to pull up is not found and it tells you what file it's trying to look for. It’s trying to look
36

37
00:03:31,320 --> 00:03:32,930
for something at
37

38
00:03:32,950 --> 00:03:37,400
/css/styles.css.
38

39
00:03:37,400 --> 00:03:44,160
So if we go over to our code and we look at the part where we ask the browser to load this particular
39

40
00:03:44,160 --> 00:03:54,180
file /css/styles.css, then we will find it over here on line 6 and this shows
40

41
00:03:54,180 --> 00:04:04,220
you the problem that I spoke about earlier whereby I said that the href or the URL location of our styles.css
41

42
00:04:04,280 --> 00:04:16,410
exists in the css folder at the same hierarchical level as our index.html, but I've very sneakily
42

43
00:04:16,680 --> 00:04:25,800
added this leading forward slash and that makes this link relative to the root whereas without that
43

44
00:04:25,800 --> 00:04:34,850
leading slash it makes this link relative to the subdirectory that the index.html exists in.
44

45
00:04:34,860 --> 00:04:43,380
So without the link we’re looking inside HTML - Personal Site for a folder called css/styles.css.
45

46
00:04:43,470 --> 00:04:46,020
With the leading slash
46

47
00:04:46,020 --> 00:04:50,690
we’re looking for the root of the web site which we currently don't actually have.
47

48
00:04:50,880 --> 00:04:59,660
So all we need to do to fix this bug is to delete that leading slash, hit save and refresh our web site.
48

49
00:04:59,820 --> 00:05:03,120
You'll see that error in the console now disappears.
49

50
00:05:03,330 --> 00:05:07,500
And our styles are restored to our page.
50

51
00:05:07,710 --> 00:05:11,010
So that's the solution for the first debugging problem.
51

52
00:05:11,010 --> 00:05:13,050
Did you manage to get it right?
52

53
00:05:13,070 --> 00:05:15,570
Now let’s move on to the second debugging problem.
53

54
00:05:15,570 --> 00:05:21,890
So again, similarly, we’re going to hit command or control A and delete everything inside our index.html.
54

55
00:05:22,020 --> 00:05:30,280
We’re going to go to Debugging Problem 2 and we're going to copy everything over, going to hit
55

56
00:05:30,280 --> 00:05:31,160
save.
56

57
00:05:31,390 --> 00:05:33,970
And we're going to refresh our website.
57

58
00:05:34,000 --> 00:05:40,070
And again something has broken but it hasn't broken as dramatically as previously.
58

59
00:05:40,220 --> 00:05:46,150
Now I want you to pause the video and figure out how we can restore it to the previous look and
59

60
00:05:46,150 --> 00:05:46,810
feel
60

61
00:05:46,870 --> 00:05:48,890
by fixing our code.
61

62
00:05:49,030 --> 00:05:51,620
So pause the video now and give it a go.
62

63
00:05:53,930 --> 00:05:59,690
So the first step of debugging always starts with identifying the problem.
63

64
00:05:59,690 --> 00:06:01,480
What is the problem here?
64

65
00:06:01,580 --> 00:06:06,990
Well, our background used to be a light green color and now it's white.
65

66
00:06:07,310 --> 00:06:10,280
But the other parts of our CSS hasn't broken.
66

67
00:06:10,280 --> 00:06:14,100
So for example our horizontal rule is still correctly formatted.
67

68
00:06:14,390 --> 00:06:19,690
Our h1 and h3 are also formatted using our external CCS.
68

69
00:06:19,760 --> 00:06:25,280
So it's probably not to do with the location of the stylesheet.
69

70
00:06:25,340 --> 00:06:32,140
So the only issue that we need to fix is why is it that the background is white
70

71
00:06:32,390 --> 00:06:39,740
but in our stylesheet we said that the body's background should be our light green color.
71

72
00:06:39,740 --> 00:06:42,180
Why is that not happening?
72

73
00:06:42,620 --> 00:06:47,470
Well, let's go ahead and pull up our Chrome Developer Tools again.
73

74
00:06:47,600 --> 00:06:57,380
And if we look inside Elements and we select the body here and we go over to this Styles section over
74

75
00:06:57,390 --> 00:07:07,250
here then you can see that it's showing us all of the CSS that's being applied to the body of our web page
75

76
00:07:07,850 --> 00:07:15,380
and that includes setting the background color to white as well as setting the background color to our
76

77
00:07:15,440 --> 00:07:21,950
specified hex code, that light green color, as well as changing the display and the margin.
77

78
00:07:21,950 --> 00:07:29,480
And we're seeing that the color that we desire which we set inside our style sheet is being crossed out
78

79
00:07:29,660 --> 00:07:33,040
and overridden by this white color.
79

80
00:07:34,420 --> 00:07:44,380
And if you look carefully inside our new buggy index.html then the keen eyed amongst you might
80

81
00:07:44,380 --> 00:07:45,560
have spotted that
81

82
00:07:45,610 --> 00:07:56,470
I set an inline CSS rule inside the body tag to turn the body's background color to white which explains
82

83
00:07:56,620 --> 00:07:59,180
why our page looks like this.
83

84
00:07:59,440 --> 00:08:05,310
But what it doesn't explain is why is it that this one is being used
84

85
00:08:05,440 --> 00:08:07,340
but this one is not.
85

86
00:08:07,600 --> 00:08:17,130
If we specify CSS rules for the same property in different places which one is more important?
86

87
00:08:17,410 --> 00:08:21,640
Well we can use the Chrome Developers Tools to help us answer that question.
87

88
00:08:21,790 --> 00:08:28,220
So I'm going to keep the body background color in the inline CSS as white.
88

89
00:08:28,420 --> 00:08:32,350
I'm also going to add a style tag here.
89

90
00:08:33,850 --> 00:08:44,920
And inside the style tag I'm going to change the body's background color to let's say red and I'm going
90

91
00:08:44,920 --> 00:08:53,950
to make this color a little bit more obvious so let's change this to blue, hit save and refresh our
91

92
00:08:53,950 --> 00:08:56,760
page and you'll see that it stays white.
92

93
00:08:56,770 --> 00:09:05,010
But now if we select this line and we select our body element, you can see that this is the Elements tab
93

94
00:09:05,100 --> 00:09:06,830
for viewing the elements,
94

95
00:09:06,990 --> 00:09:13,140
then you can see that there's three colors that are being applied to our body and two of them are crossed
95

96
00:09:13,140 --> 00:09:13,500
out.
96

97
00:09:13,590 --> 00:09:26,310
The red color which comes from index.html on line 10 which is of course our internal CSS and then
97

98
00:09:26,310 --> 00:09:34,980
we've got the white color which is being applied on the style attribute of the actual body element as
98

99
00:09:34,980 --> 00:09:36,500
you can see here.
99

100
00:09:36,990 --> 00:09:45,580
And finally we've got some CSS rule being applied inside our file called styles.css on line 2.
100

101
00:09:45,930 --> 00:09:53,280
So styles.css on line 2 is the rule where we're setting the background color to blue.
101

102
00:09:53,280 --> 00:10:02,880
Now inside Chrome you can untick that top level background color and it goes down to the next most important
102

103
00:10:02,880 --> 00:10:03,320
thing.
103

104
00:10:03,480 --> 00:10:11,150
And this is the equivalent of deleting this in line CSS rule from the body tag.
104

105
00:10:11,670 --> 00:10:19,710
And that means that it defaults to the next most important CSS rule which is the one on our index.html
105

106
00:10:19,710 --> 00:10:21,900
on line 10.
106

107
00:10:22,080 --> 00:10:32,230
That is our internal CSS. And if you untick that one which is the equivalent of deleting this part here
107

108
00:10:32,530 --> 00:10:36,790
then and only then does it go to our styles.css
108

109
00:10:36,970 --> 00:10:42,000
applying the background color to be blue.
109

110
00:10:42,150 --> 00:10:48,900
Now remember that when you're ticking and unticking these things inside Chrome it affects how the web page
110

111
00:10:48,900 --> 00:10:50,120
gets displayed,
111

112
00:10:50,190 --> 00:10:52,860
but it does not change your code.
112

113
00:10:52,980 --> 00:11:00,690
So if I hit refresh right now then it goes back to how it will be displayed across all the browsers
113

114
00:11:00,690 --> 00:11:02,720
if this web site was live.
114

115
00:11:03,120 --> 00:11:10,410
So the Chrome tool is only for you to mess around with it locally and see what those changes.
115

116
00:11:10,410 --> 00:11:13,350
For example removing this line here.
116

117
00:11:13,550 --> 00:11:20,640
Do you see how by ticking and unticking that it just commented out that particular CSS rule?
117

118
00:11:21,180 --> 00:11:25,830
And it shows you what the effects are without affecting the code behind it.
118

119
00:11:26,040 --> 00:11:37,410
So let's go ahead and affect the code because what we've learned is that by having inline CSS, internal
119

120
00:11:37,410 --> 00:11:48,240
CSS, as well as external CSS all affecting the same property of the same element, the priority is given
120

121
00:11:48,450 --> 00:11:50,470
to the inline element.
121

122
00:11:50,670 --> 00:11:53,720
So that's what's making our background white.
122

123
00:11:53,730 --> 00:12:04,730
Now if I delete this CSS rule from here, save and refresh, then it goes to the next most important CSS
123

124
00:12:04,740 --> 00:12:11,390
rule which is the one inside our internal CSS over here.
124

125
00:12:12,030 --> 00:12:20,820
And if I delete this internal CSS and hit save and refresh then and only then does it go to the next
125

126
00:12:20,910 --> 00:12:25,520
most important rule which is our external CSS.
126

127
00:12:25,590 --> 00:12:33,540
So this describes the hierarchy of these three different ways of implementing CSS, and what it means
127

128
00:12:33,540 --> 00:12:38,650
is that you can apply a global CSS rule to all of your web pages,
128

129
00:12:38,790 --> 00:12:45,660
but on the individual web pages you can apply more specific rules through using internal or inline CSS
129

130
00:12:45,660 --> 00:12:54,470
as more or less one off changes for that specific page or that specific element on that page.
130

131
00:12:54,510 --> 00:13:01,470
So let's restore our web site to the way that it was before and you can mess around with implementing
131

132
00:13:01,500 --> 00:13:09,270
your CSS in those three different ways and see how the importance of those rules depend on
132

133
00:13:09,270 --> 00:13:10,750
where you write it.
133

134
00:13:10,920 --> 00:13:19,380
Now in terms of best practice as a web designer it's usually suggested that you implement all of your
134

135
00:13:19,380 --> 00:13:23,040
styles inside your external CSS.
135

136
00:13:23,100 --> 00:13:31,710
Now in the next lesson we're going to look more closely at the CSS syntax and what a CSS rule is
136

137
00:13:31,710 --> 00:13:32,660
composed of.
137

138
00:13:32,870 --> 00:13:36,480
So for all of that and more I'll see you on the next lesson.