Hello lovely people. In this tutorial, we're gonna look at our cheat sheet. Okay, so this thing here is the video version. There's gonna be a PDF. There'll be a link on the screen just here  of the downloadable, printable PDF. So watch it, print off the PDF  and stick it next to your desk  and become more awesome in Dreamweaver.

So first one we're gonna look at  is something called quick edit. I love quick edit. It's new for 2017, Dreamweavers  of using an earlier version. It's not gonna work. Now, quick edit is a way  of editing the CSS really quickly. And in this case I have got this button  and it's far too close to this Ptag, it's been annoying me,  this whole tutorial series.

Okay, so I wanna push that down. So there's a P tag here. So let's jump into Dreamweaver. And Dreamweaver. Here's my header. There's my, actually where is it?

So header, there's my main content  and there's the PT tag,  the offending ptag, and there's the button underneath. So there's the Let's talk button, there's the PT tag  and it's got a, a class called Hitting Body. So if I right click it, I can go to quick hit it  or I can use Command E, the shortcut, even shorter shortcut. Okay. The cool thing about it is,  can you see it's like a little wormhole, kind of goes  through and finds my style. Um, css, it knows that it's at line 75  and this is my heading Body copy.

Great. It's gonna and found it. Okay. And I'm gonna put in padding bottom  and we're gonna put in 20 pixels. Okay? I'm gonna close that little wormhole up  and let's check in the browser.

Hey pH, some distance between the two. Okay, so why it's good,  it's just different from going into styles  and trying to figure out which style it is. Okay, there he is there. But if it's a long  CSS go away Facebook. Um, yeah, it could be super helpful. Quick edit it.

Okay, the next one we're gonna look at  is something called Emmett. Um, if you've done the videos  tutorials, we've done a little bit. Okay? So just recap. Say I want to add a div tag. I, and I want to add a class to this div tag.

So I want a div tag and I want to add a class called column. Okay? Or a class called awesome. Okay. And I want there to be, how many of them? I would like there to be six of them please.

Okay. And if I hit don't put return hit tab, look at that. I've got classes, six of them  with the class name of awesome. Okay, so let's say we need something else. Let's say we need uh,  an unordered list with a bunch of list items. So we go L ul and we'll go ally  and we'll say we want 20 of them.

'cause that'll take a long time. Hit tab, look at  that and order list. Okay, with 20 of them, it gets even better if I want  to have say a class applied to them of, I don't know, uh,  Dan's bullets. Okay, then go here, hit tab, look at me with Emmett. Okay, there's a bunch of other things that Emmett can do. Okay?

Loads and loads and loads. Go check out Emmett. It's E-M-M-E-T. Okay. And there's a bunch of, there's a website  and all sorts of stuff and you can go through  and figure out what it is. Quick couple of other quick ones is IMG tab, okay?

Which gives you image and the source. It's alt tag. Great. Uh, another one that I know  and can remember is link tab gives you the style sheet link. Okay. All with the right syntax in it.

Super quick. Thank you. Alright. Tip number three is gonna be multi cursor. Okay? So we've added a class to this group of divs  that I've got randomly in here,  but let's say I need to add another class.

Okay? What I can do is I  say I wanna add a class to all of them. Okay? Uh, can be tough. So I can put multiple cursors. So what I can do is hold down the alt key  or the option key on a Mac, okay?

And I can drag across all three of these. And look, I got loads of cursors. I can put another class and this might be my  um, I can't remember what any classes. I've got a bold class. Okay? So you can just have the cursors going.

Now we've done that in our tutorial series. Great. But let's say we wanna do it in kind of random places. That's great when they're all, 'cause you  can alt drag across. But let's say I need one there,  but also I need to add it here as well. Okay?

ALT doesn't work, okay, you need to alt drag it. So what you can do is start here, hold down command  and I wanna put one in there and I wanna put one there. So made in classes in all these places,  can you see my curses one there, one there,  one there all flashing. I can say, um, other class, I dunno  what this class is called, but awesome. Okay, so multi cursors  but even better when they're not just in one place,  you can have them all over the shop. Alright?

That is the multi cursor,  awesome cheat sheet shortcut. Okay? So this could be my favorite. This is number four. This is something called apply source formatting. And it just cleans up your code.

It does nothing to it, just kind  of aligns it and tabs it out. It makes it look pretty. So I was working with this,  I downloaded it from Slick N css, it's awesome. But I am very visual so I need everything to kind  of like line up and tab out. And you can see there's a class there  and my natural instinct is kind of just move it down  and make sure he's away from that. And I'm not sure why,  but I feel like this needs to be down there  and the curly braces and, okay,  so I'll do is I'm gonna go over here  and there's one called source, uh, format.

