Learn how to Write Lightning-Fast Code in 4 Minutes: Screencast
videos

Learn how to Write Lightning-Fast Code in 4 Minutes: Screencast

on Jan 8th 2010 with 143 comments

We all know the benefits of using snippets and bundles to speed up our coding, but what if we could take things a step further, and turn a complex html structure into something as simple as a CSS selector? Well, thanks to a new project, called Zen-Coding, we can do this very thing!

In this four-minute video quick tip, I’ll demonstrate how.

Download Zen-Coding

Other Viewing Options

Update

Within the comments below, I made a suggestion that it would be neat if we could also paste in the generic “lorem” text, like so:

div#header>p>lorem

This would generate something like so:

<div id="header">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
</div>

Unfortunately, I didn’t know how to do it. But luckily, the author of Zen-Coding, Sergey, was able to help me. I recorded a sixty second screencast showing you how to allow for this. You can watch it here.

Additional Resources

Write a Plus Tutorial

Did you know that you can earn up to $600 for writing a PLUS tutorial and/or screencast for us? We’re looking for in depth and well-written tutorials on HTML, CSS, PHP, and JavaScript. If you’re of the ability, please contact Jeffrey at nettuts@tutsplus.com.

Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.

Write a PLUS tutorial

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
← Older Comments
  • Biggun

    Great tut, but reaaaaally annoying advert!
    I’m in the UK I dont care about what car I could buy in the US…

    As far as the tut info goes, another great viewing, thanks.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      There’s always an MP4 option below the video that doesn’t have the advertisement. :)

  • Sean

    This is a cool plug-in but I don’t see the advantage of it when using TextMate.
    It just gave me more snippets that are already used in TextMate as standard. How do I get it to work like the tutorial?

    Thanks

  • http://www.nouveller.com/ Benjamin Reid

    Pretty neat if you don’t have any snippets to start with. I’ve built up my own list of snippets that pretty much handle all common tasks but this is pretty clever.

  • http://www.brandoneley.com/ Brandon Eley

    Interesting concept for many editors, but it doesn’t seem any faster than the default CSS and HTML Textmate bundles.

  • http://bengood.org Ben G

    Cold as ice…

    I dig it.

  • Mike Jonas

    How did you get ‘beginhtml’ to automatically create the html structure?

    • Wanyax

      I think I figured it out. In coda, you create a clip and give it a name. At the bottom of the clips window it gives you an option to add a tab trigger. When you are coding, just type in the trigger you have chosen (in this case ‘beginhtml’) and hit tab. That ought to do the trick.

    • http://newarts.at Drazen Mokic

      Jeffrey is using http://www.smileonmymac.com/TextExpander/ TextExpander. It`s really cool, try it. :)

  • NinaMo

    Downloading for Coda and Dreamweaver. Any plugins for jEdit?

  • Dr_RottenGrab

    Look this !!

    http://coda-clips.com/

    Great page whith many clips for coda !!!

  • icetrix

    This is very awesome and very easy too learn. Thanks alot^^, sure is handy.

  • http://craigps.info/ Craigsnedeker

    Sorry but this seems like a waste: http://littlepix.co.cc/gallery/albums/useruploads/wasteoftime.png

    This seems nice but rather time consuming and confusing with all the different times. I’ll stick to the normal way of CSSing ;)

  • http://ivorpadilla.net iPad

    It would be a cool idea if we can change the Keys ‘Control + ,’ on Mac :(

  • http://www.formatix.eu/en/ Formatix

    Discovered Zend coding some days ago, but your screencast really gave me the will to use it.

    I’ll maybe do a french screencast on the subject too ;)

  • Ce.

    I gotta say this is sick. The only problem I see right now is somehow remembering all the possible schemes. So, I am collecting snippets for use later on with Snippley.

    • Ce.

      Is there any way to edit the shortcut keys in the dreamweaver plugin? I couldn’t seem to find any info in the JS files…

  • http://twitter.com/jjenzz Jenna

    Not sure what I’m doing wrong but I can’t get this working 100%. I can type “link:css” fine and “div#” works but if I try “div#something>div” nothing happens.

    Any idea why that might be happening?

    When I go to “Bundles > Zen HTML” there is a “Zen HTML 1.3″ option that doesn’t expand. Could that be the culprit? Am I missing a bunch of stuff?

    • http://twitter.com/jjenzz Jenna

      I figured it out, not to worry :P

      I had only downloaded the TextMate.Zen.HTML.1.3.1.zip file so needed to get the Zen.Coding-TextMate.v0.3.zip file as well :) silly bean!

      • http://msylvia.nukefile.net MSylvia

        Thanks I was stuck too. You saved me a headache.

      • http://hamsterboy.dk Daniel Aakjær Sørensen

        THANKS! Had me scratching my head there for a while… :)

      • http://www.russelluresti.com RussellUresti

        Yeah, this was killing me for a while too; I only got the HTML and CSS bundles, but not the Zen Coding parent bundle. Thanks.

  • Muhammad Salem

    What about JEdit Sergey ?!
    Any future plans for JEdit.
    Please consider bringing this awsome masterpiece to JEdit in ASAP.

  • http://chikuyonok.ru Sergey Chikuyonok

    Guys, please post your issues and feature requests about Zen Coding at http://code.google.com/p/zen-coding/issues/list so I can better track them

  • Wanyax

    To repeat Mike Jonas’ question, “How did you get ‘beginhtml’ to automatically create the html structure?”

    • Wanyax

      Never mind. I think I’ve figured it out. You just need to add a tab trigger to a clip in coda. (More concise explanation in my reply to Mike Jonas above).

    • http://newarts.at Drazen Mokic

      Look at my post above (http://www.smileonmymac.com/TextExpander/) have fun ;)

  • TJ

    I have not been able to get this to work. Using Textmate and the control+ just doesn’t do anything….

    thoughts?

    thanks so much, this looks really cool.

  • http://www.iamchad.com Chad Warren

    Awesome time saver. Thanks so much…I love this!

  • Devon

    i think this is pretty much useless for someone like myself, exactly how much time can you really save with this? really how much?

    Another way to make things complicated… thanks but I’ll pass

    • http://twitter.com/QwertyDesignUK Richard Dale

      Why what do you do for a living? do you not write code? The benefits are obvious

  • Daniel

    I have a question. Can you actually make more than one bit of page structure at once? For example, how would you do this?

    and a half
    and three quarters

    and a half
    and three or four quarters

    • Daniel

      Okay, that didn’t show at all. I’ll try again:

      div id=one
      (tab)ul
      (tab)(tab)li one li
      (tab)(tab)li two li
      (tab)(tab)li three li
      (tab)ul
      div
      div id=two
      (tab)ul
      (tab)(tab)li four li
      (tab)(tab)li five li
      (tab)(tab)li six li
      (tab)ul
      div

    • http://chikuyonok.ru Sergey Chikuyonok

      I plan to add such functionality in the next Zen Coding release

  • http://lessbit.com Stefano

    That’s great! Thank you Jeffrey.

  • http://www.garystorey.com Gary Storey

    Thanks for the screencast Jeffrey and thanks Sergey for Zen-Coding! Life just got a little easier.

  • Jeffrey Karbowski

    How about some Texter bundles based on Zen.Coding:

    Texter Bundle based on ZenCSS :
    http://texterbundles.googlecode.com/files/ZenCSS.texter

    and.

    Texter Bundle based on ZenHTML:
    http://texterbundles.googlecode.com/files/ZenHTML.texter

    • http://www.fishmemory.net fractalbit

      What are these and how do we use them?

      • http://code.google.com/p/texterbundles/ Jeffrey Karbowski

        Texter is a nice little text expander program found here:
        http://lifehacker.com/238306/lifehacker-code-texter-windows

        I took and ported the zen.coding code over to a “bundle” which is easily imported into the little app. Now, you can use the less dynamic zen coding shortcuts where ever you like, in notepad, word, or my favorite: firebug. I hope this is useful.

  • http://www.o-theme.com Dian

    Simply Amazing!

    • M

      It is!

    • http://mmomap.com/ ylciwq

      htpoar

  • http://www.exposecreative.net Mischa Colley

    Cool. I’ve been using the clips in Coda to great effect but this takes it to another level.

  • http://www.fishmemory.net fractalbit

    I don’t have words. I used NetBeans until now and i was quite happy but dissapointed with how slow it was. So i downloaded the phpStorm and was blown away. It is about twice as fast and have much better productivity features! Just read the tips and coding will be a pleasure!

    Judging from the ruby ide price, this should be around 80$. If it is so, i am DEFINATELY buying this!

    Thanks for the discovery jeffrey!

    • http://www.fishmemory.net fractalbit

      Posted in the wrong article, please delete this, sorry

  • http://www.nunomedia.com Nuno

    Hi guys, I am searching on the internet and I haven’t made this to work properly. I have installed on coda but some things do not run as in the videos. I type html:4t and nothing changes, what is the trigger? can somebody help me please?

  • http://www.maikdiaz.com maik

    Hi Jeffrey, I am trying to use the csscaffold from anthony short with the codeigniter but It seems that together do not work is there a way that thoose two work together.

    Great tutorials You re the MAN.

  • Craig

    What a complete and utter gimmicky waste of time. I can copy and paste a block of code faster than that and it’s much more intuitive and less prone to errors.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      You sure about that?

      • http://www.wordimpressed.com Devin Walker

        I’ve installed the extension for Dreamweaver CS5 but I’m not getting any Zen Coding abilities here… any ideas?

      • Iftikhar Ahmed

        in the “commands” menu you’ll the zen coding if u execute the zen code

        div#header>p>lorem simply press ctrl+, this is for windows users

  • Mike Heath

    Thanks Jeff for another great tutorial although I came late to it. I love zen-coding!

    I discovered that for dreamweaver cs5 (windows xp), the zen-coding files are in:

    C:\documents and settings\user\application data\adobe\dreamweaver cs5\en_us\configuration\commands\zencoding

    Open ‘zen_settings.js’ in a text editor and at about line 500 you see the start of the snippets. By carefully following the format of the other items, you can easily add your own snippets to the end of the list – the world is your oyster! Don’t forget to add a comma at the end of the snippet before last.

    Incidentally, for Notepad++, the files are in:

    C:\program files\notepad++\plugins\nppscripting\includes

    and you need to open zen coding.js which includes both the abbreviations/snippets and the plugin code. Again, the start of the snippets is at about line 500 and from there it is the same.

    There will be a similar process for any zen plugin for any application I’m sure.

    But I guess you all knew that already!

  • Murali

    Thankyou very much for your tip, Jeffrey. That is awsome.

  • The DOUBL

    Hello guys, i’am a windows users, so it is any version of those tool ( snippets, sparkle or zen coding) for windows?

  • http://www.imediadisha.com suhasini

    That’s fantastic and great deal of help :)

  • NewGuyHere

    Hi Jeff , I am great fan of yours and i love all of your tutorials ;) Thanx a lot for making them , it has made me improve a lot :D.
    I have seen your other video in which you teach to use Zen coding in a screen cast . I have some doubts so please kindly answer .
    I am windows user and i have notepad++ with zen coding installed . Now when i do ul>li*4(ctrl+E) I get

    But i can’t toggle between the space between the like you did in your video where you used tab , shit+tab to go through the ‘s . I tried ctrl+E and tab but it never worked for me . Is that shortcut only available for sublime ? Or is there anyway to use it in notepad++ ?
    Please Help me out Jeff .

    • NewGuyHere

      Sorry abt the previous 1 i forgot to add some code :D
      Hi Jeff , I am great fan of yours and i love all of your tutorials ;) Thanx a lot for making them , it has made me improve a lot :D.
      I have seen your other video in which you teach to use Zen coding in a screen cast . I have some doubts so please kindly answer .
      I am windows user and i have notepad++ with zen coding installed . Now when i do ul>li*4(ctrl+E) I get

      But i can’t toggle between the space between the li tag like you did in your video where you used tab , shit+tab to go through the li tags . I tried ctrl+E and tab but it never worked for me . Is that shortcut only available for sublime ? Or is there anyway to use it in notepad++ ?
      Please Help me out Jeff .

  • Akhil CS

    Really helpful thanks dude….

  • lai

    Thank you sooo much Zen coding & Jeffrey.. u save my life … ^-^

  • jeshan

    you guys should know the difference between “write fast code” and “write code fast”. The title was so misleading!

← Older Comments