Original subtitles

0 Now in the last few lessons we looked at why CSS is useful and how you can implement it using inline 1

internal or external CSS. 2

Now in this lesson we're going to start to develop a really important skill and that is debugging your 3

code. Inevitably, as a developer of any sort, web, mobile, backend, you will write code that have logical 4

flaws or that have typos because we are all human and we make mistakes. 5

And it's really important to learn the skill of diagnosing your bugs so when something doesn't work 6

the way you expect it to, 7

how can you figure out what is the cause. 8

And how do you go about fixing it. 9

And so in this lesson in the resources you'll find two text files, one called Debugging Problem 1, and 10

the other one called Debugging Problem 2. 11

And what I want you to do is to go inside your index.html and hit command A or control A 12

to select everything and then hit backspace to delete everything and you're going to go to Debugging 13

Problem 1 and you're going to hit command a or control a to select everything and then you're going to hit 14

command or control C and then you're going to copy all of this code over to your index.html 15

and then you're going to hit save and you're going to refresh your page to see that. 16

Oh what happened? 17

Where did all of our beautiful CSS styling go? 18

And this is your first challenge to debug and fix the code and try to figure out what's going on here. 19

So pause the video and give it a go. 20

All right so you might have found out the issue by painstakingly going through the code line by line. 21

Now you might have also not found the bug. 22

So let me walk you through a workflow of how you can approach debugging now and also in the future. 23

So the first thing that we're going to use is we're going to pull up the Chrome Developer Tools and 24

this is one of the reasons why we're using Chrome to develop our web sites and web apps even though 25

perhaps there are other browsers that you might prefer using on a day to day basis. 26

And one of the reasons is because of something called the Chrome Developer Tools. 27

So if you head over to View in the Chrome menu and you go over to Developer then you have this thing 28

called Developer Tools and if you click on it it brings up this console. 29

So there's a whole bunch of tabs here including Network, Performance, Sources, Elements, and we've checked 30

out Elements before when we right clicked on something and we said Inspect. 31

That's what we were bringing up. 32

We were bringing up the Chrome Developer Tools. 33

So if we head over to Console then you can see that Chrome is actually reporting an error here to you 34

and it's telling you that it failed to load the resource and there's an error where the file that you're 35

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

for something at 37

/css/styles.css. 38

So if we go over to our code and we look at the part where we ask the browser to load this particular 39

file /css/styles.css, then we will find it over here on line 6 and this shows 40

you the problem that I spoke about earlier whereby I said that the href or the URL location of our styles.css 41

exists in the css folder at the same hierarchical level as our index.html, but I've very sneakily 42

added this leading forward slash and that makes this link relative to the root whereas without that 43

leading slash it makes this link relative to the subdirectory that the index.html exists in. 44

So without the link we’re looking inside HTML - Personal Site for a folder called css/styles.css. 45

With the leading slash 46

we’re looking for the root of the web site which we currently don't actually have. 47

So all we need to do to fix this bug is to delete that leading slash, hit save and refresh our web site. 48

You'll see that error in the console now disappears. 49

And our styles are restored to our page. 50

So that's the solution for the first debugging problem. 51

Did you manage to get it right? 52

Now let’s move on to the second debugging problem. 53

So again, similarly, we’re going to hit command or control A and delete everything inside our index.html. 54

We’re going to go to Debugging Problem 2 and we're going to copy everything over, going to hit 55

save. 56

And we're going to refresh our website. 57

And again something has broken but it hasn't broken as dramatically as previously. 58

Now I want you to pause the video and figure out how we can restore it to the previous look and 59

feel 60

by fixing our code. 61

So pause the video now and give it a go. 62

So the first step of debugging always starts with identifying the problem. 63

What is the problem here? 64

Well, our background used to be a light green color and now it's white. 65

But the other parts of our CSS hasn't broken. 66

So for example our horizontal rule is still correctly formatted. 67

