2.2 Indent Guides

Hello and welcome back. When you're working with large HTML files, or large code files, sometimes it can get a little confusing or difficult to keep track of where you are in that file. For example, if we're looking at this HTML file, let's take our container here. Usually this type of container will have a lot more content in it, and it will quickly become difficult to tell which closing tags belong to which opening tags. Now brackets does help us out here a little bit, if we click on a closing tag it will highlight the opening tag for us. But if you just sit back and look at all of our closing tags, especially once it gets a little more complicated than this, then it can be a little bit difficult to keep track of that. So I wanna take a look at an extension called indent guides. And this is really gonna make it a lot easier to tell which closing tags go with which opening tags. And this will be the same thing in code files. It will help you to know which closing curly brackets go with which opening curly brackets. So let's jump over to our extensions manager, and I'm gonna do a search for indent. And yeah, it's the first one that shows up, Indent Guides by Lance Campbell. So, as always, you can click on more info to view the website related to this. Or we can just click on Install, and there we go, so it's installed, and we can immediately notice a difference here. We now see that we have these vertical lines here indicating where an opening div connects to its closing div. So we can very easily sit back and look at this, and it becomes a lot easier to read, and to keep track of where things open and where things close. So this is a really simple plug in, it doesn't do a whole lot for us, but it's a nice little touch. So thank you for watching, and I'll see you in the next lesson.