FREELessons: 32Length: 5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.1 Zen Coding

[SOUND] Zen coding is a popular way that allows us to rapidly create our markup. You can use it by installing the plugin, if your code editor supports it. And usually, there will either be a tab trigger. Or perhaps Cmd+_. There's lots of different ways. Just check the documentation for your editor, to see how you trigger it. Let's take a look, though, at some quick things you can do with it. If I type a element name and press tab, it will expand to the full tag name and place the cursor in the middle. So if I need to create an h4, rather than doing h4, My Heading. Instead, I type h4, tab. My Heading, it's much quicker. But we can do even more. If I need to apply an id. I can type pound. And notice I'm using the CSS syntax myId. And if I press Tab, and I do not specify an element name, it will assume that I am using a div. That's the default. So let's try this. Hit tab, that expands. If I need to override it and I say I want a ul with an id of myId. Again, I press tab, and now that will expand as a ul. So there's a quick teaser. Let's go ahead and get this installed. Now, I already have it setup on Sublime. But if you go the homepage and search for zen coding, it's stored on It'll show you how to use it. And it'll also show you the various editors that it's available for. So right here, you can see whether you use TextMate or Espresso on the Mac and there's even Notepad++. It's so popular that it's gonna be available for just about anything, Coda, Dreamweaver. Now, as my editor, Sublime Text, is relatively new. It may not be listed here, but it probably is supported. So let's search for it. Zen coding sublime text and see what comes up. Now, we can see, sure enough, there is a forum topic. And we can see, go here for sublime text 2. And this will show you exactly how to install it. It's very simple. So I'm not gonna go through all of this with you. You can let us know if you have any issues with it, but it's a fairly simple process to show you how to get that set up. So now, once that's set up, you can then use it. You may need to restart editor for it to take effect. Now, let's take a look at some more advanced things you can do. In addition to creating elements, you can create sub-elements. If I type div and then a less than sign, a different element, that will expand to a parent-child relationship. Tab. And now, notice that creates the div and the paragraph within. And it automatically knows to put the cursor there. So that's really helpful. You'll use this often for list items, because you will never add a list item without it first being nested within a ul. So think how long this takes to do the ul, then indent, then do the li, the scroll back and then type. In this case, I type ul, li, tab, and then begin typing. What if we need to add two list items? UL, LI, and I can say times, like math, times 4 will create 4, click tab. And what's nice about this, is I can type 1 and tab will continue to take me though each stop point. 2,3,4, isn't that really amazing? I was really excited the first time I learned about this. Let's take a look at other options. What if I want to apply a value automatically to it? I can type ul, li, and within curly braces, the value that I want to apply. Now if I hit tab right here, you'll see it's not gonna work. And that's, because it wants the cursor to be at the very end of the string. So if I hit tab here, that's not gonna work. I have to go to the very end. And then, click it, and you'll see that takes effect. So you can think how quickly you could create a base layout. For example, let's say I wanna create a layout. And we'll create a wrapping div with the class of wrap. And within it, it needs to have a header element, 'cuz it's gonna have our header. I'm going to go into the header and now, I'm gonna have an h1 element. And that h1's value will be My Website. Let's keep it like that. I'm going to copy this. So, we can continue on, but let's see what we have so far. Tab and now created that for us. Let's continue on though. If I want to create a sibling of the h1 element and not a child, I can use plus that refers to sibling. And now, I could say, create a nav element. And within the nav element, we'll have a unordered list with a list item, and we'll have four list items. Tab, and now the cursor is first on the h1. If I hit it again, it's now on the list item. I can say Home, About, Contact, Portfolio, and you're done. And look at all of that markup we created, in next to no time at all. It's really amazing. Now, generally, these list items will be links as well. So let's fix that. And we'll say wrap, we'll do this quickly, header, nav, h1, My Website, and then, we'll have a nav element, ul, li, and there's gonna be four list items. And each list item is going to contain an anchor tag. So now you can see I can tab through each one. And notice, it knows to place a tab within the href. And so that could be tab and that will be the value for the anchor Home. And I can keep tabbing through these. And if I need to go back, I can hit Shift tab. But what if we want to apply a default value to the href? Maybe, in this case, it's not linking anywhere. So we want to use a hash. I can use brackets, and I can say href equals pounds. And now, if I tab, you'll see that, that value has been applied. With 5 seconds worth of work, we've created a layout. And if we view that in the browser, we have a very minimal website, but we are able to do this in roughly 5 or 10 seconds. It's really, really amazing. So what you should take away from this is, if you want to create an element, type the element name followed by the trigger in your editor, in mine it's tab. If you want to apply IDs. Type the element name, and then the CSS symbol for class or id, which is pound, or period. If you wanna create nested children, you do less than sign followed by the child. You can then continue again, if you need to. And you can also apply values by using curly braces. Finally, make sure when you expand, your cursor is always at the end of the string. And lastly, when you want to create siblings. For example, content, and then you also wanna create a div for main and another div for footer or something like that. That will create siblings. So, have fun with this. I was amazed when I first found this, because it saves so much time. In the next lesson, I'm gonna teach you about grids and how they can rapidly increase the speed at which we code websites.

Back to the top