Emmet Crash Course!

Hey fellow creators,

Let's boost your productivity with Emmet!

Originally, Emmet was an extension that's become so popular it's now been integrated into VS Code and other code editors. It's simply a shortcut extension that's very useful!

Let's learn the most useful shortcuts!

If you prefer to watch the video version, it's right here :

1. Create a div with a class.

The first and most used shortcut will be the dot. It will allow you to create a div with a class quickly. For instance, write .box and then press tab/enter on your keyboard, this will create the following line of code:

.box

<div class="box"></div>

By default, it will assume that you want a div.
You can also write div.box and then press tab/enter, which will do the same thing. But that means that you can also create another tag with a class, for instance li.box will create:

li.box

<li class="box"></li>

You can also create a div with multiple classes by writing for instance div.box.square.circle and then pressing tab/enter:

div.box.square.circle

<div class="box square circle"></div>

2. Create a div with an ID.

The way to create a div with an ID with Emmet is pretty similar, instead of a dot you simply need to use a hashtag. So write #myElement and press tab/enter and the following div will be created:

#myElement

<div id="myElement"></div>

You can also mix the class and the id by writing for instance :

div#id.box

<div id="id" class="box"></div>

3. How to create multiple divs at the same time?

In order to create a div with the same classname multiple times quicker than before, you can simply write .box*6 for instance, which will create six divs with the class name "box":

.box*6

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

4. You can add some text content!

If you already know what your tag's content will be, you can simply write it in between curly braces, for instance writing h1{Hello World} and pressing tab/enter will create:

h1{Hello World}

<h1>Hello World</h1>

5. Get the index.

In order to have an index, you can type h1{$}*6 and press tab/enter, which will create:

h1{$}*6

<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>

6. Play with the index in your classes!

By typing p.txt-${$}*6 and pressing tab/enter, you'll create an index with the same class:

p.txt-${$}*6

<p class="txt-1">1</p>
<p class="txt-2">2</p>
<p class="txt-3">3</p>
<p class="txt-4">4</p>
<p class="txt-5">5</p>
<p class="txt-6">6</p>

The dollar symbol will symbolise the index every time.

7. Create nested elements.

Write .parent>.child and press tab/enter to create nested elements:

.parent>.child

<div class="parent">
      <div class="child"></div>
</div>

It is very useful when you want to create a list or a form for example!

Let's create a complex nested example together. Let's say you want to create a container with a ul list within which you'll have six li elements, all of which will have the same class name. Try it yourself first!

<div class="container">
      <ul class="list">
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
      </ul>
</div>

Here's the solution: type .container>ul.list>li.item*6 and press tab/enter.

8. Create something at the same level (instead of nested).

Use the + sign to create two divs at the same level: .box1+.box2 will create:

.box1+.box2

<div class="box1"></div>
<div class="box2"></div>

9. Go one level up!

It's useful if you want to create a nested element followed by a simple div for instance. In order to do that, you need to use ^, like so:

.container>child^.container2

<div class="container">
     <div class="child"></div>
</div>
<div class="container2"></div>

10. You can also group things up!

Let's imagine that inside of your container you want a list with li elements, but then you want to go up with a paragraph. You can therefore do it like this:

.container>(ul>li*6)^p

<div class="container">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
</div>
<p></p>

11. Create a full doctype quickly!

To create a doctype very quickly, you just need one key and that's an exclamation point! Type ! and then press tab/enter and voila!

! + tab/enter

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>

    </body>
    </html>

12. Create any element with its name!

You can simply write an element's name and then press tab/enter and it'll create said element.
Some elements even come with attributes, that you can then change however you need. For instance, by typing input and pressing tab/enter, you'll have the following code:

<input type="text">

The same goes for textarea, form, img, a, etc.

<textarea name="" id="" cols="30" rows="10"></textarea>
<form action=""></form>
<img src="" alt="">
<a href=""></a>

As you can see you'll now be able to gain many precious seconds in your coding time!

Here's the full crash course.

Come and take a look at my Youtube channel: https://www.youtube.com/c/TheWebSchool

See you soon!

Enzo.