Emmet - The Essential Toolkit For Web Developers
Playing
01. Emmet - The Essential Toolkit For Web Developers

Episodes

0%
Your progress
  • Total: 23m
  • Played: 0m
  • Remaining: 23m
Join or sign in to track your progress

Transcript

00:00
In this video, we're going to look at Emmet, which is described here
00:03
as the essential toolkit for web developers. And I'm going to show you a couple of bits that Emmet does that allows you to really speed up your workflow. Now, just before we start looking at some of the syntax,
00:16
you're going to want to go ahead and download it. If you want to follow along for your text editor, you can see it supports a lot of text editors here. The one that you use is likely going to be here.
00:28
It's also available for some online services, and there's third-party support here as well. Now, I'm going to be using Sublime Text to demonstrate this, quite a popular text editor.
00:38
But obviously, go ahead and download it for your text editor if you want to go ahead and play around. So this is Emmet. Now, everything I'm going to show you
00:48
is actually in the documentation. So after you finish watching this video, if you need to find anything more specific, just head over to the documentation.
00:56
There's a really good cheat sheet as well. You can just find out how to do certain things. Now, I've installed Emmet for Sublime using Package Manager, so extremely easy to install.
01:08
And I have certain key bindings. Now, to expand a shortcut or syntax that then will give you HTML, and if you have no idea what I'm talking about, you will find out in a moment, I'm going to use the Tab key.
01:25
Or I can hit Control and E. So for example, let's just start off with a really basic example. Let's say div, for example.
01:34
I hit Tab, and that gives me an opening and a closing div tag. Now, that might be fairly straightforward, but there are a lot more complicated examples. And throughout this video, we are
01:44
going to look at some real life examples, for example, quickly marking up forms and other things as well. So let's take a look at getting a page started, first of all. It's likely that you're going to be using an HTML5 doc type.
02:01
Now, what you can do is just use the HTML colon 5 shortcut. I'm going to tab that out, and you can see this has generated me a document layout. The only thing that I tend to change here
02:14
is I just indent all of that, and that's it. We have done, we've sort of created a document layout. Saves you a lot of time. If you wanted to sort of create this excluding the actual doc
02:27
type itself, say you wanted to put something else in there, you can just use the doc shortcut, and that will just give you that. So doc or HTML5.
02:37
There are HTML4 options, but I'm not going to be looking at that. There's no point. So Emmet works with a kind of CSS selector syntax.
02:46
So if you do know CSS, you'll be able to sort of get started with this really easily. So for example, I'm going to say nav. Now, within this, as a child element, I'm going to say ul.
03:00
And then within this again, as a child element, I'm going to say li, and I'm going to tab that out. Now, you can see that I've created nav, ul, and then an li in there already.
03:11
So we get to the stage where probably we obviously can hit Command-Shift-D in Sublime to actually duplicate this li. But what if I want to actually utilize Emmet to do this for me?
03:27
Well, we can do this. We use the multipliers, the asterisks. And then we give a number of times we want to multiply this particular element.
03:36
So if I tab that out, we get five li's. Really, really straightforward. And the cursor is automatically placed in the first li, so I can start typing whatever I want.
03:46
Now, talking of anchors, we could actually do the same thing, really. We could just say that a, and there we go. We have an anchor within it.
03:55
And we'll look at a little bit more anchors a bit later. So with classes, there's likely going to be a point where you perhaps want a nav with a class of something.
04:07
That's easy. We just use the same kind of syntax we'd use for CSS. So for example, a nav with a class of box, tab that out. And that automatically creates the class attribute
04:17
with the box class in there. Now, let's go back to our earlier example of list items. Say we want five list items. And these list items, we want to have a class of item.
04:31
That's it. We just tab that out. And we get the exact same thing, or the thing that we expect. Now, bear in mind that one, this is just
04:40
a sort of side note. When you are expanding these, you're going to want the cursor to be at the very end of the line. Look what happens if I press Tab here.
04:51
That's going to expand all of that. Then it's going to leave the rest of what I've typed unexpanded. So you're going to need to make sure that you're at the end.
04:59
In Sublime, I can just hit Command and Right. And that puts me to the end of it. I can hit Tab. And there we go.
05:05
We've created that markup. So we can already see how easy this is. Now, for multiple classes, it's easy. You just literally chain them on.
05:14
So I'm going to say item. And I'm just going to say another hyphen class, end of the line. And we tab that out.
05:21
And you can see that's created me another class in there. Really, really, really easy. Now, I'm going to talk about text within these elements. So let's say we want to, let's get rid of this.
05:34
And let's say we want a navigation, or a nav element with a ul and li. We want to give these a class of item. And let's say we want five of them.
05:45
We know that this works. What I can then do is then I can use the curly brackets to define within here the text I want within this element, basically.
05:57
I'm going to need this just here. Multiply should always be on the end. So I can just say item. Let's expand this out.
06:05
And there we go. That text has now been placed within that list item. So more appropriately, you would probably have a anchor in here. So you would have an anchor.
06:15
Now, an anchor will automatically give you an href. But in here, I'm going to say link. And then I'm going to say I want that to be, sorry, I want the list item to be five.
06:26
And then within each of them, I want there to be an anchor with the text of link. There we go. Fairly straightforward.
06:34
So numbering. Now, let's say you want to say item one, item two, item three. You might say, well, I'm going to generate a list item with a class of item.
06:48
And then I'm going to have that multiplied by five. And then within that, I'm going to have a anchor with link. And I could say link one, expand that out. And then I could come over here and I could say link two,
07:01
link three, link four, link five. And maybe I want these to be item one, two, three, four, and five as well. Already spending too much time, Emmet
07:10
has functionality to allow you to do this automatically. And we use the dollar for that. So we just write dollar on its own. We can also integrate this within classes and IDs as well.
07:21
So for example, item dollar will give me item one, two, three, four. And there we go. Simple as that.
07:28
So we just use a dollar in place of where we want to count. Now, you can count backwards and you can chop and change the numbers or the ordering of the numbers. Go ahead and check out the documentation
07:38
to find more out about that. OK, so just very briefly, we'll touch on IDs. You've probably already guessed, since you maybe know CSS, we can actually use a hash if we want an ID.
07:53
So obviously in this case, we wouldn't multiply IDs in here. So I'm going to get rid of this. And I'm going to say, well, I want a navigation. And I want this to have a ID of main, for example.
08:05
Then within this, I want an unordered list. I want list items, say I want five of them. And within that, I want an anchor with a text of link. Expand that out, and we get the following.
08:16
So we've added our ID of main up here with the rest of what we needed to. So classes are obviously a dot notation. IDs are a hash, like so.
08:28
OK, so now talking a little bit about attributes, let's say we want to generate an anchor. An anchor on its own will look like that. It will automatically give us the href attribute.
08:39
So we can just start typing away sign-in.php or whatever you want to do. But what we can actually do is we can explicitly define the attributes that we want
08:49
to give to particular elements. So for example, let's say I want to just write this out. And I want to apply an attribute. All I use is similar, a CSS type selector.
09:03
And I'm going to say href, and I'm going to say sign-in. And we're going to expand that out, and we get the following. Perfect. And then obviously onto this, we can add sign-in.
09:17
And we could even go ahead and just add a sign-in to that, like so. There we go. So from that, we have quickly generated
09:28
this following markup, which would take us a little bit longer to write. So we've looked now at some of the basics. Now sometimes things will get a little bit tricky.
09:39
Now let's take a look at an example. We'll just create an unordered list and a list item. And we'll call these item. So we basically have this.
09:48
And let's generate five of these, say. Now what happens if we want to add an anchor at the end of this unordered list? Now we haven't looked at this yet,
10:00
but we can use the plus to create an element adjacent to this. Now the only problem is what this is going to do is it's going to add an anchor adjacent to the last li,
10:11
because we are following on from the li. Now there is another way we can remedy this later, but we're going to look at grouping here in particular. So you can see now that's a problem.
10:19
I wanted the anchor to appear after the unordered list. So what we do is, there is another way to do this, but what I'm actually going to do is wrap this entire thing in parentheses.
10:32
And then after that, I'm going to add the anchor. And you can see there that grouping has now helped to separate them two items. And it really is just a case of working out
10:42
how best this would work for you. I can't give too many examples, because it would just be silly. But just whatever makes sense. It's sort of like mathematics.
10:53
OK, so let's look at quite a fairly long example now, just so we can sort of get to grips with what we've looked at so far. So what we're going to do is we're going to create a header,
11:03
and that's going to have a navigation within it. So a header element with a navigation within that. We're going to give that navigation a ID of main. We're going to have an unordered list.
11:14
List items with item one, item two, item three for both the attribute and the text within it. And we're going to have five of them. And then after that, we're going to have an aside element
11:25
with a ID of user. Within that, we're going to have two anchors, one for signing in and one for account area or something like that. So let's take a look at how we would do this.
11:37
So the first thing we want to do is header. This is just a normal HTML attribute, so it just expands to that tag. It could literally be for anything at all.
11:45
We can expand cat if we wanted to, if that was a valid element. So we're going to have a header. And I'm just going to put these in brackets just
11:53
to separate this out. So we're going to have a nav. This is going to have an ID of main. Within this, we're going to have an unordered list.
12:00
And we're going to have a list of list items with a class of item with a number. And then the text for this is going to be item, and then that followed by that number.
12:12
And we're going to have five of these. Now after that, and I'm going to group these as well just for readability, we're going to have an aside element. And that's going to have a hash of an ID of user.
12:23
Now within that, we're going to have two anchors. So we need a plus a. Now we can start to set specific attributes. So for example, the first one might be sign out.
12:33
And the second one might have an href of account area or something like that. And this is going to have the text of account. And the sign out link is going to have the text of sign out.
12:47
So let's expand this. And there we go. Look at all that markup that we've just generated with that one small line.
12:53
We've got a list of menu items. After that, we have an aside element. Inside, we've got an anchor, or two anchors rather, one going through to sign out with sign out text,
13:02
one going through to account with account text. And that's got an ID of user, and that's got an ID of main. Really, really quick and simple. Switching between these, you can see how much time
13:12
this is going to save you if you are writing out lots of markup. And once you get quick at using this as well, this is going to save you even more time. So now we're going to look at implied attributes.
13:24
We've already seen a few of these. What I mean by this is attributes that pretty much are standard on elements that you create. So we've already seen it for anchor.
13:33
We know that an anchor is always really going to have an href. It's always going to go somewhere. And the same with link as well. Link isn't much use without a rel attribute.
13:44
In this case, it's a style sheet. And then I could just link in a style sheet. Easy peasy. So in my head, I could just say link, expand that out,
13:52
and then I can link through to my style sheet. Easy. Another one is the image tag, which is quite interesting because an image is going to have a source,
14:01
and it always should have an alternate text in case that image can't be rendered, or for accessibility if it can't be seen. Now the same with text area.
14:11
This does give us some, in my opinion, unnecessary attributes like cols and rows. You might not necessarily need these. It also gives you an ID as well, which
14:20
is pretty standard for inputs because you might always want to give an ID if you have a label that points to this. And this is a really good point as well, actually. If we did actually expand out label,
14:32
you can see this has a for. So for example, if you were creating a text area, you'd expand this out. You'd give this a name.
14:38
So for example, body. You'd give this an ID. For example, body. And what you could then do is you could create a label,
14:44
and then you could just say body. There we go. We've already created all that markup. Although we haven't done it all in one go,
14:50
we've created that markup pretty straightforward. OK, so they're implied attributes, and you'll find that they come with a lot of the elements that are expanded with Emmet.
15:01
Now moving on to something a little bit more, not complicated, but something that's a little bit more boring in terms of creating these are forms.
15:09
We've got a couple of form helpers. We're, in fact, quite a few form helpers that help us build out forms. So for example, you would expect form
15:18
to be expanded something like this with an action. But you would then have to add the method as well. Of course, you could do something like method post like so and expand that out.
15:31
That's absolutely fine. But there are aliases or shortcuts for this. So for example, I could say form get like that, or I could say form post like that.
15:42
Easy. And you can just fill in the action, or you could add the action in like this, like that. Oops.
15:49
Remember, go to the end. And there we go. OK, so let's look at input types now. We'll see that we have input.
15:56
We know that that's right. By default, this will say we'll assume a type of text, which is fair enough because most inputs will probably be type of text.
16:08
It's probably the most common. But you can obviously do things like input radio. You could do input text if you wanted to specifically define that.
16:18
And this gives you a name and an ID attribute, again, which is really useful. You could also do something like password. And we do have aliases for these as well.
16:27
If you are really in so much of a hurry, you can just do input T, input P. You could do input R, really, or input C for a checkbox. It's really, really that quick.
16:40
So let's look at a full example of creating a form that goes through to signin.php. We're going to create a couple of elements like form fields. And in these, we're going to have labels.
16:51
And then we're going to have inputs. And then at the end, we're going to have a Submit button. So we start off with a form. And we want this to be a post method.
17:02
Now, we're going to give this a class of form. So we can combine this with classes as well. And we want this to go through to sign or forward slash sign in.
17:12
It can be anything. Now, within this, let's just group this as well. So we're going into the element now. Remember, if we do something like that,
17:20
this will be placed within the element. So we're going to go into the element. And we're going to create a div with a form field. So here, we're basically assuming
17:27
that this is going to be a div. So we just do .form field for the class. Now, inside of this form field, we're going to have a label. And that label is going to be for the username.
17:38
So now, let's create the username. Oh, actually, we need to do the text first. So I'm going to say Enter Your Username. And after this, so plus, we want an input type of text.
17:52
And we want the name of this to be Username. We want the ID of this to be Username. So it matches the label that we've just created. Now, let's close this off.
18:03
After this, we're again going to group this. We want a form field, much like we had before. And inside of this, we want a label. And this label is going to be for the password.
18:17
So now, after this, we want to say Enter Your Password for the text. And then we can, after this, do an input of P. So remember, that's an alias for input password.
18:31
And here, we can say Name Password. And we can give this an ID as well. So we say ID Password. And then after this, we're going to come out of the brackets.
18:45
And we're going to say we want an input type of Submit. And we want the value of this to be Sign In. Great, so now, let's expand this out. We're missing a bracket just there.
18:58
So that's it. So if we double check, everything's fine. We've got a form. We've got a div here.
19:03
We can pull this down manually. Or you can use a plug-in to do this. So we've got a div with a class of form field, a label up here. And then we've got an input down here of text, name text, ID text.
19:14
And this is for this. And then down here, we've got another form field. So we've got a label within here. And then we've got an input type of password,
19:22
the name of password, ID of password as well. Looks good. And then we've got a submit. So when we go ahead and have a look at this, it looks like that.
19:30
Perfect. So there's a quick form example. Now, let's move on to something that no one likes creating. And that is tables.
19:41
Now, we're going to look at the benefit of climbing up the selection chain. And we're going to create a table with a T head and a T body. Now, the problem here, if we just start writing this out, a table with a class of tables, easy.
19:54
Table.table. We're going to go with this example. It's easy to create a T head within this. And then we're going to create TH element within this.
20:03
And in here, we're going to say head and then the number. And then we're going to multiply that by five. So here, we have a table with a T head and lots of headers within it, or five headers.
20:14
So that's going to look like that. That's fine. Now, the problem here is, where does the T body sit within our selector?
20:21
Because we want the T body to be down here. But in our selector, if we were to do something like, I don't know, T body like so, that just doesn't work, obviously. We could do T body with a plus, because that's sort of afterwards.
20:42
But now, you'll see the reason this doesn't work is because the last selector here is a TH. So we're saying that we want the T body after the TH. And obviously, we don't.
20:52
We want it after the T head. But we can't do plus T body there, because that's just going to mess everything up. So this is starting to get a little bit confusing now.
21:03
But we have the ability to climb up. Now, we use whatever character this is. And I don't know what it's called. But what we do is, we're basically saying here, skip this.
21:16
I want this to, I want whatever I'm, oops. I want whatever I'm doing after this, so T body, for example, to appear here after T head. So now, that sort of skipped one of the selectors in here.
21:32
So now, we're creating our T body. And we can just carry on as normal now. Now, what happens if we need to skip back more than one selector?
21:40
So for example, we could have, if we just get rid of all of this, we could have a TH. And then, we have maybe five of them. And there's an anchor within them saying head,
21:51
and then whatever the number is. So we've got that now. Now, this isn't going to work if we want to do the T body. So if we go back one, we've still
22:01
got a problem, because we are only skipping the A. And that's putting the T body after the TH. So we just multiply them. Simple as that.
22:10
There we go. Solved. So we can use multiple climbing. You can climb up as many times as you want,
22:16
up the selector chain, and that's it. So just to finish the example off, let's, under the T body, create a TR. We'll create five rows.
22:27
And then, within this, we have TDs. And we're going to say item dollar. And we obviously want five of these, so we do that. And there we go.
22:37
So we've now got, if we just check it out in the browser, the following. Very, very straightforward. And look at all that markup that has
22:43
been generated just from that. That's really, really handy. So we've looked at generating probably the most used elements.
22:53
There is so much more that you can do with Emmet. So I highly suggest you go and check it out. If you are a front-end developer, this is going to save you a lot of time.

