Writing Code Faster with Emmet

1. Writing code faster with Emmet: Hello everyone. I'm very excited to be talking to you about Emmet today. My name is Sandra. I'm a Digital Designer and I work both on print and on web projects. My goal is to share with you the best practice I have learned along the way, Emmet is one of my top tip when it comes to learning to code. In this class, I will show you how to use Emmet so that you'll be able to then use it for yourself and become much more efficient coders. Emmet is really useful. So useful, that's most modern web editors will enable you to use it? For this class, I have used the platform that I use nearly on a daily basis, and it's called Code pen. But feel free to use whichever web editor you feel more comfortable with. This class is aimed at people that already have some basic knowledge about HTML and it's for people who would like to learn more about how to optimize the coding. If this is for you, put the kettle on and let's get started. 2. What is Emmet: So let's start with The principle of Emmet. For example, if you wanted to create a paragraph in HTML, what you would do is you would create an opening tag for the paragraph and then a closing tag for the paragraph. So this is what you'll be typing. Then you would have created a paragraph. With Emmets, you can do it much more simpler. The only thing you need to say to Emmet is, you want a paragraph and then it will generate automatically the opening and the closing tag by just pressing tab. So let's try it. I type in P and then I click on tab. Then we have the opening and the closing tag for the paragraph. You can do this with any tags available in HTML. You can do this for the span, you can do this with heading. You can do this with a div, or you can do this with a table or anything. It will work exactly the same. So you see it's very simple, but it has a lot of potential to help you speed up with your coding. 3. Siblings: When I say siblings, this means tags that are at the same level. It's a tag followed by another tag followed by another tag. Say if you have a heading one H1 followed by a paragraph, then followed by a table they're all at the same level and they are siblings. Say for example, if you have a header H1 and then you want a paragraph, there's different ways that you can do it. You could do H1 and then you press tab and you've created your H1. Then go at the end of the line, press B, and then press tab and then you've got your heading one and your paragraph. There wasn't quite a lot of typing in there because I had to go at the end of my closing tag of H1 in order to create my next tag. You only need to do H1 plus P and then you press tab, and then it created for you the H1 followed by the P tag. This is the siblings. 4. Nesting: When I say nesting, I mean an element that is enclosed within an element. Say if you have a paragraph and inside the paragraph you have a span. Then the span is nested inside the paragraph. The paragraph is the parent hence the span is the child. For example, if you have a paragraph and inside the paragraph you have a span. This is a nesting. For that with Emmet you use the greater than sign. Let's have a look. You have your paragraph and then you want inside a paragraph a span. We do p greater than and then you type span. You press "Enter" and there you have it. You have your span that is enclosed inside your paragraph. 5. Grouping: Now we know how to do the siblings, we know how to do the nesting. So let's try and group these together. If I had a heading and then I wanted it to be followed by a paragraph that has a span inside it. What you would do is h1, and then the paragraph is a sibling p. Inside the paragraph, so you do the greater than, you do the span. You press tab. Now you have your heading with the paragraph. Inside of the paragraph you have the span. Now imagine you wanted to span inside the h1, and then you wanted the paragraph after that, so you do h1 and inside the h1, you want your span. You want your paragraph as a sibling, so you do plus p. You press tab. Now you can see that your paragraph has been put inside your heading one. This is because of the grouping. What ML does is it says the span and the p are at the same level and they are both children of the Heading one. What you need to do is to group. In this instance, I want to put brackets between my h1 and the span and I want the h1 and the paragraph to be at the same level, so they are siblings. Now that I have put my brackets in I press tab, and now you can see that my span is inside my heading one, and then it's followed by the paragraph. 6. Multiplying: Let's look at the situation where we want to create ten paragraphs. So what you could do is we know how to create siblings. So we create peoples. Ten is quite a lot and say if you want to do 100, that would be way too much. So what you need to use is the multiplying function diameters. And it's just like in a calculator, you just need to press star on your screen. So if I wanted 10 paragraphs, I would put p and then the star, and then 10. Press Tab, and now I have 10 paragraphs that have been created. It works also with the groupings. So say if I have a paragraph and then inside the paragraph I want to span, and I grouped them and say if I wanted three of those, I just put star three, and then I press Tab. Then you can see that I have three times a paragraph, and within each of these paragraphs, I have a span. So now if I did it without the grouping and I did the p, and then with the try span times three, what it would do is create three spans inside the paragraph. So that's why it's important to understand the grouping when using a [inaudible]. 7. Challenge 01: So now it's challenge time. Download the challenge number one. How we look at the wire frame that I'm proposing and try and find a quick way to create this diagram using MS. So we have a header, and inside the header You have a div and a nav, inside the div you have a span, and inside a nav you have an unordered list and inside this unordered list, you have five LI's. So we've got the header, an insider header you have all your children. I'm just going to group. Just to make it easier. You've got a div and at the same level, so is a sibling. You have done nav. Now inside the div, you have the span. So you have inside the div, which is a child is used the greater than sign if that is span. So let's group this together and then inside the nav, you have a ul and inside the ul you have five LI's. Lets group this as well, press tab and you have it, you have your header and inside you have your div and then the span and then the nav inside and then inside nav you've got ul with all your five LI's. So now I'm going to let you into secret. You don't have to create one full code and then press tab to have everything written. You can do it step-by-step if you find it easier, and is then easier possibly to troubleshoot if there's any issues somewhere. First create a header and then inside the header you have your div and your nav. So div and nav. Inside the div you have a span. Inside the nav, you have a ul, and inside the ul, you have five LI's. It's very important to understand the grouping and the nesting, et cetera. But you don't have to create one long sentence to then press tab and see everything and because if there is any issue, then you have to go back into it and try and figure out, you know, where was the issue with the grouping somewhere or instead of a sibling about them from nesting or things like that. So it's just faster to do it step-by-step. It's just a good thing to know. All the different functions that emits can show and then it's just a matter for you to play with it and be comfortable with it and know which way you prefer to work with. 8. Classes and ID: Now that we understand the principle of Emmet and we know how to create siblings, nesting, multiplying. Let's have a look at other functions that could be very useful when you are writing your code. So one useful thing to know is how to add a class and how to add an ID to a tag. So it's very simple with Emmet, it works like CSS. So if you have a paragraph and you want this paragraph to have a class called myClass. You just need to say p and then dot for class, like in CSS and accolades myClass, and then I press "Tab". Now I have a paragraph that has a class called myClass. Same way, if you want to create an ID, you also use the same as CSS and by using the hash. If you have p and then you got hash and myID, and then you press "Tab". Now you have a paragraph, that got an ID, myID. So now you can combine it together. So you have your paragraph that's got a class called myClass, and then you want it to have an ID. So you put a hash and then myID, and you press "Tab". Then you have a paragraph that has a class and that has an ID. 9. Item numbering: You can also have multiple classes, and for this you just need to add the dot and the name of the second class, et cetera until you have all the names of your classes. You have p dot class one, dot class two, dot class three, and you press tab. And you can see now that you have a paragraph that has multiple classes. It also works with the multiplier. If you have three paragraphs that has a class called "myclass", you just need to do p dot myclass, and then multiply it by three, and then you press tab, and then you can see that you have three paragraphs that has a class called "myclass", which is really good. But what if you wanted to do this with the ID? Obviously you would have p and then hash myID, and then times three, and you press tab, and then you would have three paragraphs, but the issue there is that they all have the same ID, and obviously an ID is supposed to be unique, so you can't have three elements that have the same ID. For this, you need the item numbering. If you've got p, and then you've got the hash, and then I'm going to create myID, and then I used the $ sign, and the $ sign is what? Is the item numbering. And then I multiply it by three, and when I press tab, you see that you've got p ID, myID one, myID two, myID three. So what you did was, you said, I want all my paragraphs to have an ID that starts with myID three times, and you will count from one to three. The first one will be myID one, the second one will be myID two, and the third one will be myID three. This is very useful when you want unique content for each time. 10. Attributes: Now we know how to add a class, we know how to add an ID, what if we wanted to add other attributes to a tag, to an element? This is very simple with MX. What you need to use is the Square Bracket. Say for example, you have a paragraph and inside the paragraph, you'd like to put a style. So you do P, and then you put the square brackets and you do Style, Equal. And then you open the quotation marks. And then you can say, "Color: blue", for example. And then you go at the end, and you press Tab. And now you have your paragraph that has a style, an inline style. The font color will be blue. There are some elements that image will give attributes automatically too. So if you started with just an image, if you press Tab, you'll see that image would automatically put the source and the alt tag into the image elements. Similar with the [inaudible] anker. If you have A and then you press Tab, you see that the Href would be automatically there. But you can write to source straightaway. For example, for the image. So if you have the image and then you use square brackets to add the attributes. And then you put source equal, then you put "myimage.jpg". You can also add multiple attributes in there. You just need to press Space at the next one. So for example, you could put the Width equal 100. And then you go at the end and you press Tab. And you will see that image will create the image with the source and with the width. But you will see that at the alt tag, because it's important to add the alt tag and you can type straightaway into it. My alternative text that would describe the image. 11. Challenge 02: Now is another challenge time. I invite you to download the Challenge Number 2. Have a look at the wire frame, try and figure out how to do it using your Emmet and then come back and see how I would tackle it. You have a DIV that has two classes and an ID. Inside the DIV you have three images that are called image one, image two, and image three, and they have attributes of width and height. So let's start with by creating your DIV. You've got your DIV and it's got two classes, dot class one, so dot class two. It's got an ID called my ID. If I press tab, I've created my DIV. One thing that is interesting to note is that if you create a empty class, Emmet is going to assume that it's a DIV. If I put dot class one, dot class two and then hash, my ID and I press tab, it will automatically created a DIV. So that's a nice thing to know. Now we have three images. We've got the image tag and then, we have attributes inside it. I've put the square brackets and then I've got to source. And it's called image 123 JPEG. I'm going to be using a multiplier. The item numbering would be the $ sign dot JPEG. Then, it's got a width that's 100 and a height that is 100. I want three of them. I do multiply by three and I press tab. Now, I have my three images that I'll call image1.jpeg, two, three dot JPEG. 12. Numbering text: Now let's learn how to add text when you create code using emmet. Let's say that you want to create a link that just says 'Click me'. What you need to do with emmet is use the curly brackets. You've got your anchor, you type a, and then you've got your HREF that you can use with the attributes, which is the square brackets. We've got HREF equals, I'm just going to put it empty for the time being. You want some texts, so you'd have the curly brackets, and then you can enter the text that you want in there, 'Click me' I press tab. Now you have your anchor that has a link to it and it's got a text inside, 'Click me'. The text also works with multipliers. For example, if you had unordered list, your UL, and then inside of the list, you have five list items. It'll be LI times five and then each of those items, you want them to have a text to it. I'll just put in list item. I go at the end and I press tab. Let's try that again. The issue is that I put plus so the plus means that its siblings, which means the UL and LI are the same level, but really I want the LI tag to be inside the UL. What we want is the next thing. Instead of the plus, we have the greater than sign. Let's try again. Press tab. Now you've got your list, and inside of the list, each list item has got the text list item. Now if you wanted the text to be different and have list item one,list item two, list item three, it's very simple. We've learned how to do it before. It's with the item numbering. Let's go back into it. You've got list item, and then we can put the $ sign at the end and then when you press tab, you can see that you have list item one, list item two, three, four and five. 13. Lorem Ipsum: So now what if you wanted to generate random text? The famous Lorem Ipsum. Emmet has this function where you can actually use this. If you have your paragraph and then inside the paragraph you want your Lorem text. You press "Tab" and then you have your paragraph, and you generated a small paragraph with some random text into it. Now you can control as well the number of words that you can put. So, say if you have the heading and you just want a few words into it. All you need to do is "H1", and then you want your "Lorem". And you want three words. So, you do "Lorem3", you press "Tab", and now you have your H1 that has three words using the Lorem Ipsum random text generator. 14. Challenge 03: This is the final challenge. Download the Challenge number 3, have a look at the way you frame. Try and use Emmet to create this for your frame as quickly as possible and then come back and I'll show you how I would tackle this challenge. In this last challenge, you've got a header that has a class. Inside the header you have a div. Inside a div you got an image, and then at the same level as the div, you have a nav and inside that you have a URL that has five list items, LI's that have different ideas and different five words inside it. Let's start with the main container which is your header, then class one, and you press tab and you've got this. Now I'm going to create my div in which you have an image that has a source. That is called image one the jpeg, and it got an old stack that is called my image. Now you've got a div with the image inside, and then you have your nav. And inside the nav you have your unordered list. And then you've got your list items times five. You want each of those LI's to have an id, so you put hash and then you call it id-1, id-2, etc. It would be id and then the dollar sign, and then you want inside each of those LI's to have a lorem text that is five word long. Now you press tab and now you have your navigation with your lists inside there. That's got different id's one, two, three, four and then it has got five was inside each of those list items. 15. Thank you!: Thank you for joining this class today. I hope you enjoyed it. I really encourage you to go onto the Emmet documentation website to find out more once you get more familiarized with this process. If you have any questions or if you have any comments, please feel free to contact me to let me know and see you soon.