Write blazingly fast HTML with Emmet 🌩️

Emmet is a web-developer’s toolkit for boosting HTML & CSS code writing. You can type expressions and it gets converted into code snippets 🪄.

Their tagline is Emmet — the essential toolkit for web-developers which is true in some sense, web-devs usually do not work on any project without Emmet.

It comes pre-install with VS Code, but it should be available for the majority of the code editors. But for this blog post, we'll stick to VS Code 🦄

Let's start with things that you can integrate right now!

Literally, stop doing everything and try them now!

🧑‍💻HTML boilerplate code
Writing DOCTYPE and HTML and HEAD and TITLE can sometimes feel like more work than actually creating the structure of the website! But with Emmet, the colourless process of writing all this can be done with ease.
Use ! and press TAB/Enter.
```
!
```
🏷️Tags on the go
We can make use of Emmet to generate <> and </> for tags. We just need to write a tag name we want to generate and hit TAB/ENTER to generate a freshly baked opening and closing tag.
```
nav
```

🪪Tags with ID's or Classes
We can use Emmet to generate tags with classes/ids already filled in to save some more time!
Use .class-name #id-name with the tag name (or without for generating a div)
```
footer.my-footer#sticky
.about-section
```

🤖Lorem
Lorem can be generated using lorem. We can also declare how many words is to be generated.
```
lorem
lorem60
```
👯Relations within tags and multiple elements
Generating tags with automatically filled classes is... yeah, I get it, not brag worthy. But now you will see the real power of Emmet.
Use > for nesting and + for generating a tag on the same level. And the best part, we can generate multiple elements by using *
Example:
```
table>(tr>th*3)+(tr>td*3)*4
```
We can also generate numbers using $, check Example 2 for the same.

✨More Examples✨

Example 1

Let's say we have to design a nav bar, we will be needing multiple links and an element for brand image.
After what we have learned we can easily design it using Emmet.

nav.navbar>div.brand>img.brand-logo+ul>(li.nav-item>a.nav-link)*4

Example 2

What if you need to generate different ids for the elements generated through Emmet * property?
Don't worry they got you covered! Observe $.

ul>(li#item-$>lorem10)*5

Example 3

Generating multiple tags simultaneously using Emmet.

div>(header>ul>li*3>a)+footer>p

Emmet also offers shortcuts for CSS, like bgc for background-color, they are easy to work with, you just need to give the first characters of each work of a CSS property and VS Code will give you suggestions as soon as you type something.

Thats all for this post! I hope you learned something.

Happy learning ✨

You can find more recourses to study Emmet below 👇

Write blazingly fast HTML with Emmet 🌩️

Comments (1)

Web Designing

Get Started with Tailwind 🍃

More from this blog

Explain how Promise.all() works.

In-Depth Guide to JavaScript Objects

JS Interview CheatSheet

Arrays in JS 🚀

Get Started with Tailwind 🍃

Let's start with things that you can integrate right now!

✨More Examples✨

Example 1

Example 2

Example 3

Command Palette

Comments (1)

Web Designing

Get Started with Tailwind 🍃

More from this blog

Let's start with things that you can integrate right now!

✨More Examples✨

Example 1

Example 2

Example 3