How to write HTML faster using Zen Coding

Posted 16 Apr 18 by Darren Welch

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 recogniese 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





Darren Welch

By

Darren Welch


  16 Apr 18


Contact me online

 Facebook

 Twitter

 Linked In

 Git Hub

Related Content