FREELessons: 11Length: 32 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.1 Emmet

The Emmet extension for Brackets, if you take the time to learn it, provides wonderful shorthand snippets for quickly coding in HTML and CSS. In this lesson, I will install Emmet and walk you through some of the basics of how to use it.

Related Links

2.1 Emmet

Hello, and welcome back. In this lesson, we're gonna take a look at our first extension, and this extension is called Emmet. And this will, by far, be the most complex extension that we talked about in the short course. For the most part, the rest of the extension are design to do one, or two things Really well, but this extension in particular is a must have because it really allows you to code a lot quicker in HTML and CSS. And if you've ever heard of Zen Coding, you might have heard me mention zen coding in other video courses. And this is basically a descendant of Zen Coding, this is the latest and greatest. And it allows you to use shorthand in order to create large chunks of HTML code. So in our Extensions Manager, in brackets I'm gonna do a search for Emmet, it's two m's and one t and there we go. So you can click here to install, but before we do that I'm gonna click on the More Info tab, and that will take us to the Emmet website Emmet.io. And the first link you can see here on the left is for the documentation. And I wanna click on that. There's a lot that Emmet can do, so we don't really have time to cover it all, since we're just doing a very brief overview of it in this lesson. So it's important to understand where this documentation is, where you can go to find help, and where you can go to figure out what else you can do with Emmet. Because there's a lot more that it can do beyond what I'm gonna show you in this video. So there's a little demo here you can watch if you want to. And then over here on the left you can see all of the topics that outline the Emmet documentation. And if we go down towards the bottom, you'll also see this nice cheat sheet link. So if you want to learn Emmet, I highly suggest printing out this cheat sheet, I'll just click on it there. You can print it out as a PDF, or you can just look at it here in HTML. And this will give you a cheat sheet of a lot of the things that you can do with Emmet. So if you see me using Zen Coding in the past, you've probably seen something like this. So in HTML, the way this works is you type in the name of the element you want, with a greater than sign if you want to also put child elements inside that. So if you want an unordered list inside your Nav element, you'd do Nav greater than UL, and if you want a list item inside of that, you would do greater than list item. And then down here you see the code that it would actually output. So when you're using Emmet in brackets, what you would do is you would type out whatever this shorthand is that you want, and then hit tab. And when you hit tab it will fill out the HTML for you. So, again, I want you to get familiar with this cheat sheet, if you plan on using Emmet, because it will help you out a lot. And so, again, I would advise printing this out, putting it on the wall right next to your desk so that you can have that as a handy reference. So let's jump back into brackets and I'm going to install this extension. Once it's installed, we'll click on Close and then we'll close again. So initially, nothing fancy happens except that you'll see a new drop-down menu here called Emmet. And it shows you some keyboard shortcuts for a few of the things that you can do with Emmet. Now we're not gonna talk about any of these, you can find more information on what these do in the documentation. What I wanna focus on is the shorthand coding that you can use within Emmet. So my favorite init shorthand is simply the HTML5 shorthand. And the way that works is we simply type html:5 and then we'll hit Tab, and as you can see it fills out the skeleton of an HTML5 document for us, including the doc type, the HTML tags, the head tags, the body tags, etc. And you'll see that the text inside the title tag is already highlighted so we can insert our title right away. So, let's take a look at some of the short cuts that we can use inside the body of our HTML document. So if all you wanna do is to create a simple element in HTML, you can just type in the name of the element, let's say it's an h1, and then hit Tab and that will create the opening and closing tags for you and then you can just type in your text here. Similarly, if we just wanted a paragraph we're just gonna type in p and then hit Tab and it will fill that out for us. Also if you like to use Lorem Ipsum text as placeholder text while you're waiting on the actual text for the website, then you can just type in the word Lorem here L-O-R-E-M, and then hit Tab, and you'll see that it fills that paragraph with Lorem text. Now we can also do that all at once by typing p and then the greater than sign and then Lorem, and then we'll hit Tab and it fills it out again. And you'll notice that the text is slightly different every time. The first sentence, I believe, is always the same, but after that, it's a little bit more randomized. So let's say we wanted to get a little more complex with this. Let's say we wanted an unordered list, so we'll type UL here. And then inside that list, we want a list item, so we would type in greater than LI, but we don't want just the one list item, we want five list items. So, we're simply gonna multiply that LI by five. So, if we do LI *5 or times five and then hit Tab, you'll see it creates an unordered list for us. And inside that unordered list it gives us five list items and it puts our cursor between the opening and closing tag for the first list item. Now, I'm gonna hit Undo because we can go a little further with this. We can add IDs and classes to our element. So if we wanted our unordered list to have an ID we would simply type UL and then the pound sign notice there's no spaces here. So we'll do ul the pound sign and then the name of the ID. I don't know we'll just call it my list. And then, inside that, we can do the greater than sign. And then we could do our list items, and if we want all of our list items to have a certain class, we could give it a class name here. So we can type, dot, and then the class name we want. So I dunno, let's just say, item, for now. And then we'll do times 5. So we filled all of that out, and now we hit Tab, and there we go. So as you can see, it does a lot for us that adds a lot of IEDs and classes. It's a very, very flexible system. If we wanted to take this one step further, I'm gonna hit Ctrl+Z to undo that again. Let's say that we wanted to have item one, item two, item three, etc. All we need to do is to add a little dollar sign to the end of the class name there. And then when we go to the end make sure first of all that before you hit Tab that you go to the very end of the line here. If I were to go right here and hit Tab right after my list then it would only create that unordered list and the rest of this would just stay as plain text. So if you make any edits to this, before you hit Tab make sure you go to the very end of the line, then hit tab and there we go. So you'll see that by adding that dollar sign to the end of the class name, it numbered those items for us. We can even add digits to that. So if we want all this to be three digits, such as item 001 then we can do that, let's hit Ctrl+Z to undo. And it's as easy as just adding three dollar signs instead of one, and then it will always be a three digit number. So if we go back to the end of that line and hit Tab. There we go. We have item 001 and 002, etc. So again, this is a very flexible system for quickly entering in HTML code. And if you take the time to learn this and get fluent with it then you'll be surprised at how quickly you can spit out HTML code. So let's say we wanted to get a little more advanced than this. Let's say that we are working with Bootstrap, and we wanted to use some Bootstrap classes here. So we have a div with a class of containers. We'll say div.container. And then inside that div we need a row, right. So we need a div with a class of row. And then inside that row we need a column. So let's say we have a div, with a class of, let's just make this a full width column, just for the sake of illustration here. So we'll say col-xs-12. And that'll give us a full width column. And let's say that inside that column, we wanted a H1 tag and then a paragraph. So, we'll do another greater than sign and we'll do an H1. Now, we're not going to do a greater than sign again. If we were to do greater than p then it will put a paragraph inside the h1 and that's not what we want. We want the paragraph to go after the h1. So instead of a greater than sign here we're gonna use the + sign so h1 + p and the will put the paragraph after the h1. Then if we wanted an ordered list with five list items then it after that paragraph we would do another + sign. Then we can do ul and we can even add an ID for it if we wanted to so let's just call it list two. And then inside that we can do a list item so LI dot, and then let's do the same thing we did before. Item and then the dollar sign here so that it will enumerate them. In fact, I'll use two dollar signs, just to show that we can do two places here instead of one or three. And there we go, so let's hit Tab, and you'll see that it fills that out for us. Now let's undo that, what if we wanted multiple list items here? Let's do the times five, and then Tab, and there we go. So again, this is a very flexible system for very quickly creating HTML. And there are also plenty of short hands for using this with CSS as well. And we don't really have time to cover that but it's all there in the documentation. So thank you for watching and I'll see you in the next lesson

Back to the top