I was supposed to have an exam today. But after going to the class and sitting for 1 hour, I heard that sir has forgotten about the exam (scientists forget my mind, my mood is calm).
Tomorrow's exam is also postponed. I got some time and so I sat down to tune. In my last tune many people requested me to do a tune about Zen Coding (Emet). Today's tune is based on their request.
Anyway, let's get to work. First of all, what is Zen coding? It eats or gives on the head!
Zen Coding is a Nodepad plugin that allows us to get exactly what we want by just typing certain keywords without doing full coding for HTML and CSS. It is very easy to use and works very fast with it.
All editors that support Zen Coding
Most of our known and widely used text editors will support Zen Coding. However, I am mentioning the names of the editors for your convenience.
- Notepad+
- Sublime Text
- EditPlus
- Ultra Edit
- Vim Editor
- Coda etc
- SlickEdit
- TextMate
- TopStyle
- CodeMirror
- Espresso
- PsPad
Among the mentioned editors, only EditPlus has Zen Coding built-in and for all the rest, you need to download and use the Zen Coding plugin. To learn about EditPlus check out my tune on EditPlus.
Now learn how to use the Zen Coding plugin in your editor. But today I will only show you how to use Zen-Coding in Notepad+ and Sublime Text. So let's begin.
Zen Coding For Notepad+
You all know about Notepad+. It is foolish to think that you don't have Notepad+ on your computer... But those who don't have Notepad+ or are using old Notepad+ download the latest version of Notepad+ from here .
Now it's time to download Zen Coding. You might be wondering how big the size of this plugin is! But disappointing you, its size is only 100 KB. So download it from here immediately.
After downloading and extracting, you will find a folder named NppScripting and a file named NppScripting.dll. Copy and paste them into C drive>>Program Files>>Notepad+>>Plugins. Now when you open Notepad+ you will see Zen Coding option in the menu bar.
The Zen Coding plugin in Sublime Text Editor is known as Emmet. On how to use Emmet plugin in Sublime Text Editor, our favorite tuner "Ronnie Satyar" has a nice tune that you can use Emmet with ease. You can check the tune of Ronnie Satire.
How to use Zen Coding
Hope you all are able to connect Zen Coding plugin to Notepad+ and Sublime Text without any problem. Now know how to use it and how it works.
By using Zen coding you only need to use certain coding. Then pressing Ctrl+E will expand it. For example, you will create a document in HTML 4 Transitinal. By default you have to write a lot of code for this. But using Zen – Coding you just type html:4t and press Ctrl+E to get auto coding like below.
Here you can use html:5 for HTML 5; html:4s for HTML 4.01 strict; For XHTML, typing html:xxs etc. and pressing Ctrl+E will do the auto coding. Try it now if you don't believe it.
Now suppose you want to have an id called Menu in it there will be a ul in it there will be 5 li in it and each one will have a class and in the li there will be a then write as below and press Ctrl+E to see if it works.
#menu>ul>li.class*5>a
Again suppose you take 5 divs each having the same or different class/id.
Then write like this and press Ctrl+E to see if it works.
div.class*5 [for same id/class]
div#id$*5 [for different id/class. ]
Now let's know how to link CSS, Favicon, Javascript between Head/Body Tag...
Try the following and see if it works.
Link:css [For CSS Linking]
link:favicon [For Favicon Linking]
meta:utf [For Unicode Support]
script:src [For Javascript Source Adding]
script [For Javascript]
Now let's get some CSS properties
Suppose you want
margin:0; padding: 0; font-family:sans-serift; background-color:#abc; font-size: 14px; height: auto; width: auto;
To code like this. Then write as follows, see his fun!
m:0 then Ctrl+E;
p:0 then Ctrl+E;
bgc:then Ctrl+E;
ff:ss then Ctrl+E;
fz then Ctrl+E;
h:a then Ctrl+E;
w:a then Ctrl+E;
Almost all types of HTML and CSS coding can be done with Zen-Coding. I have shown you a few things but you have to learn the rest by yourself. But another language does not want to learn anything by itself. So I have given you a Zen coding cheat sheet. Just download Zen Coding and you'll get inside. Also, if you check all of them from Settings>Preferences>Auto-completion in Notepad+. Then you will get suggestions like DreamWeaver. Hope you will become a magician in coding from today.
Some gifts for you
Today is my birthday, people get gifts on birthdays but today I am giving it to you all because it is called love. I love the TechTunes family as much as you all. However, today I have given you two important web design tools. Download from here immediately. The gift is small but a gift. What I gave is not a big deal.
