![]() And then inside of that there is an anchor with an id of goButton, and it has a class of button, it is primary, and it is large. And I'm gonna put all of this stuff down here, inside that new section. So what this does is, says, this is a section, and then I'm gonna say, at the same level, I'm gonna have a new section. So what I'm gonna do instead is, I'm gonna group these things together. So we can do that with this character here. Now, we need to go back up a level, cuz we went down a level, so we need to go back up a level. And then inside of that, there's an input that has an id of colorInput, and it has a class of input, and it is large. So what we're gonna do here is, we're gonna say we have a div that has a class of column, and it is 10, these are CSS classes. ![]() We have two blocks that occurred at the same level, we can create all this with Emmet. And right here we've got two sections, we have two column elements, and then, inside of those column elements we have things. And we're gonna put this inside the column's class here. So for instance, let's create now this second one down here, on step 2. Now, you can use Emmet to create a lot of HTML at one time, if you want to do that. ![]() So, this is how I normally use Emmet, is just in short sections. And then I come down to the bottom, and I just sort of repeat that, and inside there's columns. And then I go inside of that, I have an image, and I need to set the source, like this, okay, and I'm done. has-text-centered, like this, if I can spell, and then I hit Tab. So, I will do something like, we have a class of. And the way that I use Emmet is, I use it in spurts. So, what I'm gonna do is just create some of this markup that we see here. And now what I wanna do is just start building out this application a little bit. And you can Tab between the tab stops here, and we'll title this application, and we are gonna call it, I Love Lamp. Now, you can build out Boilerplate HTML by just hitting exclamation point and Tab, and then you get a whole HTML page. So what we're gonna do here is just start to build out a page. So, you see, I didn't actually have to specify that was a list item, I just specified the class, and VS Code, or Emmet rather, knows that because you're inside a list item, or an unordered list rather, you want a list item. We can just do, list item, and I think we can do times 3, and then hit Tab, and that's what we get. ![]() When I mean that it's aware, I mean that if we do an unordered list, and then inside of that we want a, say, three list items with the class of list item. So, if you do this main.application, you will get a div with main and application. Now, you can also just leave out the div part, because Emmet is aware of the context that you're in. We could do a div, and inside of that is another div, and inside of that is another div, and inside of that is an anchor, and that's what we'll get here. We can also use this to go down into elements. And if we expand this, we get a div with an id of main, and a class of app. Or, that's not a good class, that's a terrible class name, let's do app. So you can do div, maybe it as a class of main, or an id of main, and it has a class of body. You can do that for any HTML, if you wanted an anchor, anchor, and then you can see it's an abbreviation, Tab, now. So what you can do instead is, with Emmet you can just type div and hit Tab, and it gives you a div here. Opening and closing carrots is clunky because it's a shift action. There's nothing wrong with this, except that opening and closing brackets sort of, what are these called? What's this? Is it a carrot? The carrots, are the carrots? Nobody knows. So we're sort of used to doing this, where you have a div, and you type div, and then you close the bracket, and then VS Code knows, and it gives you a closing div. If you haven't heard of Emmet, it's just a way to write HTML faster, because we write a lot of HTML, and it's a little bit clumsy if you do it by hand. ![]() If you've already heard of Emmet, I'm gonna show you some things maybe you didn't know that Emmet could do, it can do a couple of really cool things. Let me just turn this off for a second, inside of VS Code is something called Emmet. So, one of the main productivity tricks that you need to know about inside of. We open this index file here, and, man, my comments are dark, they just look like text now. We are going to be building an application today, throughout all our exercises, that allows you to control the color of the lamp. > Burke Holland: We're gonna get into some of my favorite productivity tricks next, and I would like to introduce you to this lamp. Transcript from the "Emmet for HTML & CSS" Lesson ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |