How to Write HTML and CSS code faster with Zen Coding

Leave a Comment


Now a days you don’t need to write thousands line html code to develop your website. And i am a web developer so i always wanted to increase my workflow and then i found the Zen Coding its just an awesome tool using which you can write whole html code in just few minutes.

How to Write HTML and CSS code faster with Zen Coding


All you have to do is to install Zen Coding plug-in in to  your code Editor Get the Zen coding plug-in.

Just get the plug-in and extract the rar file anywhere and then if you are using the notepad++ then simply paste all the files in the C:\Program Files\Notepad++\plugins\ folder and if you are using other code editor then there is instructions written in the read me file just open it and get the information how to install the Zen code plugin.

Now just restart your Notepad++ and then you will be able to see Zen Coding option in the options menu now you have successfully installed Zen coding in to your editor.

Now if you want to get the basic structure of the HTML5 then simply write Html:5 and then press Ctrl+E (ctrl+E for the execution of the command) and it will give you the basic structure of the HTML5.

Zen Coding in notepad

The web page can be divided in the 3 parts Header, content wrapper and footer and now if you want to create the header with logo and menu then simply write bellow code and then press Ctrl+E.
#header>#logo+#nav>a*5
Zen Coding in notepad   2

Now here # is a id of the tag and when you want one Div inside another then you have to use > sign like i have added Logo and nav in the header div and when you want multiple tags then simply multiply them like i have multiplied the anchor tag with 5 because i want five anchor tags in the menu.

To create the content wrapper just write the bellow command and simply hit Ctrl+E and you will get the result easily.
#contentwap>#content+#rsidebar
Zen Coding in notepad   3 
And now we have to create the footer and the same way we can easily create it using the simple command.

Zen Coding in notepad   4
Now we have successfully completed the very basic structure of the HTML and CSS based website and this is just a structure of the website you need to add the data in the page then and then it will show you the data. If you have any questions regarding the Zen coding then feel free to ask!

0 comments:

Post a Comment