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:
1 |
|
2 |
div#header>p>lorem |
This would generate something like so:
1 |
|
2 |
<div id="header"> |
3 |
<p>
|
4 |
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. |
5 |
</p>
|
6 |
</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.
