How to write HTML faster using Zen Coding

When it comes to writing HTML it can become very repetitive & tedious.

 

Introducing Zen Coding

 

Zen coding is an editor plugin that enables you to write HTML & other languages much quicker.

 

If you use an editor such as Visual Studio Code it is already incorporated, but Visual Studio 2017 will require you to install Web Essentials 2017.

 

Web Essentials 2017 gives you the ultimate web development experience.  Including awesome features such as Zen Coding & Browser Sync.

 

How it works.

 

Let's say you want to create a HTML page with the following layout.

<div id="content">
   <div class="main">
     <div class="row">
        <div class="col-md-6"></div>
        <div class="col-md-6">
           <ul id="listing">
             <li></li>
              <li></li>              
              <li></li>
              <li></li>
               <li></li>
              <li></li>
            </ul>
         </div>
      </div>
   </div>
</div>

This can easily be achieved in 1 line of code.

 

div#content>(nav#menu)+(div.main>div.row>div.col-md-6+div.col-md-6>ul#listing>li*5)

 

If you are familiar with Css you may recognise that '#' creates an ID & '.' creates a class. So to create a div with the id menu you would type:

 

div#menu

 

...and press tab, then your HTML will be generated.

 

You can then begin to chain your commands together. if you want a div (ID=menu) with an unordered list with 5 list item hyperlinks inside pre-populated with "item (number)", that can easily be achieved with

 

div#menu>ul>li*5>a{option $}

 

To achieve the same thing, pre-populate with lorem ipsum text:

 

ul>li*5>lorem6

Comment

---