Emmet Crash Course!
Tags: html, emmet, tutorial
Published: 2021-11-25 08:25:29

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 :

{%youtube OJgrYe4WYRs%}

##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* 
```html
<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*
```html
<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* 
```html
<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* 
```html
<div id="myElement"></div>
```

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

*div#id.box*
```html
<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*
```html
<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}* 
```html
<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*  
```html
<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* 
```html
<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* 
```html
<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!

```html
<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*
```html
<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*
```html
<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*
```html
<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
```html
<!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:

```html
<input type="text">
```

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

```html
<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]( https://github.com/Ziratsu/Emmet-Crash-Course).

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


*See you soon!*

Enzo.