Learn how to Write Lightning-Fast Code in 4 Minutes: Screencast
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
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.
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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
Electerious - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
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.
There’s always an MP4 option below the video that doesn’t have the advertisement.
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
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.
Interesting concept for many editors, but it doesn’t seem any faster than the default CSS and HTML Textmate bundles.
Cold as ice…
I dig it.
How did you get ‘beginhtml’ to automatically create the html structure?
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.
Downloading for Coda and Dreamweaver. Any plugins for jEdit?
Look this !!
http://coda-clips.com/
Great page whith many clips for coda !!!
This is very awesome and very easy too learn. Thanks alot^^, sure is handy.
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
It would be a cool idea if we can change the Keys ‘Control + ,’ on Mac
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
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.
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…
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?
I figured it out, not to worry
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!
Thanks I was stuck too. You saved me a headache.
What about JEdit Sergey ?!
Any future plans for JEdit.
Please consider bringing this awsome masterpiece to JEdit in ASAP.
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
To repeat Mike Jonas’ question, “How did you get ‘beginhtml’ to automatically create the html structure?”
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).
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.
Awesome time saver. Thanks so much…I love this!
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
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
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
I plan to add such functionality in the next Zen Coding release
That’s great! Thank you Jeffrey.
Thanks for the screencast Jeffrey and thanks Sergey for Zen-Coding! Life just got a little easier.
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
What are these and how do we use them?
Simply Amazing!
It is!
Cool. I’ve been using the clips in Coda to great effect but this takes it to another level.
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!
Posted in the wrong article, please delete this, sorry
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?