012 Zen Coding

24 Aug 2012

Zen Coding is available as an editor plugin for high-speed coding and editing especially in html. You can type in some shortcuts which will expand into html. It’s excellent for productive coding.

Download video: mp4

Sample code: Github

Similar episodes: 007 Web Fonts, 008 Sublime Text

##Tools used for Zen Coding:

  1. Sublime Text Editor
  2. Package Control in Sublime Text
  3. Zen Coding Sublime Text Package
  4. Active Key Bindings with Cmd+Alt+Enter to get a text input box at the bottom of the screen, titled Enter Koan or just type in the short and tab

##Notes on using Zen Coding

  1. Tag: div - <div></div>
  2. ID: div#wrapper - <div id="wrapper"></div>
  3. Class: div.wrapper - <div class="wrapper"></div>
  4. 1 Class and 1 ID: div#wrapper.main - <div id="wrapper" class="main"></div>
  5. Child: div>h1 - <div><h1></h1></div>
  6. Sibling: p#hello+p.class - <p id="hello"></p><p class="class"></p>
  7. Attributes: td[colspan=2 border=1] - <td colspan="2" border="1"></td>
  8. Content: p{hello} - <p>hello</p>

##More Resources on Zen Coding

  1. Zen Coding official page
  2. Zen Coding syntax and elements
  3. Can’t Get Into Preprocessors? Try Zen Coding
  4. Zen Coding Cheat Sheet

##More Resources on episode project - Logic Gates

  1. Wikipedia link

##Build Link of this Episode

Premium Pixels by the talented designer Orman Clark