Episode summary

In this episode, we're diving into Emmet, a must-have toolkit for web developers that seriously speeds up your HTML and CSS workflow. If you haven't already, you'll want to download and install Emmet on your favorite text editor (Sublime Text is used for the demo, but it supports most editors!).

The episode starts by showing off how Emmet turns shortcuts into full HTML (like typing div and hitting Tab to expand it), and then quickly moves to more powerful stuff. You'll see how to spin up whole page skeletons, create nested elements (like navs, lists, and items), add classes and IDs just like in CSS, and even generate repeating structures super quickly.

We look at how to add real content inside elements, use numbering with the dollar sign (think: creating item1, item2, etc.), and set custom attributes right from your Emmet abbreviation. The episode also covers handling multiple classes, implied attributes (like every <a> getting an href automatically), and working with common tags like images, forms, and textareas.

For more complex structures, like forms and tables, you'll learn grouping, sibling selectors, and a cool way to "climb up" the element chain to get your markup structure just right. Through some big real-world examples, including nav menus, logins, and tables, you'll see just how much markup you can blast out with just a few keystrokes.

All in, this episode runs through the most useful Emmet features and offers plenty of tips to become lightning-fast at writing markup. If you've ever felt like hand-coding basic HTML is a chore, Emmet will be your new best friend!

Episode discussion

No comments, yet. Be the first!