Source code. Click on that one  and go apply source formatting. You can do it to a selection, but I'm gonna do it  to the whole thing and watch this transform into,  ah, look at that. So pretty, okay I do this, um, with all of my stuff, okay? I'm picking on this, uh, CSS here 'cause it's not mine,  but my stuff ends up looking just as bad. Well, not bad, but you know, my ends are looking a lot worse  and it just tidies everything up.

Make it look nice, um, just  so I can visually see everything in nicely. Okay? Um, if you're in an early version. So that works in, there's an option over here in 2017. If you've got during me the in earlier versions, um,  there is it in there. It's in under, um, it's under edit.

It's under code and there's one in here  that says apply source swimming. Okay? Awesome. Okay, so awesome. That is apply source formatting and that's number four. Number five in this lovely list  of cheat sheets is something called code folding.

Okay? See these little um, arrows here, okay? It means that I can fold up all of my body  and all of my head. Okay? And why it's useful is just tidy settings up, okay? This is not a particularly, um, stressful looking at a bit  of h TM L got lots of returns in separate things out.

I wanna fold up the heading  and my main okay, just keeps everything together. I find it probably the most useful is say  that I've got a chunk that I need to delete instead  of trying to, especially when it's off page. Okay? I hate that when it's a really long tag  and it starts here and ends like  somewhere like way off screen. Let's fake it here, okay? It's way down there.

Okay? So main, and I wanna try and select it and I, I wanna try  and figure out where the end is and I'm trying to find it. Okay? So what you can do is just twill us up  and then what I do is grab all of that and then delete it  and it's a nice way of kind of like, you know, grabbing all  of that stuff, okay? So when it's twilled up, it's not gone tool it back out. Code folding people.

I love it. Alright, next on our cheat sheet list is just  duplicating, okay? Just a nice really easy shortcut on in Dreamweaver, say  that I need another one of these buttons. Okay, this one here portfolio, I need another one. I could select it all, copy it, put return in, paste it out,  get the tabs right now I find that's the biggest problem  with it all, making it all look pretty. Okay?

So what I can do is I'm doing, doing undoing  and instead of doing all that drama,  watch this cursor flashing command D boom. Okay, you thrown a pc, it's control D, boom. Okay? But behind a Mac it's command D and watch. Nice. That is duplicating whatever tag it's in,  it will reach out and duplicate it.

All right? And that is number six. Alright, the next in the super fantabulous cheat sheets  for Dreamweaver is it works good for any sort of numbers. Okay? So obviously we're gonna work better a little bit in  CSS with the properties, okay? Let's say the space in between the, okay, the line space in  between this H one here, my H one, there's my line height.

If I have my cursor flashing inside any of the digits  and I hold down command and alt, okay? If you're on a pc, it's control and alt okay? On a Mac it's actually command and option. And just use your up and down cursors. Okay? So your arrow keys and watch this go up  and it goes 80, it goes down, goes to 70, down, down, down.

And you can see where the combination  of this real time browser thing here, okay? Which is down the bottom or right? And it's a real time browser new  and dream weather 2017, it's a, it,  it adjusts exactly the exact same time. Okay? So any of these fields, anything you find, okay,  font size here go up and go up and go down  and that lovely people has that at adjust any of the numbers  by holding down command option  or control option and use your arrow keys. Okay?

The next cheat sheet awesomeness in our lovely  list is number seven. And it is not, it's number eight. Okay? And it is a way to wrap a tag that exists. So say you've got these tags, they're just sitting here,  but I want them to be inside my footer, okay? I haven't written the footer tag and I could go  and write the footer up here and okay, put the closing  and type it in down here and okay.

And that'll work okay, but it's a little long. So what I wanna do is grab all of these guys. So I'm gonna see you and all over you  and I'm gonna hit command T on my mac or control T on a PC  and can see there wrap tag. How good is this? I'm gonna wrap it. Okay, hit return.

You have to hit return twice. Okay, I'm not sure why you can see there. Here's my wrap tag. Great. So grab anything, select  command T and it's gonna wrap it up. And that's number eight.

So let's move on to number nine  and selecting the parent tag. Okay, so let's say I'm deep inside some, let,  I don't have it this thing  and I'm using these exercise files. Not great, okay? It's not particularly uh, confusing,  but let's say it's a really big confusing, there's lots of,  um, children inside these parents, okay? So what you can do, say I wanna select the, I'm not too sure  who the, uh, you know, who the uh,  rapper tag is or the parent tag is. So anywhere inside here, hold down command  or control on a PC and use your square brackets.

