Using Inspect Element to Analyze Websites - Tutorial | Debug Your CSS Code

hey guys how you doing my name is tj and in this video i'm going to be doing a super quick tutorial to show you how to use the inspect element to analyze and troubleshoot your website as you're building it now first things first let me show you the website that i'm going to be using as my example it's just this site here so let me just open this in the browser for you by just clicking on this index.html right so this is the webpage that i'll be walking you guys through how to actually troubleshoot with the inspect element now anytime that you want to open the inspect element you can just right click anywhere on the page and then click inspect and that is going to open up our inspect element on the right side now this area here is showing us all of the html elements that are currently displayed on this page if we go to a new page this will update and show us all of the html code there now this part here at the bottom this is the styles portion again you see it up here this is the elements right for our actual html elements and down here this is the styles which is showing us all of the css code that is currently applied to whatever is is highlighted here so you see right now we are currently on this div with the class hero container and as you can see this is the code that is currently being applied to our hero container now the main things to kind of pay attention to here are the fact that you have this you see where it says style.css so this is actually showing you the line number in your style.css file for this project because you see this uh path here where it shows file users tgo you need desktop tgoya20.github.io so that is the folder on my desktop and it's showing you that that i have an assets folder with the css folder and in that css folder is my style.css so that is the actual style sheet in my website and this is showing me the exact line number to where i wrote that code okay but something else that you also have to pay attention to is this part here that says user agent style sheet so the user agent is whatever browser you are currently using so right now i am using google chrome and the thing is that every almost every single html element has a default styling that is given to it by the browser so this styling is a bit different if you're on chrome safari internet explorer for sure and you know any other browser right default styles are going to be a bit different so just make sure that you pay attention to this here so this is just telling you that this is the style that is being applied by the browser that you are currently using and also one thing to to note is that anything that is crossed out means that this style is currently not being applied and it is being overridden by something else right so you see out here our display block is crossed out that means that we are actually writing our display somewhere else and if you just look up here you'll see that we have a display flex that is currently being applied now you can like toggle between what styles are applied and which ones aren't just by simply clicking on this check box and that'll now remove you see how this now crosses out our display flex but down here it shows that display block is now activated okay so you know this is just something that you can use to kind of play around with different rules in your browser before changing your actual css code so moving on let me put this back so now something else that is very important to notice that you can also get a visual as to what css rules are currently being applied to your html elements by just simply hovering over them so if you have this highlight tool clicked it should be blue this means that you can now hover over different elements on your web page and see what styles in terms of a visual are currently impacting this html element so if i hover over my heading here you'll see that this h1 has this blue part but then also has this orange part at the bottom and we don't quite know what that orange part is but you should right so if i click on this this now highlights all of the styles currently being applied to this h1 element and if you scroll all the way down something that is going to be very helpful is for you to kind of see all of the different box model property colors that the browser uses to let you know what the current box model properties that are being implemented are so you see any time that we hover over this h1 up here that we have a orange bar at the bottom over there and that orange bar corresponds to our margin right so it is the margin pushing down that content like that the blue area that is the background color of the actual roots technology so that blue area is the content now if you know html and css then you should definitely be familiar with the box model which talks about how every html element has a margin a border a pattern and the content in between so that is what this visual down here it is showing us that oh our h1 element has a margin applied to it um we don't see anything in terms of a border and we don't see anything in terms of a padding but we do have a content of course right so essentially that is what these colors correspond to anytime that you are hovering over different elements and you see those colors and again to demonstrate that i'm going to click on this hover tool and that shows you different kind of styles that are that are applied again so you see how any time that i hover on this div we'll see on the edges that we have that orange color which corresponds to our margin then you see the green which is the padding that is being applied with the blue in between which is our actual content now we can like actually see this in the inside of the inspect element to see exactly what those properties are but you can also see them on the left corner in this white output box here right so this is now showing us that we have a margin of 89.5 pixels on both the left and right hand side and it's also showing us that we have a padding of 15 pixels on the left and right hand sides and again it is definitely important that you first learn html and css for any of this to make sense in terms of what you are actually seeing on the screen so if you know those then this shorthand way of actually styling the margin and padding is something that you should be familiar with so let me now show you how to actually edit and just play around with different styles in the actual inspect element so let's say that we wanted to play around with the styling of this heading here you can just right click here and click inspect and that will now highlight this h1 here in our elements section and this style section is now showing us all of the current styles that are currently applied to this h1 as you can see we have a margin the font size the color etc now these are all things that you can play around with in the browser so let's say that i wanted to change this text color to red i can just click into here and type red and boom you see that it changes and i can also come up here and still write different styles for this html element so let's say that i wanted to change the font size to make it significantly bigger i can just come here type font size and let me make this 100 pixels right and again none of the code that i write in the in the browser here using my inspect element none of this code actually transfers over to my css the whole purpose of this to be able to actually troubleshoot and debug and just kind of see how different styles would look on elements as you are troubleshooting them before you go put them in your actual css code and anytime that you refresh that'll just bring everything back to the way that it used to be now another important aspect of using the inspect element is being able to actually preview what your website will look like on a mobile device so if you just come up here and click this icon up here with the iphone or tablet looking thing if you click that it'll then open this drop down in the middle of the page and if you click on this drop down you'll see a bunch of different devices that we are able to mimic using this browser so right now it is on iphone x and this is showing you currently what this website will look like on an iphone x if you want you can still change that to ipad right it gets a bit bigger and something else that you might want to do is to change so you see how right here my zoom level is at 75 if you actually put this to a hundred percent this would not be like the actual size of that device so let me come back here and put this to like a pixel 2 or something right so this is how this website would look on a pixel 2 so meaning that you can still use this inspect element to now troubleshoot different styles that are going to be applied on mobile devices all right so hopefully this helped and you know if you are having issues in terms of like debugging and troubleshooting your html code the inspect element is a very important tool that you have to get comfortable using and get familiar using as well especially as a front-end web developer so let me know if this video helps you comment below anything that you learned or that you discover and like about using the inspect element

Channel: ROOTs Technology

Views: 47,912

Keywords: chrome inspect element, chrome inspect element tutorials, inspect element, chrome dev tools, chrome devtools, devtools, change text on website, chrome developer tools, developer tools, Using Inspect Element to Analyze Websites, Debug Your CSS Code, how to build a website, how to make your website run smoothly, website running, website problems, website coding, website errors, website bugs, how to code better, how to be a better coder, how to be a better software developer

Id: oRKlKhFt2Rg

Length: 10min 36sec (636 seconds)

Published: Wed Jun 09 2021