Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:11Length:33 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 HTML Snippets

In this lesson, I’ll demonstrate the HTML Snippets extension, which provides a comprehensive set of code snippets to help you save time when working with HTML.

Related Links

2.1 HTML Snippets

Hello, and welcome back. One of the things that we all try to get better at as front-end developers or designers is the speed with which we can code, especially when it comes to our HTML, because we spend a lot of time in the HTML window. And one way that we can quickly speed up our code is by learning something like Zen Coding, where, for example, you can easily create a list item by typing something like this. We typed in ul, which is the name of the element we want and then a greater than sign, and then li which would be the element inside the unordered list. And then if we want five of those list items, we can type *5. And then when we hit Tab, it fills it out. And then we can just go in and fill in each of those list items manually. So that's one way we can speed up our HTML development process. But another way we can do that in Visual Studio Code, as you might have guessed, is by using an extension. And this extension allows us to draw from any number of HTML Snippets that we can just throw in our code and move on. So if we jump to our extensions tab in Visual Studio Code, we can click on this tab in the upper right-hand corner to show all popular extensions. And a lot of the ones we'll be covering in this course are popular extensions. And you could either scroll through here to find it or you can just type in HTML and it should be one of the first ones that pops up. There we go, HTML Snippets. So we can click on that to get more information over here on the right. And you can spend some time reading all of this information, which gives you a lot of info on how to use the Snippets, how to use whatever plugin it is that you're looking at. It also gives you a rating. And you can see those ratings over here on the list as well. And these are user reviews, so those can be very helpful. If you see one that only has two stars, you might not wanna download it unless it just serves a very specific purpose for you. But again, you can read through all this read me information and when we get down to a certain part, it gives you the information on how to use this particular plugin. If we scroll down a little further, it will give us installation information and then some frequently asked questions. And so there's a lot of information there. But in order to install it, we can just click on the Install button when we first see that search result here. So we're gonna click on Install, and then we can click on Reload, and then it will reload the window and activate the extension. So now that we've got it installed, you'll notice there's these little settings icon here. We can click on that and you can choose to Disable just for this workspace or to always disable it or to uninstall it. So that's how you can manage it once you've installed it. But again, you can always come back here, click on the extension and look at all the information over here on the right. Now one thing I would advise on this plugin is that you don't wanna use this plugin if you do most of your coding in HTML using Zen Coding. Because there have been reports of odd behavior when it comes to using Zen Coding when you have this Snippets plugin installed. And as I demonstrate this plugin, you'll probably get a good idea of why that happens because they use similar methods for laying out your code. So once we've got this installed, we can click over here in the top left corner to see all of our files that we have open. And I've just got a folder open with some random HTML CSS JavaScript files. But to keep this simple, let's start from scratch. I'm gonna create a new file here. I'm just gonna call it test.html. And we're not going to include any of these files in a project files folder or anything like that because the point here isn't the files that we're creating. The point is simply just to demonstrate these plugins and what they can do for us. So for example, if you're creating a new HTML document, and you wanna use this Snippets plugin, all you really have to do is start typing and you'll see it in action. So for example, with our doc type declaration at the very top of the document, we can get to that with our Snippets plugin by simply typing doc, and you'll see that we have a kind of a suggestion. This is kind of like IntelliSense when you're using C#. So if we were to click on that, it would fill that out for us. Similarly, we can just start typing HTML, and we could select what we want here, and just hit Enter, and it will fill that out for us. So we could very quickly type head, and then below that, we could quickly type body, and then find what we want, and then just hit Enter to fill it out. Inside the body, we can do an h1, hit Enter, and you'll notice that the cursor goes right in between the opening and closing tags when we do that. It's just like when you use Zen Coding. The big difference between this and Zen Coding where some people might prefer this over Zen Coding is that with this you actually get a list of options once you start typing. With Zen Coding you have to know exactly what you're typing before you can get that Snippet to pop up. So again, we just type in header here, and then after that let's say we wanted an unordered list. We just type ul and our ul appears, we hit Enter and there we go. So you could still use this in conjunction with Zen Coding, but again, if you're a wiz with Zen Coding, if you know all the ins and outs of how to use Zen Coding and you use some of the more complicated things more often, then you might find the Snippets plugin getting in your way sometime. But if you're doing something simple like creating an unordered list with five list items inside it, we can do ul > li * 5, hit Tab, and it will still work. So the Zen Coding still works here, but again, if you're doing some of the more complicated things with Zen Coding, you might find it conflicting with this Snippets plugin sometime. But again, this Snippets plugin is just a very easy way to speed up your development process in HTML, because it gives you all these wonderful drop-downs as you're typing out your code. And again, the thing that this provides that Zen Coding doesn't is, for example, if we just type in the letter a, it gives us a drop-down of options here. And then once we find the option we want, let's say we want an article here, we just hit Enter and then we can move forward. So again, the HTML Snippets plugin is very easy to use. Once you plug it in, it automatically starts working as soon as you start typing in your HTML window. So thank you for watching, and I'll see you in the next lesson.

Back to the top