38. Inspect Tool – Slides

Video Summary

Well for this section, we’re going to cover the Inspect tool. We’re going to be using this a lot when we get into our WordPress development, because basically what we’re going to be doing is we’re going to be using other developers’ themes, and then we’re going to transform it into our own. Same thing with the plugins. There are certain plugins that have certain features that we’re going to want to make our own with our different colors or different stylings or different sizes. And being able to use this inspect tool is such a major benefit to us. 

And really, when we get into this, you can access this on the major browsers such as Firefox and Chrome, through a lot of these examples that we’ll be going through. I’m going to be using Google Chrome just because a lot of our accounts and my personal accounts are attached to Gmail and a lot of Google like Google Me, Google Office, you know, all the pretty much the suite that Google has, I can access from my Google Chrome browser. So it just makes it easy for me, it doesn’t make sense to bounce back from Firefox to Chrome and back to Firefox. But if you prefer to use Firefox, by all means, I think the new inner or Edge might have it as well, but the ones that I’ve experienced that have the best inspection tools are Chrome and Firefox. And to access this tool, all you need to do is go to any web page and either right-click if you’re on PCs, or you do the two fingers click if you’re on Mac, and basically when you click it, right-click or double finger click, you will have a pop-up and it’s the same thing if you’re trying to copy and paste a link or an image or you’re trying to save an image from a webpage. So instead of clicking on a copy, you’re just gonna click on Inspect. And once we’ve clicked on inspect, we’re going to be able to have a side pop up that’s going to be the Inspect tool. 

And when we when we access this we’re going to be able to see all the HTML that was used to build that web page. We’re going to see the CSS that was used to style that web page. And we’re going to be able to see what that web page can look like on a bunch of different screen sizes and devices. And this is going to be huge when we get into mobile optimization because we want to make sure that our website looks good on every single device. And how are we going to know that we’re going to be able to use this tool? It’s not like we’re going to have I’m 11, one developer for five years and I don’t have every single device that’s out there and it’s impractical to have every single device make sure it’s looking good, right? We’re going to be able to go in and see what this website is going to look like on the new Apple 13 even back to the Apple A or the Mac or the iPhone eight. we can see what different Samsung devices look like. Most of them have pretty universal screen sizes, but we’re going to be able to see what each one looks like, even on the iPad and iPad Pro, we’re gonna be able to see exactly what our website looks like. So with that being said let’s hop over to a website and start playing around with the Inspect tool. 

PHP Code Snippets Powered By : XYZScripts.com