1 00:00:00,940 --> 00:00:09,310 Now, in the last few lessons, we looked at why CSS is useful and how you can implement it using 2 00:00:09,310 --> 00:00:12,790 inline internal or external success. 3 00:00:13,450 --> 00:00:19,870 Now in this lesson, we're going to start to develop a really important skill and that is debugging 4 00:00:19,870 --> 00:00:20,480 your code. 5 00:00:20,890 --> 00:00:23,900 Inevitably, as a developer of any sort, 6 00:00:23,920 --> 00:00:33,850 Web, mobile, backend, you will write code that have logical flaws or that have typos because we are all 7 00:00:33,850 --> 00:00:35,620 human and we make mistakes. 8 00:00:35,980 --> 00:00:41,350 And it's really important to learn the skill of diagnosing your bugs. 9 00:00:41,800 --> 00:00:45,720 So when something doesn't work the way you expect it to, 10 00:00:46,210 --> 00:00:51,190 how can you figure out what is the cause and how do you go about fixing it? 11 00:00:51,730 --> 00:01:00,310 And so in this lesson, in the resources, you'll find two text files one called debugging problem 1, 12 00:01:00,550 --> 00:01:03,040 and the other one called debugging problem 2. 13 00:01:03,520 --> 00:01:13,330 And what I want you to do is to go inside your index.html and hit Command +a or Control +a a to select everything. 14 00:01:13,600 --> 00:01:20,260 Now we're going to replace the code that's inside your index.html with each of the debugging problems. 15 00:01:20,620 --> 00:01:27,370 Now, if you've made notes in your index.html, or if you want to keep a copy of the actual working 16 00:01:27,370 --> 00:01:33,100 code that you've already written, make sure that after you've selected everything inside a HTML, 17 00:01:33,400 --> 00:01:42,340 go ahead and paste this into a notepad or into another file that you save as the working index.html 18 00:01:42,340 --> 00:01:44,080 or give it some sort of name. 19 00:01:44,650 --> 00:01:51,150 Now, after we replace this with the debugging problem, if you wanted to go back to your original index.html 20 00:01:51,300 --> 00:01:57,400 you can always hit undo in Atom, and the shortcut for that is Command + Z 21 00:01:57,760 --> 00:02:05,320 in Mac and its Control + Z on Windows and you can undo for as far back as you want to. 22 00:02:05,530 --> 00:02:12,340 So once you've saved a copy of your original index.html and then hit Backspace to delete everything 23 00:02:12,670 --> 00:02:15,540 next, you're going to go to the course resources, 24 00:02:15,550 --> 00:02:17,920 and again, if you don't remember how to find that 25 00:02:18,220 --> 00:02:22,690 have a look at the beginning of Lesson 3 where I talked about this now. 26 00:02:22,690 --> 00:02:27,280 Inside the course resources, you'll find a section that says Download the debugging problems 27 00:02:27,280 --> 00:02:28,150 Starting files. 28 00:02:28,540 --> 00:02:34,870 Once you've downloaded that, you'll need to unzip that zipped folder and you should have a folder called 29 00:02:34,870 --> 00:02:36,730 CSS Debugging Problems. 30 00:02:37,240 --> 00:02:44,020 Now you're going to go to Atom, you're going to go to file, open, and you go to navigate to that folder 31 00:02:44,290 --> 00:02:49,180 in your downloads and make sure that you haven't selected the zip version. 32 00:02:49,600 --> 00:02:53,050 Select the file and then open up debugging problem 1. 33 00:02:54,060 --> 00:03:00,540 And you're going to hit Command + a or Control + a to select everything, and then you're going to hit Command 34 00:03:00,540 --> 00:03:07,710 or Control + C and then you're going to copy all of this code over to your index.html. 35 00:03:09,080 --> 00:03:16,280 And then you're going to hit save and you're going to refresh your page to see that, oh, what happened? 36 00:03:16,520 --> 00:03:19,730 Where did all of our beautiful CSS styling go? 37 00:03:20,240 --> 00:03:28,940 And this is your first challenge to debug and fix the code and try to figure out what's going on here. 38 00:03:29,540 --> 00:03:31,640 So pause the video and give it a go. 39 00:03:34,460 --> 00:03:34,900 All right. 40 00:03:34,940 --> 00:03:42,560 So you might have found out the issue by painstakingly going through the code line by line. 41 00:03:42,950 --> 00:03:45,320 Now you might have also not found the bug. 42 00:03:45,470 --> 00:03:52,040 So let me walk you through a workflow of how you can approach debugging now and also in the future. 43 00:03:52,670 --> 00:03:57,640 So the first thing that we're going to use is we're going to pull up the Chrome developer tools. 44 00:03:57,650 --> 00:04:05,780 And this is one of the reasons why we're using Chrome to develop our website and web apps, even though 45 00:04:05,900 --> 00:04:10,370 perhaps there are other browsers that you might prefer using on a day to day basis. 46 00:04:10,970 --> 00:04:15,500 And one of the reasons is because of something called the Chrome developer tools. 47 00:04:15,980 --> 00:04:21,410 So if you head over to the three dots in the top right of your Chrome browser, click on it and then 48 00:04:21,410 --> 00:04:22,480 go to more tools, 49 00:04:22,490 --> 00:04:24,650 you should find the developer tools over there. 50 00:04:24,920 --> 00:04:29,180 And if you click on it, it brings up this console. 51 00:04:29,540 --> 00:04:35,030 So there's a whole bunch of tabs here, including network, performance, sources, elements, and we've 52 00:04:35,030 --> 00:04:39,650 checked out elements before when we right-clicked on something and we said, Inspect. 53 00:04:39,980 --> 00:04:41,270 That's what we were bringing up. 54 00:04:41,270 --> 00:04:43,100 We're bringing up the Chrome developer tools. 55 00:04:43,340 --> 00:04:49,790 So if we head over to console, then you can see that Chrome is actually reporting an error here to 56 00:04:49,790 --> 00:04:55,310 you. And it's telling you that it failed to load the resource. 57 00:04:55,490 --> 00:05:02,810 And there's an error where the file that you're trying to pull up is not found and it tells you what 58 00:05:02,810 --> 00:05:11,630 file it's trying to look for. It's trying to look for something at /css/styles.css. 59 00:05:11,870 --> 00:05:18,650 So if we go over to our code and we look at the part where we asked the browser to load this particular 60 00:05:18,650 --> 00:05:26,300 file /css/styles.css, then we will find it over here on line 6. 61 00:05:27,170 --> 00:05:35,870 And this shows you the problem that I spoke about earlier, whereby I said that the hrRef or the URL 62 00:05:35,870 --> 00:05:46,880 location of our styles.css exists in the CSS folder at the same hierarchical level as our index. 63 00:05:47,120 --> 00:05:47,530 html. 64 00:05:48,080 --> 00:05:58,550 But I've very sneakily added this leading forward slash and that makes this link relative to the root. 65 00:05:59,120 --> 00:06:07,190 Whereas without that leading slash, it makes this link relative to the subdirectory that the index.html 66 00:06:07,520 --> 00:06:08,880 exists in. 67 00:06:09,320 --> 00:06:18,470 So without the link, we're looking inside HTML personal site for a folder called css/styles.css. 68 00:06:19,040 --> 00:06:24,650 With the leading slash, we're looking for the root of the website, which we currently don't actually 69 00:06:24,650 --> 00:06:24,980 have. 70 00:06:25,340 --> 00:06:33,800 So we need to do to fix this bug is to delete that leading slash, hit, save and refresh our website. 71 00:06:34,250 --> 00:06:41,090 You'll see that error in the console now disappears and our styles are restored to our page. 72 00:06:42,140 --> 00:06:45,290 So that's the solution for the first debugging problem. 73 00:06:45,440 --> 00:06:46,760 Did you manage to get it right? 74 00:06:47,240 --> 00:06:50,010 Now, let's move on to the second debugging problem. 75 00:06:50,030 --> 00:06:56,000 So again, similarly, we're going to hit Command + a or Control + a and delete everything inside our index. 76 00:06:56,330 --> 00:06:56,750 html. 77 00:06:57,080 --> 00:07:03,020 We're going to go to debugging problem 2 and we're going to copy everything over. 78 00:07:04,330 --> 00:07:08,170 Gonna hit Save and we're going to refresh our website. 79 00:07:08,410 --> 00:07:14,410 And again, something has broken, but it hasn't broken as dramatically as previously. 80 00:07:14,740 --> 00:07:21,060 Now I want you to pause the video and figure out how we can restore it to the previous look and feel 81 00:07:21,340 --> 00:07:23,110 by fixing our code. 82 00:07:23,470 --> 00:07:25,840 So pause the video now and give it a go. 83 00:07:28,400 --> 00:07:33,500 So the first step of debugging always starts with identifying the problem. 84 00:07:34,100 --> 00:07:35,900 What is the problem here? 85 00:07:36,020 --> 00:07:41,150 Well, our background used to be a light green colour and now it's white. 86 00:07:41,720 --> 00:07:44,750 But the other parts of our CSS hasn't broken. 87 00:07:44,780 --> 00:07:48,260 So, for example, our horizontal rule is still correctly formatted, 88 00:07:48,620 --> 00:07:53,380 our H1 and H3 are also formatted using are external 89 00:07:53,490 --> 00:07:54,050 CSS. 90 00:07:54,200 --> 00:07:59,510 So it's probably not to do with the location of the stylesheet. 91 00:07:59,780 --> 00:08:06,350 So the only issue that we need to fix is why is it that the background is white 92 00:08:06,830 --> 00:08:13,910 but in our stylesheet, we said that the body's background should be our light green colour? 93 00:08:14,150 --> 00:08:16,190 Why is that not happening? 94 00:08:17,060 --> 00:08:21,830 Well, let's go ahead and pull up our Chrome developer tools again. 95 00:08:21,980 --> 00:08:31,910 And if we look inside elements and we select the body here and we go over to this styles section over 96 00:08:31,910 --> 00:08:41,090 here, then you can see that it's showing us all of the CSS that's being applied to the body of our 97 00:08:41,090 --> 00:08:48,500 webpage, and that includes setting the background color to white, as well as setting the background 98 00:08:48,500 --> 00:08:55,940 color to our specified hex code that light green color, as well as changing the display and the margin. 99 00:08:56,330 --> 00:09:03,530 And we're seeing that the color that we desire, which we set inside our stylesheet, is being crossed 100 00:09:03,530 --> 00:09:07,220 out and overridden by this white color. 101 00:09:08,800 --> 00:09:15,790 And if you look carefully inside our new buggy index.html, 102 00:09:16,240 --> 00:09:25,960 then the keen-eyed amongst you might have spotted that I set an inline CSS rule inside the body tag to 103 00:09:25,960 --> 00:09:33,460 turn the body's background color to white, which explains why our page looks like this. 104 00:09:33,910 --> 00:09:39,520 But what it doesn't explain is why is it that this one is being used 105 00:09:39,880 --> 00:09:48,250 but this one is not? If we specify six rules for the same property in different places, 106 00:09:49,360 --> 00:09:51,280 which one is more important? 107 00:09:51,820 --> 00:09:56,080 Well, we can use the Chrome developer tools to help us answer that question. 108 00:09:56,230 --> 00:10:02,170 So I'm going to keep the body's background color in the inline CSS as white, 109 00:10:02,830 --> 00:10:06,640 I'm also going to add a style tag here. 110 00:10:08,260 --> 00:10:17,080 And inside the style tag, I'm going to change the body's background color to, let's say, red. 111 00:10:18,610 --> 00:10:27,580 And I'm going to make this color a little bit more obvious, so let's change this to blue, hit save and 112 00:10:27,580 --> 00:10:31,060 refresh our page and you'll see that it stays white. 113 00:10:31,180 --> 00:10:36,070 But now if we select this line and we select our body element, 114 00:10:37,140 --> 00:10:40,890 you can see that this is the elements tab for viewing the elements. 115 00:10:41,430 --> 00:10:45,630 Then you can see that there's three colors that are being applied to our body. 116 00:10:46,140 --> 00:10:55,530 And two of them are crossed out the red color, which comes from index.html on line 10, which is, 117 00:10:55,530 --> 00:10:58,940 of course, our internal CSS. 118 00:11:00,450 --> 00:11:08,190 And then we've got the white color, which is being applied on the style attribute of the actual body 119 00:11:08,190 --> 00:11:10,530 element, as you can see here. 120 00:11:11,400 --> 00:11:19,380 And finally, we've got some CSS rule being applied inside our file called styles.css on line 121 00:11:19,380 --> 00:11:19,770 2. 122 00:11:20,370 --> 00:11:27,000 So styles.css on line 2 is the rule where we're setting the background color to blue. 123 00:11:27,720 --> 00:11:36,840 Now inside Chrome, you can untick that top-level background color and it goes down to the next most 124 00:11:36,840 --> 00:11:37,650 important thing. 125 00:11:37,860 --> 00:11:45,300 And this is the equivalent of deleting this inline CSS rule from the body tag. 126 00:11:46,050 --> 00:11:54,100 And that means that it defaults to the next most important CSS rule, which is the one on our index 127 00:11:54,100 --> 00:11:55,500 .html on line 128 00:11:55,500 --> 00:11:55,980 10. 129 00:11:56,490 --> 00:11:59,730 That is an internal CSS. 130 00:12:01,590 --> 00:12:08,700 And if you untick that one, which is the equivalent of deleting this part here, then and only then 131 00:12:08,700 --> 00:12:15,120 does it go to our styles.css applying the background color to be blue. 132 00:12:16,560 --> 00:12:22,890 Now, remember that when you're ticking and unticking these things inside Chrome, it affects how the 133 00:12:22,890 --> 00:12:24,420 web page gets displayed, 134 00:12:24,660 --> 00:12:27,060 but it does not change your code. 135 00:12:27,420 --> 00:12:34,920 So if I hit refresh right now, then it goes back to how it will be displayed across all the browsers 136 00:12:35,070 --> 00:12:43,470 if this website was live. So the Chrome tool is only for you to mess around with it locally and see 137 00:12:43,470 --> 00:12:44,860 what those changes, 138 00:12:44,880 --> 00:12:51,480 for example, removing this line here. Do you see how by ticking an unticking that it just commented 139 00:12:51,480 --> 00:12:54,210 out that particular CSS rule? 140 00:12:55,590 --> 00:13:00,090 And it shows you what the effects are without affecting the code behind it. 141 00:13:00,480 --> 00:13:08,130 So let's go ahead and affect the code because what we've learned is that by having 142 00:13:09,060 --> 00:13:19,320 inline CSS, internal CSS, as well as external CSS all affecting the same property of the same 143 00:13:19,320 --> 00:13:19,980 element, 144 00:13:20,670 --> 00:13:27,420 the priority is given to the inline element, so that's what's making our background white. 145 00:13:28,170 --> 00:13:38,640 Now, if I delete the CSS rule from here, save and refresh, then it goes to the next most important 146 00:13:38,670 --> 00:13:45,450 CSC rule, which is the one inside our internal CSS over here. 147 00:13:46,440 --> 00:13:54,780 And if I delete this internal CSS and hit save and refresh, then and only then does it go to the 148 00:13:54,780 --> 00:13:59,340 next most important rule, which is external CSS. 149 00:14:00,030 --> 00:14:06,510 So this describes the hierarchy of these three different ways of implementing CSS. 150 00:14:07,050 --> 00:14:12,870 And what it means is that you can apply a global CSS rule to all of your web pages, 151 00:14:13,230 --> 00:14:19,920 but on the individual web pages, you can apply more specific rules through using internal or inline 152 00:14:19,920 --> 00:14:28,260 CSS as more or less one-off changes for that specific page or that specific element on that page. 153 00:14:28,950 --> 00:14:36,060 So let's restore our website to the way that it was before, and you can mess around with implementing 154 00:14:36,060 --> 00:14:44,160 your CSS in those three different ways and see how the importance of those rules depend on where 155 00:14:44,160 --> 00:14:45,900 you write it. Now 156 00:14:45,900 --> 00:14:53,880 in terms of best practice as a web designer, it's usually suggested that you implement all of your 157 00:14:53,880 --> 00:14:57,380 styles inside your external CSS. 158 00:14:57,510 --> 00:15:06,210 Now, in the next lesson, we're going to look more closely at the CSS syntax and what a CSS rule is 159 00:15:06,210 --> 00:15:06,960 composed of. 160 00:15:07,320 --> 00:15:10,770 So for all of that and more, I'll see you on the next lesson.