Okay? I'm going to use the left side one, okay? The open and you can see it grabs the whole tag  and go again, it grabs the parent. Go again, grabs the column, go again. Ruler, uh, ro you can see lovely way of grabbing  where you know the parent, um, you know the guy around the  outside and it's really great when,  especially when this parent kind  of spans more than one page. Okay?

So you can't quite see  where the ending is so you can select it. Okay? So that is command and use open square bracket  and that's the way to select the parent tag. Nice. Number 10 is a kind of a variation on number nine. Okay?

Selecting the parent tags, okay,  we're gonna use this tag, select in the bottom people ignore  this thing down here and it is awesome. Okay, so if I'm inside of here  and it's really helpful when you're doing compound selectors  and you're not too sure what to put, okay,  so let's say I want  to yoga navigation up here, put it inside. You can see there's my aag, okay? And this is my tag selected on the bottom here. This is my AAG and it's inside my list item, which is  inside my menu, which has got, um, sorry my ul,  which is got a a, an ID of menu, which is  inside the header, which is inside the body. Just gives me an idea of where I'm at in the world.

Okay? So say I want to click the UL watch  that clicks the whole ul grab the header, okay? It's a way of selecting  and kind of using this parent uh, unit,  using this tag selected on the bottom  to kind of know where you are in the world. I love it. Alright, let's do the next one. Okay, so last on this amazing list of cheat sheet stuff,  we're gonna look at snippets.

Okay, so I am here, I'm looking at the snippets panel,  I'm in my CSS here. So we're gonna start with CSS snippets. There's lots in here, okay, we're just gonna start  with the, the big guys. Okay, so let's say I need a footer  and I need it to be fixed to the bottom so it doesn't move. So it's always there at the bottom. I could go figure it out or watch this fix footer,  double take, look at that.

It's all the coding to fix the footer at the bottom. Nice. Alright? Another one might be you're starting a new project  and you need to kind of like put some zero in code  in just to clean everything up. Okay? It's really handy to do see some snippets.

There's a two in here. There's uh, H TM L style reset. Watch this first thing I do. Okay? That is a nice impressive style reset, okay? Everything's gonna look the same on different browsers.

Happy days. I'm gonna look at this one. There's another one here called Eric Myers One. Okay, which do I like better? I think I like Eric's one. It's nice and simple.

Okay? Just clears everything out. Padding at zero, happy days. Get started, build a website. Snippets gets even better. Watch this.

If I go into H TM L snippets look within here. So let's find some H, TM L, okay. And I need to add now a N bar. Okay? So I'm gonna go to, I'm gonna go  into something, create a n bar. There it is there look.

Got a nav bar outta the class to it. It's add these guys into it. The list items are all linked and ready to go. There's classes, I can duplicate them snippets. Awesome. Okay?

Next little bit is let's do metatags. I need to add them. I can never remember what they all are. Okay? I get in trouble and I don't add them and here I go  and I find them over here and it is general meag. Boom.

That one or versus that one? Nope. Or versus uh, metatags for SEO. Okay? Uh, I need probably a couple of those,  but yes, the name in there, the syntax, right? I don't have to go and try and remember what they are.

Snippets. Okay? And the last one, okay,  and this one comes with a double banger. It's the last one, the finale of the cheat sheets. Okay? And it is this lovely one here.

Oh imagine. Okay, so I've got a P tag, okay? So that's P and I wanna put some Lauren nips into it. And you go to that lips sum.com  and yeah, there's the coffee cup on there, okay? And you go and copy it out,  but it's got junk attached to it, so you gotta clean it. But watch this at Laurenson.

Oh my goodness. Lauren Ipsum built into there  and I said this was the double banger for the finale. Okay, so Lauren Ipson was awesome,  but imagine you're doing that quite a bit. Imagine if there was a shortcut you could make. Okay? You can.

Okay, you can see in here this one says lipsom. Okay, I'm gonna get rid of this one and just put in lower. Okay? And can you see  underneath trigger here I can  say I can make up anything I like. Okay. Oh male two, another good one.

Okay, so I'm just law now I'm in here. I've got my PT tag and I wanna put in LOR and hit tab. Oh, I'm making my own edit stuff. How good is that? Okay, mail two is another one. Okay, tab it out.

Who can remember how mail two goes? I guess that most of the time and I guess it, right, okay,  but lot of the time I gotta go check. Is it Colon? How does it all work? Snippets, they're in there, they work. And that my friend is the end of your lovely cheat sheet.

Now remember if you're just watching this course, there is,  this is kind of the end of a longer course. Um, what is it? 12 videos of making your own responsive website. Okay? Go check that out. Otherwise,  there is a PDF you can download.

The link will be on the screen again here again  and go forth, be quick, be awesome in Dreamweaver. Thank you very much.