Section 3 (CSS): Lesson 5 - Debug CSS

Hey you. And welcome. In this video we will learn how to debug CSS code using our browser. So let's dive right into it. In order to debug, I'll first create a problem and the problem would be I will target my heading h1 tag like so and provide a background color of red. So that's good. That's working. Next, I will target H one directly as an element and change the background color to pink. So now I have conflicting CSS for the h one tag. However, red is winning, so let's figure out why that's happening and how can we troubleshoot this. So I'll go over to my browser and my browser. I have the web page open and now I'll open the inspector and notice how I open them. I click and right click on my blog and select inspect. On every browser there is an inspect section. So when you click it, there should be a small developer tool that opens up. And we have looked at it before when we were learning about HTML. However, we stayed in the inspector section where we looked at elements only. And when you highlight the element, it tells you which element you're looking at in the in the, in the browser, right? So the one I'm looking at right now is the H one. On the right hand side, you would see that something called a style section filter styles. And in this style section we can see that there is a selector which is heading ID and H one inside that should have a background color of red, whereas h one tag background color pink, but it's slashed out. And the reason for that is because red exists there. So I can try and play around with this to see how it would change so I can uncheck my h one to see if I took it away. Would my pink style work or no? Yes, it would. So if I uncheck and style, it will go away. Not only can I uncheck or check style in the style section, I can write new styles. So let's see how we can do that. I will click into Background Color Press tab to go to the value tab again to start a new property. And this time I will say the property would be width property and it has autocomplete too. So as I was typing width it auto completed for me that you mean width and when I press tab in the value it also has that autocomplete just like vs code. So it's very user friendly and I can say this should be 100 pixels like so. And this is how you can play around in the browser live to see how can I make changes to this web page? And a good use for practicing in this would be go to any website like Amazon, Google, Instagram. Just go on there, open this inspect element, try to mess around with their style to see how you can make any difference or try to see how they have written their styles to accomplish any style that you may like to inspire your style off of. So this is where you would go to do that. All right. So this is one portion of debugging. Another portion of debugging is notice how when we want to change the browser width to see our Flexbox working, I have to just make my browser smaller or bigger. Well, there's another way to do it, and that's called Responsive view, I think. Yeah. Responsive design mode. That's what it's called. If I click into it. It will change my browser view. Up top the developer tools will look exactly the same, but the browser view changed and up top we have a toolbar where it says responsive and responsive means that I can change the width of my browser without changing the width of my actual browser. I just change the viewpoint of a of a browser to see how the style would look on different screens. And I can also change it in the dropdown with responsive to say how would it look on iPad? This is how it would look on the iPad. Whereas how would it look on a Galaxy S10 or iPhone and this is how it would look on the phone so you can debug your style on different devices using these preset pixel ratios that we're working with. You can also see it in landscape or portrait different designs. And to exit out of this mode, you can just press the button again and it will take away your responsive design mode and back to normal. Great. This is how we use the debugger tool. I'll see you all in the next video.

Видео Section 3 (CSS): Lesson 5 - Debug CSS автора Python для профи