HTML & CSS Crash Course Tutorial #7 - Chrome Dev Tools

alright then gang so before we go any further coding I just wanted to show you a few things that might help you when you're developing websites and that is using Chrome's developer tools so we've briefly seen this in the past all you have to do is right-click and go to inspect and then that's going to open up the tools or on Windows you can just press f12 and that will do exactly the same thing so we can use Chrome developer tools to debug our websites or just inspect elements apply styles and just basically play around with the website in the browser you can make this panel bigger by just dragging it over to the left like so and also you're going to see loads of different tabs at the top over here so the first tab and the one we've already briefly seen in previous videos as well and the one that we run by default is this elements tab and that basically gives us an outline of the document with all of these different tabs that we can expand and see the tabs inside them so that's quite nice to get this overview of the HTML and as we hover over these we can see on the left over here in the browser itself or the viewport rather we can see that when we hover over something it highlights that element now a few cool things you can do in here is for example right-click and element and if you're ever struggling to make up a CSS selector for a certain element and make it specific you can go down here to copy and then go to copy selector now if I was to just paste this somewhere and I'll go to the console to do it up just briefly you can see that now I have this selector so I could use that in my CSS to make rules now okay so that's one nice thing you can do another nice thing you can do is right-click this and you can go to edit as HTML so if you want to make a quick change inside the browser itself just to see if something is going to look and good then you can do that just click somewhere else to save this and we can scroll up and we'll be able to see this thing right here so that's nice just for testing new features out if you don't want to directly edit your code in the editor and save the file you can just check it out right here and do that now you can also scroll down all this code and right-click and if you wanted to see this element for example in the viewport over here you could right click and you could go to Rolle interview and then that's going to take you to that section down at the bottom in the viewport so that's a nice little feature as well and also if we wanted to temporarily hide something we could go to hide element and we're not going to see that that just hides it it doesn't delete it so we could right click and then uncheck that to see it again but if we wanted to permanently delete this we could go to delete element right here and it would delete it again we can also do things like any attributes so I could say any attribute to come in and edit this thing right here or if I wanted to add a new one I could do that and type ID equals you know whatever and that would add it as well oops it didn't there so let me try again add attribute ID is equal to whatever press Enter there we go so it gives it this ID now so we can edit our code on the fly and see the effect it has in the browser so this is really nice just for testing things out I suppose now another cool thing about this tab is that we can also inspect all the different CSS styles given to it now in our code at the minute we've not given any of the elements their own CSS Styles just yet but we do have some default browser styles for some of these elements for example if I try and find an anchor tag a link right click and inspect so this is selected over here if I now move this up we can see these are the styles that are currently given to this anchor tag right here and they're all at the minute user agent styles so their default browser styles but if I wanted to just play around with the styles of this individual element I could do so right here come to where it says element style and I could say something like color is going to be red and that will style it on the page just that one individual element so this is nice if I want to try out some different styles and preview them in the browser as I do them so background could be black like so now notice on any other rules when something's overridden then the previous rule becomes crossed out so we can see when a rule no longer takes effect it has this cross through it that means that something else is basically more specific and it's overriding this value now any other elements not from the user-agent stylesheet but any elements that we apply ourselves either from here or directly from our CSS file we can check and uncheck just to toggle those and see the effect in the browser and that's good when you're debugging if you're trying to work out why something is displaying or position in some way shape or form then you can go through and uncheck different things until the error goes away or until you find out what's causing the problem or the issue and one more thing this little icon in the top left if we check that then it lets us hover over these different elements and notice on the right it Scrolls through the code let me just move this down a bit it scrolls through the code and goes through whatever we hover on so if I select an element and click it then it's going to show that over here and also notice it's unchecked from here now so if I want to do that again I have to check this again but also if we hover over something notice up here that little bubble it shows you some different styles of that element as well so that's nice so all of these different features are really nice when we're just trying to you know play around with the website mess around with some Styles and even when you're on someone else's website and you want to kind of reverse engineer what they've done see how they've styled something I've got a certain effect in the browser we can use these different tools to do that as well so really helpful so the next tab I'd like to show you is this sources tab and this is going to give us a tree of different files and folders that make up our project so it's going to look very similar to the tree that we have in vs code for this project so we can see the index dot HTML file we can see the Styles nothing in there at the minute we can also see inside the image folder these different images as well so that's nice we can see all of the different sources that make up this website and even better we can edit those live inside this little editor on the right so if I open up styles.css and I do something like this I'm going to target all div tags and I'm going to say background it is going to be red now if I do that notice it updates live on the fly over here in the browser I'm going to take this thing off so it doesn't keep highlighting and we can see this here I'm not sure if there's any other divs on the page doctor there is but if there were then it would style those read as well now one word of warning if I was to refresh this page then I would lose that stuff over there so be careful if you write a lot of styles here and you intend to keep them make sure that you copy them back over to your editor and save the file before you refresh your page because if you're not careful you could find yourself losing an hour's worth of CSS or code I have done it more than once and believe me it is not fun so just a word of warning there and that's even if you save the file so for example if I say div and then background is gonna be read if I save the file and then refresh it's still not going to save it now we can't combat this and we can make our saves permanent of here by going to the file system and then adding a folder to the workspace so if I click this now then I'm gonna go to documents I'm gonna go to tutorial code YouTube then it's recording this is where I keep all of my different project files I'm going to open up the HTML and CSS crash course that's the folder that I also have opened in vs code I'm going to select that folder and then it adds it to the workspace now you have to allow up here for it to work so allow and then now we can see these things right here so if I was now to add something to the CSS right here in the file system then I could save that so let me say div let me give this a background of red and now if I save this by pressing ctrl + S on a Windows then refresh notice now it stays there and what's better it's also going to update in our code editor so I can now open up vs code and go to styles dot CSS and notice we have this rule right here so I sometimes like to work this way because I then have available to me all of the different tabs and tools inside there developer tools and I can play around with the code and then save it when I think that I want to keep that code so that's useful but do be careful because if you start playing around with it too much make edits and saving and forgetting about them when you go back to your code over here you might not realize why something is there so it can get a little bit messy after a while but for doing certain sections on a website it can't be really useful to code over here play around with it save it and then it's going to auto update in your text editor now if I wanted to I could even add more files over here or folders I could right click on this folder and say new file you know call this test dot CSS and I could write this as well I could go to index dot HTML I'll link up to text CSS in fact we'll do that let me copy this dude and paste it in here test dot CSS I'm going to save this and then inside test I could say body which selects the body tag over here we've not seen that yet but it selects the body tag and then I'm going to give this a background of green okay so if I save that now notice over in my editor we have this new test file we also have inside the index file a link to that test file as well okay so hopefully now this demonstrates how good these developer tools are and how they can help you when you're developing websites and just basically playing around or learning with code as well so just very briefly there's two more things I'd like to show you that probably and not going to be overly important to you at the minute but as you progress into front-end development even more you might find yourself using them at some point so first of all we have this console tab this is where we can do a little bit of JavaScript so for example I could just do an alert and say hello I don't expect you to know what this is but I'm just writing a bit of JavaScript if I press ENTER I can run that JavaScript and it's going to run on the page and then we also have device preview over here as well so we can view our websites in different devices if I click on that then we can see currently this is the iPad but I can go to iPhone and different sizes over here as well so I can preview the work I do on different devices we also have a zoom level over there if I go to 100% that's the actual size of the phone right there 75% just zooms out a little bit I'm going to change this back to iPad and in fact one more thing this thing over here you can also use this to kind of device preview as well at different widths because notice as I move this left and right we can see if you look up here the dimensions of the viewport and this is going to be very useful when we start to work with media queries and responsive design where we display things differently for different widths or different viewport heights or basically dimensions in general okay so there we go my friends that is the chrome developer tools we are going to be using them going forward to test different things out I just wanted to make you comfortable with them for a few minutes so you're not lost when I'm using them in the future

Channel: The Net Ninja

Views: 62,748

Keywords: html, css, html tutorial, css tutorial, html and css, html crash course, css crash course, crash course, tutorial, html for beginners, css for beginners, web development for beginners, web dev for beginners, web dev tutorial, html & css crash course, dev tools, chrome dev tools, chrome import folder, dev tools tutorial, html dev tools, inspect element

Id: 25R1Jl5P7Mw

Length: 11min 49sec (709 seconds)

Published: Mon Jul 22 2019