Speed up your HTML workflow by 50%?! Emmet Tutorial

Key Takeaways

today we're going to before we begin to win to mention this video sponsor Skillshare comm which is an online learning community for creators with over 25,000 classes in design business and more so whether you want to feel your curiosity your creativity or even your career skill share is the perfect place to do just that for instance you're about to watch my video on HTML and CSS but you could watch this full HTML developer course at skill share go share is also super affordable with an annual subscription of being less than 10 bucks a month but if you're one of the first 500 people to click on the link here in the description in YouTube then you get the first two months 100% free so join up everyone what's up Gary Simon of course techo calm so today we're gonna be checking out something called Emmet in Visual Studio code which it ships with Visual Studio code by default that's the code editor that I've been using for quite some time very popular Innisfree and Emmet is a way to really speed up I the way in which you write your HTML especially and also CSS properties and values so I'm gonna do a quick sort of crash course right here and you're gonna see just how easy it is to write even complex HTML markup with nestings and siblings and all that all in one simple line it's very very cool stuff so let me know in the comments if you guys already use Emmet and yeah let's go ahead and get started but at first make sure to subscribe alright so we're gonna be using em here in Visual Studio code I just have an indexed on HTML page open and it is completely empty so the first use of actually the the very first character if you follow along with this I this channel when I'm doing any type of HTML the very first character you know I always specify is a exclamation point and we can see I with a suggestion here we have an Emmet abbreviation and I always just hit enter and there we go we have her quick boilerplate HTML probably the biggest time-saver right here when it comes to structuring I your HTML data with Emmet so very very handy the next thing I'll usually do is right here within the head is hittin typing link which is just another HTML element in that's how you can specify HTML elements without say for instance happen to you know do the opening bracket link and then having to put all the other attributes in by hand you can simply hit link hit enter and there we go we can put in our main CSS file if we wish and that's something I always usually do as well so let's come here between the body tags I'm gonna make this big hit ctrl V to get rid of the sidebar and so as I mentioned just now I HTML elements the ways you work with them and you make your life easier with Emmet is to just type in the name of the element so you don't start typing in you know the opening HTML element bracket right here you just type in the name of whatever it is you want so if you want to div you hit enter okay so you can it creates if there's a closing tag with it I it'll create that as well you just enter and you start typing I you could also do for instance span strong they're all there essentially so it makes your life quite easy in that regard you can also specify classes in IDs so for instance if we want a div with a class of container which is pretty common well a class as specified in CSS or denoted is I with a period same thing right here in HTML so if you want to do with a class of stay container there you go we have our div class of container if you want an ID div well same thing as in with CSS we use the the hash tag here and we'll just put my ID you give it whatever name and there you go very easy stuff now what if you wanted to do both an ID and a class associated with a given HTML element well div container and then my ID now what about having multiple classes well we just keep on putting periods container whatever and my ID very very easy stuff alright so let's also talk about specifying attributes so for instance I the Tagg well has any number of attributes so if we took type in a by default on some of the HTML elements it's going to incur include the required attributes for you already I but we could also put in the way you specify attributes or even custom attributes you put it in a brackets all right so target is an attribute that allows you to specify if a given link is opening up like in a new tab or a new window so we just put equals blank here and there we go it's going to include our href by default but also our attribute right here all right we can also do another one um input I by the way you if you because there's a lot of different types of inputs we can see them all listed out here so like input text that's gonna have a bunch of attributes that are there ready to save you time all right so next let's talk about siblings all right so let's say you know for instance that you want multiple HTML element say for instance type based elements maybe you're working within a a main section area where you have an article content so you're going to have maybe an h1 you use the plus operator and that makes a sibling HTML element so maybe also a paragraph so as you can see it's just as siblings they're not gonna be nested inside of each other they're gonna be just right after one another all right so I we can also do siblings in an add in all the other stuff that we learned already so div with a maybe my class right here I plus container with an ID very very very simple stuff all right next up after that let's talk about nesting so I let's say we want to have a div the way we nest is by using the I greater than sign so we'll put inside of the div maybe an h1 very very simple I maybe we're going to have multiple so we'll say main I will have a section and then we'll have an h1 very handy I should have used this a long time ago also let's say again we can also mix all the other stuff so div container and inside we're gonna have a h1 with my title you know very very simple I we could also do groupings so let's say for instance we have a main element and we're going to nest inside of it I a section and the way we do these groupings as you can see is the parentheses so we can have a section inside of the section we'll have an h1 plus a paragraph plus a button we'll close this and then after that we'll say we'll have another section for instance so as you can see we've you know generated this complex sort of markup not necessarily complex but we have several things happen here we have everything inside of a main element and then we have a grouping defined on the section element right here with three siblings right here and then after this we have another section so very very handy stuff now what about text a lot of this stuff like if we do div container h1 we still have to type min whatever here you can also specify text in that single argument as well so I we could do say for instance a main will do another grouping here inside of here the h1 will make the the text which you denote through the curly braces I will just say my headline all right and then we'll do a paragraph after it with the text of oh hey this is my paragraph we can also do a button with the text of click me and plus section again I write there so now we don't have to specify all that individually because you'd say that you'd sit there have to navigate with your keyboard arrow or with your mouse to specify those otherwise another example again would say I have a paragraph with its Gary here no I think it's saying side of the paragraph will have a link so first it's going to say on its Gary here and actually I'll put a period in a space inside of the paragraph will have a link so we'll say a click me and then we'll have a sibling so we're going to put a plus and then we'll say to learn more so if we hit enter we'll see we have our paragraph with is Gary here we have our age ref click me and then to learn more very very very very very cool stuff and as you can see once you start committing this free also you know this different way to kind of sort of like right up your HTML you'll save a tremendous amount of time especially for somebody who's working with HTML a lot as a front-end developer let's see you can also do really cool things like multiplication so a standard use case for this would be if you have an unordered list element with a bunch of list items so if you wanted to repeat those how would you do that I without knowing the multiplication so it's very simple we say we have a ul and of course because the Li elements are nested inside we're gonna use this to nest them inside our Li so if we just hit enter now it's only gonna give us one yeah you could hit shift alt down real quickly I but that's not ideal because it makes it even easier than that so we can put the multiplication sign in the number of how many list items we want so five there we go very handy we can also make it even more dynamic than that so we can open up in here which is allows us to specify text my list item and we can even pass in sort of a variable placeholder in a sense if we put in the money sign and we'll do times five so my list item one two three four five I we can even get a little bit more complex than that so if we want to specify an ID an ID perhaps that is incremented and unique as it needs to be I can put in I let's see here what's called the ID Li and then we'll attach the number right here to it and then we can also give it a class brosef and then we'll put in maybe the number sign here at the end and then we'll give it a name or a value here of my list item like we did just the previous example and we'll do this all eight times so we have our li one two three four five six seven eight and one two three four five six seven eight and then also so as you can see through the ID class and value it works very well so let's also talk about just a few of the implicit names which will save you even more time I for instance instead of having to put div container you can just put in container and because div is the most commonly used HTML element it's going to allow you to do that you can also do it with IDs as well so just put in this whatever and it's going to give you a div with the ID of whatever very very handy stuff I so next up we're gonna take just a little bit of time and that's primarily it for I the amount of stuff there's a few other bells and whistles that you can take a look at when it comes to the HTML portion of Emmet I and I'm gonna show you the sort of like a cheat sheet and I'm gonna include this here in the YouTube description that's gonna link it and it's going to go over a lot of the stuff that I just went over plus there's a few other things that you can do on for instance you can reverse the order of your list items here from like five four three two one just small things like that and of course it's this cheap seats gonna tell you all like every single thing you can do in terms of HTML elements but you can also do things I like this for CSS so you can make your CSS life a little bit easier as well so let's create a let's create the forward array here CSS main CSS and inside of here let's say we have a body element and really the the in terms of Emmet working with CSS it's primarily for specifying your properties and values not necessarily your rule sets up here I not real sets with the selectors so what we could do I let's say for instance we want to have margin m 10 so a margin of 10 pixels in DD Fox 10tv Fox defaults to pixels right here so if we want to specify something else I a different unit we can specify say MTM e m 4e m so again the same thing works for padding there are a ton and really it'll take just some muscle memory in repetition to really commit these to memory we can do things like line height 10:00 p.m. I know it looks silly but the suggestion makes a little bit more understandable we can keep on doing things like width we just simply just put a W with the value maybe when we want this to be percentage very easy i we could do dn-4 display:none i you can do DF for display flex there are a ton I so what I suggest doing is figure out the ones that you use the most and it's probably going to be things like with margin padding and probably just try to remember to use those and it'll make your life just a little bit quicker the background color is BGC and so all this stuff is here in this cheat sheet and you could see especially for CSS there is a massive amount here that you can really just start scrolling and checking out I mean it's just it just doesn't end it is insane very very cool stuff alright so hopefully you learned something new there and you're gonna start using Emmet let me know in the comments what you think or if there's any other way that you prefer to writing your HTML alright I'll see you guys very soon goodbye [Music] [Music]