Stand With Ukraine. Stop Putin. Stop War.

Heck, I could write a long post about Zen Coding - but why not just let you see a vid that explains it, and shows some of its amazing features?

Check it out at Vimeo - Zen Coding v0.5.

As my xHTML writing tool of choice is Notepad++ (due to it having syntax highlighting for like, everything) I did a few googles to find a Zen Coding plugin for Notepad++. Chances are that your favorite editor also supports it, or that a plugin is available from the Google Code project.

How it works

Simply type in a string such as this one, which reflects the hierarchy of html tags:

Then use the shortcut your editor uses to expand the Zen Code into xHTML (for the Notepad++ plugin that is Ctrl+E, later versions seem to use ctrl+alt+enter) and watch how, magically, you end up with full blown, indented markup.

But that's not it! There's more! Do you also have the same markup layout structure of a container div, containing an inner container, then a header and content div? Does your header div have a logo img? No biggy!

transforms into

You could literally build a whole page's basic structure with this in minutes... I'm in love.

Oh, and this one is even better. If you use "html:5", you get the complete HTML5 structure, including doctype and what not.

If you're looking for a total list of possibilities, I suggesting getting this 7 page cheatsheet, which also includes the Zen CSS properties.