4.1 Zen Coding

In this section of the course, I'm gonna show you lots of different plug-ins that I think you should install. We're gonna begin with one of the most common ones, which is SYM coding. And if you're not familiar with SYM coding, that gives us the ability to, rather than just typing div and hit Tab, which lots of editors provide support for. You can create nested HTML. So if I want to create an unordered list with four list items, I could say," UL LI times four," and I hit tab and that will expand to an unordered list with four list items within it, and then I can incrementally hit tab to go to the next list item. It's really helpful. You can build entire site structures like a container DIV, and then we're going to have three children, one for the header. One for the main. One for the footer. And then that will instantly expand to a container div with three child divs for your site structure. Let's install it. Shift+Cmd+P, Install, ZenCoding. There it is. Hit Enter, and now it's installed. And now, I believe for this plug-in we need to restart. So close it out, bring it back. And now let's try it. An ordered list. List item times four, plus tab, and now we have that. So we say, home, about, portfolio, contact. Hit tab again, and we're done. Let's do that site structure that we had talked about. Well first, let's add a snippet for HTML like that. Next, we're going to do container, and then a div with a class of header. Now if you do not specify the tag name, it will automatically use a div. So if I expand that, notice what it does there. So I want a header and to create a sibling, we use plus. So we could say main. Now, if I did not use that and we did this, main would be a child of header. But if I do plus, and I expand it, now name is a sibling of header. So we have our header div, we have our main div. We're going to have our footer div. But I also know that I want the footer and the header backgrounds to expand. So, let's do this. We're gonna have the header wrapping div, and you know what, I don't want to div with the class of header. I want to use the HTML5 header element. Now expand it and we have these sections. So we have h1 My Website. I'll hit tab. Now we're within the Main section. Hit tab again, and now we're within the Footer. And that's SYM coding. So, if you never used it before, let me take one more minute and describe the syntax. You begin by typing the element you need. Unordered list, hit Tab and you get a ul. Then you use css style classes and IDs. So if you want your un-ordered list to have an i.d. You would use a pound some i.d. Hit tab now you have a u l. If you want that to be a class same with css you would do a period. Now a quick note, you're cursor needs to be at the end of the sequence, so if I hit tab here that's not going to work. I have to place the cursor at then hit it. If you want a child for the element you use an angled bracket, so u l. Li. If you need multiple of an element, then you can use times. If we want three unordered lists times 3, tab, now you have three ls. If you want siblings, then you use plus, ul plus ul plus ul, which is equivalent to ul times 3. Hit Tab and now you have it. Also, if you want to assign attributes, so if I have an anchor tag with a class of button, if I also want to give that a href. And by the way, note that with anchor tags, it knows that it needs a href, so it will go ahead and add that on there. But, if you want to be explicit, I could say, within brackets, href = #. Now, if I run it, that will automatically be set. So, if I want to create a link to tutsplus, I could say a href equals tutsplus.com. Tab, and now we instantly have the link. But what about setting the text within tags? So I can do a list item, but what about the text here? Well, if you wanna do that within your sEndcoding, you would add it within curly braces. So, my texts. And now, that will expand it. Now one thing you need to remember with sEndcoding is that it's space-dependent. So you can't do something like this, U-L, L-I. That doesn't work. They all need to be right on top of each other. Don't add any spaces. So if I need to create a U-L, and we want to have four list items, we know we can do that. But what if those are links? Well I know each of those list items need to have anchor tags, so I would say within those list items, we also want to have anchor tags and now we get that. But then I would have to set the href for each and if I'm just prototyping. It's possible that those anchor tags should all be set to the pound sign. So, let's add that as well, href equals #. Now, those have been set. Also, though, the links don't have text, and we could do that home about, we can definitely do that. But, if you just wanna use temporary text. Curly brace Some Link. And now we do it, and now we've created an unordered list with lots of links. But now, what if after this unordered list I wanted to continue on? Well, if you wanted to do that, you would want to wrap the entire section within parenthesis. And while I'm thinking about it, here's a quick tip. If you want to wrap this within parenthesis, of course do it manually. Close it. Cmd+Left to go to the beginning of the line. Open it at the beginning. But in Sublime, you can select a string and if I hit opening parenthesis, it knows that I've wrapped that. Like so. So if I had var name equals Jeff and I realized oh I forgot to wrap that within quotes. Don't do it like this. Instead select the word. I'll hit Cmd+D to select it or Ctrl+D on Windows. And then I would type, double quotes and that would wrap it on each side. Same with single quote. There's lots that you can do. So going back to this, now we've wrapped everything, so then we can continue on. Add a div and now we've nested it, but we've also created siblings. So to see that in practice, we'll have our container div. And then I wanna have my div with a class of header, because I want my header to stretch for the entire background. So I wanna have the header element, but I also wanna have a wrapping div with a class of header, and that way we can set the widths accordingly. And if you do a lot of CSS, you know, what I mean. So within here, we'll say, header. And then the real header element, and within here we'll have h1, my website. So if I expand that, yeah, we get what we want. But I want to continue and create the main section after it. So if I were to do this. Yeah, we know that's not going to work. So that means I would need to wrap that entire section like so. And then if I expand it, there's our header. There's our main section and then we'll do footer and then the footer. And whoops, looks like I made a mistake. Let's place the parenthesis within it, not before it. There we go and now we have the indentation like we would want. So, yeah. Don't worry about this too much. Clearly, you could go to an extreme, but I like to do it for simple blocks like this. I rarely get to crazy with all of that nested and sibling markup. Just keep it simple.