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.
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 if we were to click on that, it would fill that out for us. This is kind of like IntelliSense when you're using C#. 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. 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. The point is simply just to demonstrate these plugins and what they can do for us. 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. But to keep this simple, let's start from scratch. And I've just got a folder open with some random HTML CSS JavaScript files. 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 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. Because there have been reports of odd behavior when it comes to using Zen Coding when you have this Snippets plugin installed. 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. But again, you can always come back here, click on the extension and look at all the information over here on the right. So that's how you can manage it once you've installed it. 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 now that we've got it installed, you'll notice there's these little settings icon 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.
#Html snippets install
But in order to install it, we can just click on the Install button when we first see that search result here. And so there's a lot of information there. If we scroll down a little further, it will give us installation information and then some frequently asked questions.
#Html snippets how to
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.
#Html snippets download
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. And these are user reviews, so those can be very helpful. And you can see those ratings over here on the list as well. 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. So we can click on that to get more information over here on the right. 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. And a lot of the ones we'll be covering in this course are popular extensions. 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.
#Html snippets code
And this extension allows us to draw from any number of HTML Snippets that we can just throw in our code and move on. But another way we can do that in Visual Studio Code, as you might have guessed, is by using an extension. So that's one way we can speed up our HTML development process. And then we can just go in and fill in each of those list items manually. And then when we hit Tab, it fills it out. And then if we want five of those list items, we can type *5. 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 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. 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.
0 kommentar(er)
