 Hi, everyone. Good morning. I'm Tara Claes. Thanks for joining me this morning. I hope everybody's doing well and awake. If anybody wants to take a stretch after that awesome keynote, thank you, Tracy. Just go ahead and wake up for a second, because we're going to be looking at a little bit of code, and I'm going to try to go slowly. But I'm talking about the inspector today, so if that's what you're here for, great. If it's not, feel free to leave. At least I'd like to find out how many people here have used the Chrome inspector, or Firebug, or other inspectors before. Everybody has. Almost everybody. How many people have never used it before? Don't even know barely what it is. All right, cool. So I hope that I have something to teach everybody, and I will welcome input as I go through this, so I'll have questions at the end. Or if you have things to add, please feel free to add as I go along. So what is the inspector? It's a set of developer tools that the browser offers to us in order to inspect the code on our web pages. We can look at CSS, HTML, and we can look at the code basically behind the site. Chrome offers something they call developer tools. Firebug is what Firefox used to use. I was just told that Firebug is no longer a thing, but I don't use that. Safari has developer tools and Explorer does as well. We're going to be looking at Chrome today. The tools that we'll be using, if you have your laptop out and you want to sort of follow along, or if you want to take notes for when you go back to your computer, having a text editor, something like Sublime Text or Notepad. There are many others. Sublime is free. Notepad is free. Also, local development. If anybody here uses local development environments like MAMP, WAMP, SAMP, desktop server or local by flywheel, my example today will use local by flywheel, which is a free package that you can get from flywheel. SFTP, an SFTP client or Git, something you can use to push your local code up to your live server. And then WordPress is what we'll be using. To use the inspector, though, you don't have to use WordPress. You can use any platform that you like. And then we'll be using Google Chrome, but you may use another browser. So basic knowledge, understanding what the DOM is. Does anybody not know what the DOM is? Okay, it's document object model is what it stands for, and it's basically the code on the page. So if you ever click View Source, if you right click on a page and click View Source, that's the DOM. HTML, which is a coding language that's used in order to build the content on the page. And then CSS, which stands for Cascading Style Sheet, and that is the code that is used to define the styles or what we see on the front end of a website. We're going to be talking mostly about CSS today, and while I'm not going to teach you CSS, I'll be referring to it quite a bit. So there are three basic types of CSS code, external CSS, which in WordPress, we know to be the style.css file within your theme. Embedded or internal CSS would be code that you could put into the head section of your code that would apply to that specific web page. And then inline, which we try to use sparingly when we're developing, is code that you actually put inside the HTML to define the styles. So it's not a separate style sheet. Here's an example of that. And the syntax, I'm not really good when I'm speaking about CSS, about using the right terms, because there are a lot of different terms that apply to CSS. The selector is the element that you are defining, so an H1 tag or a P tag or an A tag, where it can get very long. They can be nested within each other. And then the declaration is what follows that inside of the curly braces. So the property would be something like color or font size or font style or position. There are millions, hundreds of them. And then blue would be, in this case, the value whatever you're defining that property with, the rule that you're setting. So in order to use the inspector, you can achieve it in Chrome in a few different ways. You can simply right click and click inspect. You can use the menu bar. You can also use the Chrome extension menu over on the far right hand side, or you can use a keyboard shortcut of command shift C on a Mac. Okay, so now is the fun time where we can play a little bit. First, I want to just reference that W3 schools has some excellent tutorials and certifications that you can do to learn CSS, improve your CSS skills, or even just reference different CSS properties. For example, you know, I can never remember exactly how to type out the property for a filter or gradient. You can look that up in these references and they'll be on the last slide. Okay, so here we have a window a little bit smaller. The Washington Post. So you can play with the inspector on any website. It doesn't have to be one that you manage or that you have access to. So I thought it would be fun to take a look at the Washington Post as an example. So if I right click and click inspect, you see the inspector opens up. Over here, these three dots, I can choose where I want to dock that, whether it's on the right hand side, the left hand side, the bottom or a separate window. I prefer to have it at the bottom. And then you can see all the different tabs that are available to do different things and inspect different things. We're going to mostly be using the elements tab. The console tab is really helpful for debugging. So the inspector is can be a great tool for finding errors on your site. And over here, you can see that it's identifying for me on this page that there are two errors and 19 warnings. So if I click on console, I can see what those errors and warnings are and try to fix them. This is really helpful if you have a site that you've switched over to HTTPS and you're seeing that it's insecure. And you'll see this little red bubble pop up over here. And when you open up the console, you'll be able to see perhaps you have an image that's not loading over HTTPS. And that'll help you identify what that image is. So you can either reload it or you can use a plugin like fix insecure content to load that over HTTPS and make that error go away. The sources tab will show us the sources of the files that are applying to that web page. That would be right here. So we can see here all of the directories that apply to this page. I'm not going to talk about these others very much. Network has an option I'll talk about in a few minutes, but there's a disable cache there, which is super helpful to know. And I can tell you from practicing this talk, it can save you a couple of hours of time. If you've ever dealt with caching and know that you can really get frustrated when you're not seeing changes, this is a really helpful box to check. Audits is a fairly new addition to inspector. And if you run it, it will actually show you different metrics and evaluate your website based on those metrics like speed and accessibility. So that's a cool thing to know as well. But we're going to be looking at elements as I said. And we're going to play with this a little bit. It's a super fun way to learn CSS. So if I either use this tool here to highlight over different sections, or if I right click on a section, you can see that as I scroll through here, it shows me, it highlights over here what HTML elements I am focusing on. So if I right click on this democracy dies in the darkness, it shows me here what class I'm in. And over here, it shows me the code for that. Since it's a link, there's an A version of it. Am I making sense to everybody? I just want to make sure we're all on the same code, basic code level. Yeah. Okay, so over here, these three little dots, you can choose to make it to anchor it at the bottom over here. So yours may be on the side. Sure. Okay, so here I am on this link that says democracy dies in the darkness. Let's say I want to change that color of that and make it red. So I've just made that red. And let's say I want to maybe make the font a little bit bigger. You can make that font bigger. And let's say I even want to change the HTML. And I want to change this. So you can really play up here. No, you can't. Of course, you can't commit them to the Washington Post. We would, we would do a lot of damage right now if we did that. But it can be kind of fun, you could take a screenshot and send it to your friends, right? But what it's really helpful is if you are a designer, or if you're working with a designer and you're a developer, and they send you their design file. And it looks great in their Photoshop or their sketch file. And then they see it live in the browser. And they're like, I really think that font should be a little bit bigger. So you're the developer. So that it was 18 pixels in their first spec. So you make it 18 pixels. And they said it should be a little bit bigger. So you make it 20 pixels. And they say, No, I think it should be a little bit bigger. So you make it 22 pixels. I think it should be a little bit smaller. So you go back and forth back and forth. Well, if your designer can do this, they can view it and see exactly the size they want, and tell you, and you avoid that back and forth. So it's really helpful if you're a designer to know how to use the inspector for this reason for CSS. Anybody have any questions about that? Okay. So that's the site that we don't have any control over. Yeah. Yes. Yes, it will be. Yes. And we'll yeah, I'm going to show you some how the cache really applies when we're actually making edits to our code, which we'll do now. Okay, so I'm going to get out of the Washington Post. And we're going to look at a site that I have in local by flywheel. So if anybody uses local by flywheel, it's a great local development environment. It's super easy to spin up and use. And it the file structure, if you look inside your finder, you can go into your local sites, find that site, go down through your files, go into WP content and go to your themes and then find your theme and then find your style CSS. You can then open that in a text editor. I built a child theme of 2017 just for this demonstration. Does everybody know what a child theme is? Yes, child theme. Anybody not know what a child theme is? Okay, a child theme is a customization of a theme that you are using that allows you to edit the CSS in your own style sheet without impacting that parent theme, which might get overwritten. So if they push an update to the theme and you've edited the CSS within that particular theme. So if I went into 2017, went into the style CSS and changed the font size. If they push an update, it's going to overwrite that and it'll mess up everything I've customized. Yeah. So you put some code inside of the CSS style sheet that you make and there are lots of tutorials on making child themes. So I'm going to be talking about child themes because I'm using a style.CSS file, but there are other ways if you don't build a child theme to edit your CSS. And I'll talk about that as well. Okay. So I have found my, I have my style sheet here. Here it is in my text editor. So you can see up here, this is where it's telling the browser that the parent is 2017. So that makes it a child theme. So here's my code. Here's my site. And let's play with this a little bit and see what we can do with the inspector. So I'm going to inspect this. And let's say I want to change the font size here. Okay. Because I'm using a local environment, a really cool thing that you can do is go and add your folder to the workspace, which basically means you get version control and you can do live editing into your style sheet on your local computer without having to copy and paste. So that's what we're going to be doing here. If you don't work in a local environment, what you can do is take your edits into your style sheet, copy them and paste them into the customizer CSS. So if we go into, well, here we'll use this site as an example. If we go into customizer, there's this section here that's additional CSS. And here we can paste in some CSS edits that we'll be trying out in the inspector. We can paste them into here and they'll then save them and they'll apply to our website without impacting the parent theme. There are also plugins that will let you do this like simple CSS. So the reason for using the customizer or the plugin is if you're not customizing your style sheet, but you still want to affect the design of the theme that you're using, that's a way to do that without risking them being overwritten. Does that make sense to everyone? Did I explain that the right way? Okay, cool. Yeah, here I am in WordPress. So this is the cus, yeah, this is in the customizer most themes have the opportunity to edit your CSS through this customizer. But I'm going to be focusing on actually editing your style sheet. This will, correct, this what I'm doing right now will overwrite it on your local environment and then you can push. Yes, whatever, yes, whatever style sheet I'm going to connect. So what I'm going to do here is I'm going into the sources and I'm clicking over here on file system and where it says add folder to workspace. And then I'm going to go find that local by flywheel site. And I'm going to find that folder. And here, here's that inspector theme folder. And it says up here, do you want to allow access to that file? And yes, I do. And look here, little green dot shows up and here's my style sheet. So let's go into this and into this website here and let's click on this element. And here we have an h3. Let's change the color. Okay, so when you're using the inspector over here, there's an option if you hover over here where you can actually insert a style or change colors or do things like that. I can add a text shadow if I want to add a little bit of a text shadow there. You can see what happens when I do that. You can see that change. I can change the color. And you can click on the little color box and an actual eyedropper will show up and you can change the color here however you want to. So let's change that to pink. Let's maybe make that not bold. Okay, so I've made these couple of changes. If we go to the sources, we should see right here the changes are we seeing them or not. You should see them here. H3. Caching. See over here what says version. Let's make sure my caching is off. Let's save that. I just took those off. Sorry, here we go. Change that. Let's change this to 400. And there, we can see them in the sources now that those changes are there. Now, if I refresh my page, you can see that changed. And if I go to my text editor, and I go down to H3, you can see it saved it on my local server. It changed that color. It changed the font weight. Does that make sense? Yeah. I totally can, but then I can't really see it happening live. So this is how you can really become a designer on the fly a little bit, but it's also how you can learn CSS because you can see the changes that you're making. When you are editing, these are very simple selectors that I'm using. They're not nested at all. So this is just an H3. If you're using a page builder or something that has a lot of dibs within dibs and classes and multiple classes that are nested together, then it becomes a little bit more complicated. So if I inspect this site, which is using Beaver Builder, you can see here the selector is pretty extensive, right? It's got a lot to it. And it can get really hard. So it's helpful to do it this way rather than doing it sort of blind in your style sheet because you can make sure that you're impacting the correct selector. So working with a page builder like Beaver Builder can make this a little bit more tricky. And it can also, oftentimes, does anybody know what exclamation point important does when you put that in your CSS? It overwrites everything. So the cascading style sheet, I don't know if I mentioned this. The cascading style sheet, the way that a CSS works, is that the code that's at the bottom is what the browser reads last and that's what ultimately creates the style on your page. So sort of if you think about a river flowing down and going through lots of stones and at the bottom the last stones dictate the direction of the water, that's sort of how the idea of the cascade. So when you use exclamation point important, it will overwrite that cascade and sometimes it's necessary to do that if you've spent a really long time trying to dig and find the exact selector that you want. If you use important, it's a way to bypass that discovery process. It's not the most ideal way to code. I'll oftentimes use that when I'm just kind of experimenting with things and I want to show a client something. I'll use important until I know that's what they want and then I might spend the time digging. How many people here use a page builder like Beaver Builder? Anybody? Okay, not too many of you. So I won't get into too much detail but when you are using a page builder, you'll see that there are these really long nested selectors and it can be helpful to copy that and paste it into your text editor and sort of break it apart. Using the inspector is a great way to understand the structure of your web page because you can click into each of these little arrows. You can go down and down, dig down to get to the final element. You can also view different states. Hover state, active state. So if I click on something that would have a link like this up here is a link. So if I click on this, I can see over here and see here is the hover. You can click this and it will show you what it looks like in the hover state and here we can see that that's the hover. So maybe I want to change the color of that to pink. Oops, and it'll tell you if you make a typo and that's not working. So here's an example of digging in until you find what exactly here is overriding that. I mean something's overriding it, right? Yep. The other thing you can do with the inspector is you can view different screen sizes. So if you click on this here, it allows you to toggle to all different sizes. So you can view it on different devices, Galaxy, iPhone. You can also just experiment here with different break points. Does everybody know what media queries are? So media queries allow you to control or edit the styles of your web page on different screen sizes. So now in the days of responsive design it's really important to pay attention to what your website looks like on different devices, especially on a phone. So it's great to be able to look at your site and decide if there's something that you want to change. Perhaps I can look at this asset here. Maybe I want to do something different with that and not have it cover the area or have the position be different or the size be different or you might want to make the type bigger or smaller on the mobile view. You can also view it landscape or portrait. Does anybody have any questions? Does it make sense? So there are some cheats. It's great to understand and learn CSS using the inspector but there's a great extension for Chrome which is called visual inspector by Canva. Canva's split actually and here's what that looks like. So when you use that it's very similar to the Chrome inspector but it sort of lets you cheat a little bit. So you can look at what colors are on the site. This is helpful whether you're editing CSS or not. You can look at the type faces that are on your site and you can use the inspector here. So we can inspect this here and we can change things from sort of just a it's a very simple user interface. It's called visual inspector by canvas flip. So once you change something here let's change this to a different font. It's letting me choose from all kinds of Google fonts which gets into a whole another thing. When you're using Google fonts you need to load them in your style sheet. This one I know is already loaded. So we can change the color and do all of these things click done and then when we click on this little code it shows me what I've changed. So I can copy that and I can paste it into my style sheet. I can paste it into the customizer but however I'm editing my CSS I can use that. So this is sort of a I would say it's sort of cheating. It's better to learn how to use the inspector the way I've been showing you but once you've done that or if you don't want to do that this is another option. You can still learn CSS this way it's just not as I think it's it's not as helpful. And then there is also a plugin that I've recently read about and I haven't tried it but I looked at it and it's called MicroThemer. So it's a plugin that does basically what that inspector does but it does even more I believe so you might look into that as well. Okay so I'm going to put these slides online. There are a bunch of resources here. There are links to the W3 school CSS tools if you want to enhance your CSS skills. And then the two things I just mentioned can just flip and the the theme plugin. CSS plugin. Okay does anybody have any questions? Yes. Yeah. You do not. You do not. Local by flywheel is free. You can just Google it and you can download it. They do push updates fairly regularly to it as well. And if you do use flywheel it does sync to your live site so it's a very easy process to use. So I highly recommend local by flywheel. Yep. Okay. There are many in that category. Yeah. I've had some issues with it. It runs virtual box and so oftentimes if you've done an update on your operating system you have to reinstall virtual box. So you might try you might try their support which is which is good but you can maybe try deleting it and reinstalling it and then check your virtual box version. Yep. Oh. When you just showed can this flip. Yeah. Yeah. Oh good. Awesome. I'm so glad. Thanks for saying that. Good. Good. And it's free. And if you use sketch actually it has a complement with sketch the design plug and I don't know if that's what you use. It connects with sketch so yeah. Yeah. Yes. Yes. So it works with sketch I think similar to how Envision works with sketch so you can push back and forth. Push and pull. Yeah. Anybody else? Anybody want me to play with anything? Anybody have a site they're trying to find some CSS selectors on? All right well thank you very much. If you have any other questions I will go hang out at the happiness bar for a little bit and be happy to answer questions or help you dig into your CSS code with the inspector on any sites you are working on. Thank you so much.