Hope you are a good web developer or just start your developing career.

If you don’t know About Zen Coding then after reading this article I hope you will be surprised.

In this Article, my topic is Zen Coding. Now Have a look what’s is Zen Coding, how to work zen coding?

Zen Coding

Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing.

The core of this plugin is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code.

Set Up Environment

First, you need to select writing Environment means code editor. a good editor and debugging tools give you full power to writing code.

Why you select editor because you spent a lot of time with this editor when you start writing code.

Select yourself which is better for you. However, Lot’s of Editor is available around you.

Choosing a better Code editor, it’s must have an easy shortcut key, good looking interface, need lots of plugins, extensions.

In this article, I will use two editor Sublime Text Editor And Macromedia Dreamweaver.

Sublime is most popular code editor for who love writing code it’s a good looking user interface, simply and Lot’s of Plugins Resource And Support Multiply Debugging tools.

Beside another is Dreamweaver maybe you know Dreamweaver. it has graphical and coding both interfaces.

Setup with Sublime Text

We need to install blow both plugins to proper work zen code with sublime text.

Simply flowing the steep first Open Sublime Text Editor

1. Open Sublime text 2 editor and press the keyboard shortcut  ctrl + `  otherwise go to view and then show console.

2. Enter the following code in the console and press ENTER.

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print('Please restart Sublime Text to finish installation')

You can get this code from here.

1. Then press the keyboard shortcut ctrl + shift + p for command palette else you can access from tools in the sublime text menu bar.

2. Now, Search for install package and Select Package Control: Install Package.

Then, search for emmet and select it.

It will install the package and load PyV8 binary. It will just take around 10 to 15 sec and then you are ready to explore.

Example Zen Coding

Now we have successfully set up zen code with a sublime text editor. now time to check how it’s work.

Write down code in a sublime text editor like I will need to create a navigation bar with logo simply write the code


the flowing writing code will expand full function

<div id="page">
 <div class="logo"></div>
 <ul id="navigation">
  <li><a href="page-1.html"></a></li>
  <li><a href="page-2.html"></a></li>
  <li><a href="page-3.html"></a></li>
  <li><a href="page-4.html"></a></li>
  <li><a href="page-5.html"></a></li>

Zen Coding for Dreamweaver

Zen Code for setup pretty simply. we just need to install Dreamweaver extension.

after install Dreamweaver extension you will able to write Zen Code on Dreamweaver.

Download Dreamweaver extension here


Zen Coding produced extra speed when you are writing code.

it saves your lot’s of time.

If you Enjoy this feel free share your opinion and also share with your circle

Affiliate Disclaimer : As an Amazon Associate I earn from qualifying purchases.