Emmet Exercise

[00:00:00]
>> Steve Kinney: There are some exercises here, do I expect you to do all of them? I do not, there are some where I kinda lead you to water, and there are some where its you gotta figure it out yourself. The ones you gotta figure out yourself are a little bit easier.

[00:00:15]
But play around with it, try it out. Try out some of the different techniques we've seen so far. We're gonna do this challenge. There's a bunch of guided practices followed by some ones you do on your own, but give it a shot and get a feel for it.

[00:00:31]
Again, the more complicated it is, the probably less useful it is. So if you just get the simple use cases down, that is probably good enough. I think that putting Emmett Master on your resume is not gonna get you through the recruiter screen any faster. So as much as is helpful, get a feel for it, try out some of these, and then we'll look at some extensions, all our favorite extensions.

[00:01:00]
>> Steve Kinney: So let's through, obviously, for some of those exercises, the answer was in there. For the other ones, choose your own adventure. So let's look at some possible solutions, there might be more than one way to go about doing it, and I'll show you one more bonus Emmett trick because why not?

[00:01:16]
So for the first one, I have a basic paragraph with some text in it and we can argue of, or for the very small ones, are they worth it? He says as he talks, so if you put the text in curly braces, that becomes the inner part. Not that impressive at this point, but if we did something like p, and then the class was,
>> Steve Kinney: Summary, and then we could say we can get the class in there automatically, the other thing we can do is then also insert mouse-up as a second one.

[00:01:59]
We can do ul with the li that you saw me doing earlier. Let's put the word item in there, but I want three of those, right, and I'll get all of that text in there. Other ones, again, mostly just to get a feel for it, we can see this one, how many characters am I actually saving?

[00:02:18]
Not that many. Image.png for this third one, and if we did a second attribute, it kinda looks something like this. Again, for that one, did I necessarily save myself a ton? But theoretically, if I did image and I said, I don't know, icon, and I did it times 3, obviously, you get something a little more useful here, where I get three of them, so on and so forth.

[00:02:47]
The other thing you can do is let's finish with the actual solutions before I go into bonus content. Easily distractible, as we can see, we saw with the nested structure. And you could build out entire components that way, so on and so forth. The other ones that we can do that are kind of useful is you can get some lorem ipsum as well, right?

[00:03:16]
So we could do something like, let's do for this last one, we'll do header. And then we'll say that's got a nav and it's got a ul and that's got an li times 3, that will give me that whole layout. The other thing you can do, though, is something like a div, I can do lorem, and I give it how many words I want, and I will get some lorem ipsum in there of 10 different things, or 10 different words rather.

[00:03:45]
And so if you need to fill out an entire thing, cuz maybe you don't have the data from the backend yet and you're just trying to get the layout down, you can have some content without Googling whatever lorem ipsum generator that I was Googling for 20 years. You know the one I'm talking about, it's like lipsome, I don't know.

[00:04:03]
But now, I don't do that anymore, so I don't remember what it is, because I can just type that in Emmett and VS Code for free and get some layouts. The other thing you can do is you can do something like item and then the $ will be a placeholder times 5, you'll get items 1, 2, 3, 4, and 5.

[00:04:25]
Little stuff like that, usually very useful for placeholder stuff or scoping out the basics of a component or something along those lines, but nice for kind of just getting some stuff really quickly. Cuz a lot of times, that stuff can be a little bit tedious, especially for nested things where you might have a bunch of siblings and stuff like that and classes, so on and so forth to be able to kind of just get something very quickly with not real CSS, but CSS dyntax is somewhat helpful as well.