Emmet magic

If you have seen the magic trick of turning a couple of symbols in a text editor into lines of HTML and were wondering how that was possible I got you.

This type of magic is called Emmet.

Emmet is a smart helper that makes writing code feel faster and easier. Emmet understands your quick request and turns it into the full code.

For example, if you want to add a <h1> that says "Hello, World!" in HTML, you might normally type this:

<h1>Hello, World!</h1>

You can let Emmet do the heavy lifting if you type the following line and click TAB

h1{Hello, World!}

You can find a cool Emmet cheatsheet here: https://docs.emmet.io/cheat-sheet/

Here are my three favourite tricks from it:

Create multiple elements with desired class:

 ul>li.item$*5 and then click TAB to produce:

 <ul>
     <li class="item1"></li>
     <li class="item2"></li>
     <li class="item3"></li>
     <li class="item4"></li>
     <li class="item5"></li>
 </ul>

Set the tag, class and id in one line:

 form#search.wide and then hit TAB to see:

 <form id="search" class="wide"></form>

Create an HTML5 boiler plate

 type ! and then press TAB to get:

 <!DOCTYPE html>
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
         <title>Document</title>
     </head>
     <body>

     </body>
 </html>

Bonus. Lorem Ipsum generator with Emmet:

You can generate dummy text and set the number of words if required.

ul.very-important-list>lorem10.item-$*4 and TAB button click will give you:

<ul class="very-important-list">
  <li class="item-1">Numquam architecto corrupti quam repudiandae.</li>
  <li class="item-2">Numquam repudiandae fuga porro consequatur?</li>
  <li class="item-3">Culpa, est. Tenetur, deleniti nihil?</li>
</ul>

Nadia Zubko's blog

Nadia Zubko's blog

Emmet magic