Emmet For Faster HTML & CSS Workflow

Key Takeaways

[Music] hey what's going on guys in this video we're going to be taking a look at EMT which is one of my favorite tools for web development it really really streamlines and increases um your workflow with HTML and CSS and gives you some really nice abbreviations so that you can quickly add your markup and you can quickly add your CSS and it also gives you some really cool actions such as quick commenting out uh blocks of code and then uncommenting them so this is something that I think every s every developer should at least look at and try if you don't like it you don't need to use it but um my guess is that if you try it you're going to love it because it's it's going to just cut out a lot of the crap that you don't want to do um you know so we're going to take a look at it uh mostly the HTML abbreviations but we'll also take a look at some of the CSS and I think you'll enjoy it and let's get started this video is sponsored by Dev Mountain if you're interested in learning web development iOS or ux design Dev mountain is a 12we design and development boot camp intended to get you a full-time job in the industry to learn more visit Dev mountain.com or click the link in the description below all right so EMT is used as a text editor plugin and if we go to Emit doio and we go to download it's going to show you all the different text editors and all the idees that you can use EMT with now inall installing EMT is going to be different depending on what you're using in this video we're actually going to be using adom which is a really nice text editor by GitHub it's built on electron which is a JavaScript platform for building desktop applications it's one of the most popular um text editors for both front and backend uh development so that's what we'll be using but of course you can use Sublime Text you can use U net beans IDE Eclipse notepad++ there's third party support for visual studio code for um PHP storm just pretty much any um any decent editor that is available at this time all right so we're going to go into adom just open that up and uh what I have here is a folder called EMT sandbox and this will all be available for download and I have an abbr HTML file so abbreviations HTML and I have a bunch of comments here which is going to be kind of our guide to uh to the abbreviations that we're going to use and then we also have a CSS file and then an actions HTML file we'll get into that later now to install EMT in atom it's very very easy all you have to do is go to settings and go to install you can search for EMT click on packages and you can see I already have it installed if you don't you'll see this install button just go ahead and click that and then uh you'll have settings uninstalled disable you might have to restart the editor for it to take effect though all right so once you have that set up we're going to jump in now again if you're not using atom all of the abbreviations are still going to be the same you're just going to have to install it on whatever text editor you're using obviously I can't go through every single text editor and go through the steps but it should be pretty easy especially if you've installed plugins before so let's start off right here um now in the comment we have the actual short code or abbreviation that we're going to type now to trigger our abbreviation you just hit tab so for instance I'm going to go right here and I'm going to hit div Tab and what that's going to do is it's going to give us a beginning div tag and an ending div tag which isn't really anything special in fact in adom even if you don't have EMT installed it'll do this um but we'll get into you know the the the more advanced stuff along the way but we're going to start at the you know start at the very uh Bare Bones here so let's say we wanted an H1 beginning and end tag we could say H1 tab Okay so that way we don't have to type out the ending tag and the brackets and all that now there's also short codes for longer elements for instance block quote header uh footer button things like that so let's say we wanted a block quote we could do BQ tab that'll give us a block quote if we wanted a header we could do HDR tab footer we could do FTR tab button BTN Tab and you can still do the long version as well so I could still say header Tab and that'll give us a header as well all right now let's get into adding classes and IDs so as you guys know if you know any HTML CSS you know that a class is represented by a DOT an ID is represented by a hash or a number sign so let's start off by creating an H1 with the class of my heading so normally you do like div class and you put the name of the class in this case my heading and then you'd end the div like that uh but with EMT what we can do is we can just say uh oops that was a div I meant to do an H1 but whatever if we wanted an H1 with the class of my heading we can just do H1 doy heading Tab and that'll give us a class of my heading so let's say we want to div with the class of my class so we could say div. my class tab all right now when we're using divs you don't even have to use the div element you don't have to type out div dot you can just do dot my class Tab and it'll give you a div with my class okay now if you wanted to add more than one class onto the same element that's easy as well so let's do a div with a class of class one and class two so we'll do do class one dot Class 2 Tab and now it gives us a div with both classes okay just make sure that you attach it right here you don't put a space in and then Class 2 because that's going to mess it up all right just make sure that they're attaching like that all right now for IDs we can do uh hash and then let's say we want to div with the ID of my ID so we'll say hashy ID Tab and that'll give us a div with the ID of my ID all right now we can also mix and match IDs in classes so let's say we wanted a div with both my ID and a class of my class we could do Dy idid and then dot my class Tab and now you'll see it gives us an ID and a class all right and if we wanted to do you know more than one class with the ID we could do my ID and then a class of class one oops forgot the dot class one and then another class of class two Tab and now we have our ID we also have two classes all right so that takes care of just you know the plain element as well as IDs and classes now what if we want to add content into our element so for that we use brackets so what I'm going to do is go right here and let's say we want to have an H1 and inside the H1 we want to have the text my title so for for Content we use our curly braces so we'll say H1 curly braces my title and make sure you go to the very end and hit Tab and now we have an H1 with the Text my title okay you can also you know add a class to the H1 if you want so we'll say H1 do red and then we'll put our curly bra and we'll say my red title hit Tab and now we have an H1 with the class of red and it has my red title as the content all right this actually shouldn't be here so what about nesting what if we want to put you know an element inside of an element so for that we want to use an angle bracket so we want to use a greater than sign so let's go right down here and let's say that we want a div inside that div we want a ul and then inside that UL we want An Li so what we would do is take the div we'll use the the nesting character which is the angle bracket or the greater than and then we'll do ul and then we'll do another angle bracket and then Li and then tab and you can see what that's done it's it's created a div inside the div put the UL inside the UL put the LI all right so let's say we wanted to put some content in the LI we could do the same thing we could say div inside the div the UL inside the UL the Li and then inside the LI we'll just say list item one and then tab and you can see it's put the content inside there now what if we wanted to put more than one Li usually when you have an unordered list you'll have more than one list item so for that we can use multiplication and we use the asterisk for that so let's say we want a UL we want to give it the ID of navigation right and then inside there we want a nest the An Li but we want more than one Li we want five of them so what we can do is we can say multiply by five right and then we'll put another angle bracket and then the content that's going to be within it and I'll just say list item one all right right we'll hit Tab and now we have a UL ID of navigation we have five Lis and inside it says list item one now we can take this a step further and we can actually use an index so that we can access whatever index number of the LI we're on so instead of doing list item one and all of these let's do one through five so to do that same thing we're going to take a UL ID of navigation and we're going to put Li * 5 right and then for the content we're going to say list item and then a money sign which represents the index so we hit uh Tab and now we get list item 1 2 3 4 five all right so just a a cool little trick if you want to add an index in there so we've talked about nesting with the angle bracket with the greater sign greater than sign so what about siblings what about things that are on the same level so if we look at this UL here all of these Lis are on the same level okay the Allis are actually a child of the UL and the UL is a parent of the Allis but these are all siblings so let's say that we want to create a div and then on the same level we want a UL so for siblings we're going to use a plus a plus symbol so we'll do plus ul and then let's do plus Li and then tab and you'll see that it created all three of these elements but nothing is nested they're all siblings they're all on the same level all right so let's say we wanted to have an H1 with a a class of title and on the same level we wanted to have a paragraph with a class of body hit Tab and now we have an H1 and a paragraph with classes on the same level now what if we wanted to wrap a div around these so we can mix and match using you know nested elements with siblings so what we would do is we could say uh we'll have a div and then inside that we'll have the H1 with a class of title and on that same level we'll have a paragraph with the class of body so now we have a div uh with an H1 and a paragraph inside of it all right so we can also group things together so what I'm going to do here is create a div and then we're going to go ahead and nest in a group so we use parentheses for groups and this group is going to have a header and inside the header will have a UL inside the UL we'll have an Li let's do two liis so we'll say multiply by two and then we'll put an a tag inside the Lis all right then outside the group let's go plus footer so on the same level as the div we should have the footer and then we'll Nest a paragraph inside there and I guess in the paragraph let's put some content we'll just say uh copyright 2017 okay we'll hit Tab and it created all this cont all this markup for us so we have our div we have our header and footer which are on the same levels the header has the UL with the two Lis the footer has the paragraph all right now we can also add attributes now sometimes when you do for instance a tab it'll automatically add an attribute like an href because you're not going to really see an a tag without an href at least not very often so they actually included that by default uh but to add custom attributes you can do you can use brackets so let's put some brackets here and I am actually going to use an href as one of these so we'll say we wanted to go to http google.com but let's let's say we wanted to add a Target attribute as well so we we would just put a space here and say Target equals let's do blank and then if we wanted to add a title we could do that as well like that and then we'll go and we'll hit Tab and now you'll see it turns it into an a tag with all of those attributes of and of course it doesn't have to be an a tag you can add attributes to uh any element all right so now let's take a look at forms and input now before I do this I want to show you guys a couple resources because I'm not going to be going over every single abbreviation so if I go back to my browser okay one of them is this cheat sheet this is at docs. it.i sheet and this has all the different um all the different symbols you'll see multiplication uh nesting siblings all the stuff we just went over but it goes in depth with the different abbreviations so if you want a color input a number input put I'm not going to go over every single one so this is a good resource for you guys all right uh it's pretty big too pretty long then you have all the CSS stuff uh and then you also have a file called Snippets dojason which is actually included on your computer if you installed EMT and you can uh you can actually edit this file but this is the GitHub page of it and it's separated into CSS right here and this has all the different CSS abbreviations we're going to go over some of these and then down here we'll have the HTML let me just scroll down uh right here we have all the HTML stuff so for instance BR is going to give you a br tag uh image tags inputs all this stuff so uh you might want to look into this uh we're actually going to add a custom Uh custom abbreviation in a little bit but I will get to that uh in a little bit now we're going to take a look at forms and inputs so if I just say form tab that gives us an action again because that's that's a common attribute and they decided to put that in there by default now usually you would want to have a method attribute to say is this is this going to make a a post request or a get requests so if we want this to be a get request form we can say form colon get Tab and that'll give us method get same thing with post we can say form colon post that'll give us a method of post okay okay so if we type in label tab that'll give us a label with a four attribute if we do input the default for that is going to be a text attribute freaking seagulls uh the default is going to be a text attribute and I'll show you how to change that in a minute now if we do inp tab that'll also give us an input but it will add a name and an ID which is very common when you're building forms all right now if we want to change it from a text to let's say an email input we can say input colon email tab and that'll make it an email all right if we want to make it a submit input we can do input S Tab and we get submit and again you want to check these uh let's see these resources here let me just show you real quick [Music] so where is it looking for the submit right here input s okay so you can do input s or input submit and that'll give you the input with the type of of submit also a value okay so this is kind of like a cheat sheet in itself now to locate this file it's going to be different depending on what text editor you're using I'm using atom so it's going to be in my users folder and then in the user whatever user in my case Brad and then atom packages emit node mod modules EMT and then lib and you'll see I have a Snippets dojon file and I can go ahead and open that up all right and that's going to be the same file that we just looked at on GitHub it has all the CSS uh abbreviations and all the HTML abbreviations and I'm going to show you how to add a custom one in a minute so let's move on to actually let's do a select real quick so if we say select tab that'll give us a select tag with a name and an ID now we also have extended structures we can use this plus symbol so for instance if I say Select Plus tab that'll actually add the option in there an option tag if we do table plus that'll give us uh table row and table column if we do O+ that'll give us the LI same thing with ul+ all right so it just adds the the inner tags of the of these elements all right so let's take a look at creating a custom alias in the Snippets file so let's say if we go back up here and we look at this this right here we created a div we have an H1 and a and a paragraph class of title class of body let's say we want this to show up if we say post tab so we want to create a custom at uh custom abbreviation called post so what I'll do is go into the Snippets file make sure sure you're in the HTML section and then inside abbreviations let's just go all the way down okay so it ends yeah it ends right here so I'm going to put a comma and then let's do post and what we'll do is we'll set this to let's do div oh we need quotes here so we'll say div with the ID of post post and inside that we want to have an H1 with the class of title and on the same level we want a paragraph with the class of body all right so that's what we want as our post so let's go ahead and save this now if I try and do it let me just go down here if I try and do Post tab it's not going to work because we need to actually restart atom since we edited that file so I'm just going to close it up and restart and then if I go right here and I say post tab now you can see we have our little post template all right now you probably would have this you know you'd have a lot more markup in here um something that's actually worth you to create uh a snippet for or um an abbreviation for but just know that you can do that all right another very helpful thing with EMT is we have docu uh doc type and structure short codes all right I keep calling them short codes but they're abbreviations for instance the exclamation you guys have probably seen me use this quite a bit if I just put an exclamation and I hit tab it gives us this entire HTML uh structure with the doc type with the HTML tags the head and body tags the title The viewport it gives us all that stuff just from typing in exclamation tab which is really helpful Now by default it's set to HTML 5 so if I go down here and I say HTML 5 colon I'm sorry HTML colon 5 tab it gives me the same thing but we can also set this up for different versions of HTML for instance if we want HTML 4 transitional we can say HTML colon 4T Tab and you'll see it actually gives us the doc type for HTML 4 okay in transitional mode now if we look at the just go back to the Z its file and we go down right here you'll see the different options so HTML 5 I showed you that 4T for uh transitional we have HTML 4 static we have X xhtml XML um you can also use uh emit with SVG so there's a lot of stuff that you can do that I'm not going to get into um I you can even you could create a whole course on emit but I want to just show you the the basics and fundamentals the things that I use the most all right let's go back to Adam and now what I want to show you is something else you've probably seen me use quite a bit if you if you watch my videos and that's the lurm ipsum generator so that's the dummy text generator you'll see if I go over here and I type in laurum tab it'll give me a paragraph of sample text okay now if I want to limit the number of words to say 10 I can say lauram 10 Tab and it'll give me 10 words okay if I say lauram 500 tab it'll give me five 500 Words okay and then another cool thing we could do is let's say we wanted to create an unordered list and we wanted to have four list items with different dummy text in each one so we could easily do that by saying UL we'll give it a class of my list and we're going to say we're going to Nest into that lauram 10 do item and then we're going to say multiply by four and then tab and what this has done is it's created an unordered list with the class of my list and it gives us four Li with the class of item and then we have some dummy text in each Li okay and notice that the text is all different so this is really good for prototyping and just creating something to look at uh while you're creating your templates or your your uis or websites or whatever it may be all right now for the CSS I'm not going to really get in depth in this because uh for one thing this video is running kind of long already but the HTML is is the the most important part that I wanted to cover at least in this video so in the CSS file I have this my element right and I'm just going to show you some of the different abbreviations and again you want to you want to use that cheat sheet as a reference uh but let's go over some of the the the simpler things so let's start with the colors so for color we can do c colon and then let's say we want this to be black so so color of black I'm going to say um hash 0000 Tab and that'll give us a color of black we can even use a short shorter shortcut and say C uh hash zero tab because since the color is all zeros we can just specify one zero uh if we wanted it to be let's say light gray so F4 three times we could say C and then we can do uh hash F4 Tab and it'll make it light gray okay so that's colors let's talk a little B bit about positioning so if we wanted to position this element absolute we could say p colon a tab and that'll give us position absolute let's say we wanted to do relative we could do p colon R tab position relative we can do fixed we can do um what else is there static so P colon s would be static uh now if we wanted to set the coordinates for instance we want to do top 100 pixels we can do T 100 tab Now by default it's going to do pixels but you could do percentages if you want so if we say top let's do 50p tab not top just T t50p Tab and that'll do a 50% if you wanted to use M's you could do let's do it from the from the left so we'll say left not left just L uh let's see L we'll say a 3 e tab so that'll be left 3M all right so for floating we could do FL Tab and that'll do float left by default uh we could also do FL colon L which will also do float left we could do float right by flr if we wanted to do float none we could do fln all right and then to clear we can say CLR tab that'll do clear right by default but we could also do uh what is it CL R which would be which would do clear right we could do CL L which would be clear left clb clear both and cln clear none all right another thing we can do is set the display so let's say DB that'll display as block we could say di for inline or D IB for display inline block uh for for margin we can say m 10 tab that'll give us 10 pixel margin we can do specific um position so let's say margin right so Mr 10 would be margin right we could do ml 20 notice I'm not putting the colon It's not uh required but you can for instance we can say MB colon 10 and that'll do margin bottom uh 10 pixels and again we don't have to use pixels we can say Mt 1e and that'll be margin top 1 M okay padding we have the same thing we can say p colon 30 or we can just say p 30 okay that'll both give us padding 30 pixels if we wanted to do padding top we could do pt40 padding top uh PL I don't know 12 padding left okay so just some some nice short Cuts so for sizing we can do Heights and widths so if we say w 100 tab that'll do width 100 pixels we could also do percentages so if I say h let's say h 50p that'll do height 50% we could also do H Auto H col H colon Auto or just H Auto or maybe H Auto doesn't work no that doesn't work my suggestion would be to always use the colon because sometimes it's not going to work without it uh let's see what else I want to show you real quick uh for lists so if we say list colon n that'll do list type list style type none we could do um list Colon c that would do Circle we have list list colon s would be square and so on again you want to look at the Snippets file or the cheat sheet and you can see everything that's that's available uh let's see text align so text align would be ta so we could do T L which would do left we could do ta colon R which would be right we can do justify so t a j would be justify we can do text decorations so if we want text decoration none we can do TDN we can do T duu for text decoration underline uh fonts I think this is really cool the font family so let's say we want uh let's say FF colon a tab and that'll give us the whole you know Ariel helvetica sand serif this is something I hate typing out so that's really helpful um there's also like FF fft which will give us Times New Roman some fallbacks ffv which will give us verdana so font families we also have font weights so if we do FWB that'll do bold we can do FW for normal we can do FW and then a number like 400 okay so we can set the font weights that way we can also do font Styles so FSI for italic FS U for not U um what is it n for normal and we can do FS o for oblique all right and then for important we can do just an exclamation tab that'll add the important flag and what else we can do combinations so let's say we wanted to we wanted to have like um padding right 10 plus margin left five Tab and it'll add both of those those Styles all right so like I said there's a ton more there's animations there all there's all types of short codes and abbreviations you can use I'm just going to go ahead and save this I will have this stuff available in the the link in the description all right so lastly I want to get to some actions now I want to advise you that depending on what editor you're using and what other plugins you're using some of these combination of keys may not work you may have to go in and change them um there there have been quite a few things that have been quite a pain in the ass to figure out and try to change and all that but I'm going to go over some very basic stuff um this this is by no means everything I would suggest looking at the documentation to to find everything but I think one of the most helpful actions is the commenting toggle the comments which is going to be control um control and forward slash so if we go down down here to this little bit of HTML that I have let's say we wanted to comment out this section we could just highlight it and we can do control forward slash okay if I wanted to comment out this H1 control forward slash and then if I wanted to uncomment it just as easy we just highlight it control forward slash same thing here and it's not just HTML we can also do this in CSS if we wanted to take all of these you'll see it'll add it'll comment out every single line that is highlighted want to uncomment it very very simple so that's probably the the thing that I use the most as far as these actions go we can also do this goto matching pair so if you're stuck and you can't find the ending div or the ending section tag or or some other tag you can do Control Alt J now usually with with text editors like Adam if you hover or if you click on the opening div the the ending one will actually uh have a line or something under it or it'll be highlighted but if you don't have that you know you can do what was it contrl Alt J so if I hit Control Alt J You'll See it'll skip to the ending div if I go on this section contrl Alt J it'll go to the next SE the ending of that section now another helpful one is to select through items we can do control shift and and period or and control shift comma to go back I think that's the order but let's go ahead and click right here we'll do control shift period and that's going to go to the next uh attribute which is the ID of page it'll go to the value next it'll go to the next tag to the uh the key value pair and then to the value next tag and so on now you're supposed to be able to do comma because that was shift control period which goes down comma is supposed to go back but it does not in my case I think something else is overriding it but it should you should be able to navigate up and down all right let's see what else so to move things if you want to move lines up and down you can do control up or down so let's say we want to take this paragraph and we do control and the arrow key up and down so we can move things around which is kind of cool uh we can merge lines so let's see what's that shift control M so if we want to take this section and do shift control M it'll put it all basically on one line okay we can also increment values or numbers uh so let's go to the CSS and let's say this 100 pixels right here we'll go ahead and highlight that now if I hit if I hit alt and then the up Arrow it'll actually go up by 0.1 okay down will go down by 0.1 now you're supposed to be able to do shift control up and down so shift control up and that does not work for me for some reason I don't know why I think it's it's again it's being overwritten by something else and then if you want to go by tens you can do shift alt uh yeah shift alt up you'll see it goes up by 10 we can go down by 10 you can also um basically do some math here math expressions with control shift y so for some reason I I did like um four * 5 and I I highlight that and I do control shift y it'll actually perform that that arithmetic which is kind of cool all right so I think that's going to be it guys we're kind of running out of time here now by no means is this every single thing that EMT can do it's just an introduction I would suggest looking more into it um so you know don't don't come hit me with you know what about this and this and this I know there's more you can do but this is just the stuff that I personally use it mostly for um so hopefully you enjoyed this video guys and I will see you in the next one so if you guys really like my videos and you learn a lot from them and maybe have a couple extra dollars to spare check out my patreon page I'm working on creating special content for patrons you also get special deals on future courses and there's even an email support tier for all YouTube videos and projects to learn more visit patreon.com trvy media