Our h1 and h3 are also formatted using our external CCS. 68

So it's probably not to do with the location of the stylesheet. 69

So the only issue that we need to fix is why is it that the background is white 70

but in our stylesheet we said that the body's background should be our light green color. 71

Why is that not happening? 72

Well, let's go ahead and pull up our Chrome Developer Tools again. 73

And if we look inside Elements and we select the body here and we go over to this Styles section over 74

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

and that includes setting the background color to white as well as setting the background color to our 76

specified hex code, that light green color, as well as changing the display and the margin. 77

And we're seeing that the color that we desire which we set inside our style sheet is being crossed out 78

and overridden by this white color. 79

And if you look carefully inside our new buggy index.html then the keen eyed amongst you might 80

have spotted that 81

I set an inline CSS rule inside the body tag to turn the body's background color to white which explains 82

why our page looks like this. 83

But what it doesn't explain is why is it that this one is being used 84

but this one is not. 85

If we specify CSS rules for the same property in different places which one is more important? 86

Well we can use the Chrome Developers Tools to help us answer that question. 87

So I'm going to keep the body background color in the inline CSS as white. 88

I'm also going to add a style tag here. 89

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

to make this color a little bit more obvious so let's change this to blue, hit save and refresh our 91

page and you'll see that it stays white. 92

But now if we select this line and we select our body element, you can see that this is the Elements tab 93

for viewing the elements, 94

then you can see that there's three colors that are being applied to our body and two of them are crossed 95

out. 96

The red color which comes from index.html on line 10 which is of course our internal CSS and then 97

we've got the white color which is being applied on the style attribute of the actual body element as 98

you can see here. 99

And finally we've got some CSS rule being applied inside our file called styles.css on line 2. 100

So styles.css on line 2 is the rule where we're setting the background color to blue. 101

Now inside Chrome you can untick that top level background color and it goes down to the next most important 102

thing. 103

And this is the equivalent of deleting this in line CSS rule from the body tag. 104

And that means that it defaults to the next most important CSS rule which is the one on our index.html 105

on line 10. 106

That is our internal CSS. And if you untick that one which is the equivalent of deleting this part here 107

then and only then does it go to our styles.css 108

applying the background color to be blue. 109

Now remember that when you're ticking and unticking these things inside Chrome it affects how the web page 110

gets displayed, 111

but it does not change your code. 112

So if I hit refresh right now then it goes back to how it will be displayed across all the browsers 113

if this web site was live. 114

So the Chrome tool is only for you to mess around with it locally and see what those changes. 115

For example removing this line here. 116

Do you see how by ticking and unticking that it just commented out that particular CSS rule? 117

And it shows you what the effects are without affecting the code behind it. 118

So let's go ahead and affect the code because what we've learned is that by having inline CSS, internal 119

CSS, as well as external CSS all affecting the same property of the same element, the priority is given 120

to the inline element. 121

So that's what's making our background white. 122

Now if I delete this CSS rule from here, save and refresh, then it goes to the next most important CSS 123

rule which is the one inside our internal CSS over here. 124

And if I delete this internal CSS and hit save and refresh then and only then does it go to the next 125

most important rule which is our external CSS. 126

So this describes the hierarchy of these three different ways of implementing CSS, and what it means 127

is that you can apply a global CSS rule to all of your web pages, 128

but on the individual web pages you can apply more specific rules through using internal or inline CSS 129

as more or less one off changes for that specific page or that specific element on that page. 130

So let's restore our web site to the way that it was before and you can mess around with implementing 131

your CSS in those three different ways and see how the importance of those rules depend on 132

where you write it. 133

Now in terms of best practice as a web designer it's usually suggested that you implement all of your 134

styles inside your external CSS. 135

Now in the next lesson we're going to look more closely at the CSS syntax and what a CSS rule is 136

composed of. 137

So for all of that and more I'll see you on the next lesson.