Code with shortcuts and error checking

Hi there, in this video we're going to look at some advanced coding techniques in Dreamweaver.

We will be using Emmet to show us some coding shortcuts.

We will use the multi cursor to do some fancy editing.

And we'll look at linting which really helps us fix any errors that we might make super-fast.

Now to play along you'll need to define your site like I have here.

You can do it up under here, under "Site" and under "New Sites".

And this just helps manage your files while in Dreamweaver.

Now we're not going to cover site definition in this video.

There is another video here that will cover that in more detail.

So go check that one.

So first step, what we're going to look at is something called Emmet.

Now Emmet is a group of shortcuts that has been integrated into Dreamweaver.

We will use these Emmet shortcuts to create this page here.

So this is what it would look like when it's finished.

And this is the starting file, and the big difference is along the top here you can see there's nothing along the top of this header and this one here we've got an image and we've got a navigation.

But really this video here is to focus on our coding shortcuts.

Alright, so back into Dreamweaver.

Now for this tutorial, what I'm going to do is I'm going to be working in Developer mode rather than Standard.

So if you want to follow along exactly, switch it out here to Developer.

Over here on the left in our Files panel, we're going to open up "index-start.html."

And this is the file that I'm working on here.

And you just double click it.

So the first bit of shortcut awesomeness, will be adding our header.

So under this comment here where header is, I am going to tab across and I'm going to put in my header.

But I want to do it with my super new shortcut.

So instead of typing out all the angle brackets and the opening, and the closing of the tag, what I can do is just type in header, and instead of hitting Return, I hit Tab on my keyboard.

Look at that - awesome.

It adds the angle brackets, on either side, and you can see it has even put the closing in there for me.

Great, now I put a return in.

So that was a cool way of adding just one tag.

But let's say I need to add my navigation now and there's a bunch of them.

So I need to add my nav, which is great.

Inside there is going to be a "ul", I can keep doing that individually.

But there is an even cooler way.

So let's check out what we're making.

From the top here, we've got my nav, and inside of that nav is my "ul", which is my list here.

And all the list items need to go inside and all of these list items need to be hyperlinks, so they can be clicked.

Let's go build it super-fast in Dreamweaver.

So to do it what I need to do, is I'm going to type in "nav", but before I hit Tab, I can hit my angle brackets.

This greater than sign denotes that the next thing I type will be a child of this nav.

Effectively, it'll just go inside of it.

And inside this "nav", I would like it to be "ul".

Inside the "ul", I'd like there to be a list item.

OK now "li", inside of the "li", I'd like to add an "a" tag.

Which is my anchor tag.

And now if I hit Tab, stand back, Boom, look at that even the "a" tag, OK, it guesses that it wanted to be a hyperlink reference and edit all the syntax in there for me.

It's tabbed down nicely, that's why I love Emmet.

And that is amazing.

But it gets better.

But because I've only got one link in here, so I'm going to go to Edit, Undo.

And what I'm going to do is I'm going to type this all out, but actually the list items here, before I go on to my anchor tag, I am going to put in the times here, which is just your asterisk and I'm going to put in "5".

OK, then put in my "a" tags.

Now stand back, Tab time.

Cool?

And the cool thing about Emmet, is that the syntax is super easy to remember and with a tiny bit of practice you will really be able to speed up your workflow.

So to continue on with our super-amazing shortcut adventure, what we're going to do is look at something called multiple cursors.

Now let's say that we need to add the link, because at the moment it's a hyperlink, where is it going to go to?

What I can do is instead of typing them in individually, what I can do is click on this first one, hold down my Option key or Alt if you're on a PC.

I am holding it down and I'm going to click and drag through the center of these guys.

Look at that, looks like one giant cursor.

Just means now if I start typing, I have my URL.

Look at that, cool.

So it's typing it in all five lines.

But I won't go in to all the same links.

I'm going to delete them.

And the multiple cursor gets better.

Let's say that down here, you can see there's a span tag, across two of these, and now I want to add a class to both of them.

Because it's the same class that I need to add to them.

What I can do is, I can click in here, but then I need my cursor flashing somewhere else on the page, it can be anywhere.

OK, I can hold down the Command key on a Mac or Ctrl key on a PC.

Watch this, let's click over here.

Two of them flashing.

Awesome.

OK, I'm going to put in my class, and you can see it's typing it out for both this one at the bottom here and the one at the top.

And I get to add my class.

But for the moment I'm going to get rid of this class here.

So let's get on to some more Emmet goodness.

Because up until now what we've done is we've added - remember - our tags on top here, we have header and end tags.

And down here we use multiple cursor to add our own class.

But let's say we want to do that in one hit, well we can with Emmet.

Check this out.

So underneath my header here, I want to put in this is where the logo is going to be.

What I'd like it to be, I'd like it to be clickable, so we could put in an "a" tag.

And I want to add my class directly to this "a" tag, so no angle brackets.

So I put in the period.

The class name I'm going to use is something called site-logo.

Now hit Tab.

Look at that.

It's added the hyperlink reference and where is it going to go to?

I'm going to put in a hash at the moment, just as a placeholder.

You can see it's added the class for me all in one big go.

We can do it again here with an image.

So "img", then I'm going to add a class to it.

In this case, it's going to be site-logo-white.

Now hit Tab.

Awesome.

So it's filled out the image, plus its source.

Alt-text, the class, all pre-filled in for us with Emmet.

Now that's Emmet, kind of built in to Dreamweaver.

Dreamweaver has lots of its own code hinting.

And we can use it, with - say in the source here.

So it's going to ask me where I'd like to go.

I am going to type an "i", Even just with a little "i" in here it says, "Do you mean the images folder?"

And I say yes, thank you.

Then Dreamweaver says, "You mean these images?"

And I say yes.

You can find these images because I defined it in my site, when I set up this project.

And it's looking at my images folder and it's giving me everything that's in there.

If it's not in there, I can click Browse.

But my one is.

I can scroll down and find it or I can just type in "L", because I know it begins with an "L".

You can see there, it's picked up two files that have "L" at the beginning, "logo-dark" and "logo-white" and check this out.

This makes it super easy to use.

So "logo-dark".

Well I named it quite well.

So it's pretty clear that I want the white logo.

OK, but if yours aren't, you can click between these two, toggle down.

I'm using my arrows to go up and down, on my keyboard.

You can see, clearly want this one, awesome.

Let's have a quick look in the browser, great.

There's my image.

OK, the white one.

My navigation is a little messed up.

Let's go and fix him.

What I'd like to do is add a class to navigation.

And this is another bit of Dreamweaver´s great code hinting, if I start typing class, hit Enter, it fills in all the syntax and in this case it's going to be "site-nav".

Now preview in the browser.

Here we go, it's the same bullet points.

OK, but they are being styled on the top right now.

Next thing I want to do is, I want to add some copy, just some body copy to my page.

Now often when I'm building the site and I'm kind of doing the design work, at the same time, the copies being written.

So I need to add some placeholder text.

And often I have to go often fumble around trying to find lorem ipsum.

Until now.

Let's go put in our "p" tag.

I'm going to put it into this section here, the intro.

So when I add a "p" tag my body copy, remember.

So type "p" and then hit Tab.

Great there's my tag.

Now I want to fill it with some placeholder text.

And typically lorem ipsum is used.

Which is just mixed up Latin words.

But instead of having to leave Dreamweaver now, I can type in "lorem", hit Tab and you're like "no way".

Yes, way.

Watch this, I'm going to undo.

And before I hit Tab, I'm going to put in "10".

And yes, it's going to give me ten words.

OK, so I might be designing my site and I know the writers working to a word count.

He might be working to 200 words, I could put in 200.

Then I can ensure everything kind of fits and styles right before I get the copy.

And what I want to do is I'm going to delete this guy here and I'm going to combine a lot of the things we've been doing now.

OK, so I would like a "div" tag, with a class name of "intro-text".

Inside of it, I'd like a "p" tag.

How many of them would I like?

I'd like four please.

And inside of those "p" tags, I'd like some lorem ipsum.

Now hold your heads.

Look at that huge block of content that I was able to make with just, kind of one little string.

Can you also see that all of the paragraphs of lorem ipsum are all different?

And this just helps better mimic the real world copy which will get switched out for later on.

Now like me, as you get started you'll use some of the basic ones.

Because it's such a simple language you'll get quicker and quicker and faster, faster and putting in all these elements and adding classes where you need them, a little bit of trial and error.

But trust me, it really helps my workflow and I definitely think it will help you too.

In my case, though, I'm just going to go through, I just want one "p" tag.

Just showing off a little bit there.

So next up on our amazing little adventure here is something called "linting".

Basically linting, is just to help you with any errors you might have.

And in my case it helps me loads.

So let me show you what I mean.

When I'm working, I've always got my eye on this line numbering over here.

If I scroll down, I can see there, hello.

Red thing.

And it tells me if I hover over it, it tells me what's wrong.

It's missing a special character.

And I can see instantly there I have forgotten to put my angle brackets in.

Once I've changed it, you can see now that the second one is gone as well because it was actually this guy causing both of the errors.

Now that's while you're working.

But let's say you're getting close to the end of the job and you want to just do a check of everything.

So I'm going to undo that.

Get my error back.

There it is there, and you don't notice it while you're working, and everything's looking OK in preview but you just want to check it.

So what you do is you open up your Output window.

And the output window will do a search and check if anything is wrong.

Let's skip to Window and down to Results.

And there's one called Output.

Now you can run with the Output open.

So if you're typing stuff, this thing here will automatically update.

And in our case, it spotted that same error.

And I can double-click it to go to it.

There it is there, I could put them in.

So it's handy to keep an eye out for this linting on the side here and potentially have your Output window open, especially when you're getting towards the end of a job and everything should be functioning right.

If you see anything in here: danger.

But luckily there's an error, plus the warning gives an indication of what might fix it.

And then you need to save your document and this Output window here will update and it's all clear now.

And I'm going to double-click Output just by closing him down.

Alright, so let's switch back to Emmet.

Now we've been using Emmet up until now, using our HTML here.

But Emmet can be used in CSS as well.

So let's look at styles.css.

I'm going to scroll to the top.

And let's look down here on line 17.

I want to add a width to this image.

So we can use Emmet in here.

I type in "w" then put in 100, hit Tab.

And it's put in a hundred pixels width for me.

Awesome.

Now it defaults to pixels if you don't add the measurement.

So I'm going to undo that.

Instead of a hundred pixels, I actually want it to be percent.

I push it in there, hit Tab, and I put in a width of a hundred percent.

Let's do some more up here in HTML on line 6.

I want to put in a margin.

So just "m" and then put in the 0, hit Tab.

Margin 0.

And we'll put in the padding of 0.

So just "p0" then Tab.

Awesome.

It'll take a little while to learn what all the different properties shortcuts are.

But because Emmet's so simple whatever you think might be the shortcut, it generally is.

And if you want a list of shortcuts there are loads of resources on the net.

To start check out the cheat sheet from Emmet.io.

That's "emmet.io" And their documentation section has a cheat sheet.

Next thing is down here in my body.

Let's add a background color.

What might that be?

Its "bg" for background and "c" for color.

And I hit Tab.

It puts a background color.

It guesses, it's white.

White's the most common and generally used.

You can update it.

So if you don't want white you can go in here and just delete it.

Put in the hash and you can see I'll get my color picker.

I can just pick any color from here.

There's my hue, and I can pick any colors.

I hit Return.

If I hover above it, you can see it actually previews it in Code view as well in Dreamweaver.

Which is really handy.

I'm going to turn mine back to white though #fff.

Great.

Hover above it.

White.

OK, so let's come down here, let's go to 340.

OK, and I want to add a background image.

I bet you can guess that without knowing any Emmet. "bgi".

OK background image, hit Tab.

It's put on our images, it's put in the URL inside of here we need to put our image inside some quote marks.

Then inside of here I'm going to type "i".

Remember like Dreamweaver did before, it picks my images folder.

And now, OK, I got a bunch of images in here, I am going to type "ri" and it's defaulted to my right arrows.

And I'm going to use the white arrow white.

It shows me a little preview underneath of it.

It tells me the size as well, super handy stuff.

Great, so it does the Emmet stuff like we did in HTML.

We can add our CSS properties using this technique, like HTML as well.

There's the same kind of linting and error detection, let's look at that.

The first one is, let's say we actually get the path wrong, or it can't find the image, if I put in an extra "r" here just to mess up the file name.

And you can see here, it says "image not found".

Awesome.

And like in HTML, you can see over here in my line number, you can see there's an error.

I can see it there.

It's an extra curly braces.

If I put it back in there just like HTML, I can have my Output window open.

And you can see there is on line 359 telling me there's an error here.

So whichever way you like to work.

The last thing I want to show you is a way to check the links on your site.

Just to make sure everything goes where it should and nothing is broken.

Now it's great to do it while you're working, but especially good when you're about to maybe do some testing or send it to a client.

Just to make sure all the links, things like the menu items or any external hyperlinks actually work and aren't broken.

To do it, let's jump to "Source Code".

So we're going to do it for my HTML to check the links.

Go to "Site".

Let's go down to "Site Options".

There's one in there called "Check Links Sitewide".

Great, so it defaults to "Broken Links".

Just telling me the ones that aren't working.

And that's what we'll do.

But before we move on, let's look at the other options.

So we can look at "External Links" and there's nothing wrong with these links, it's just showing me the ones that actually link out to another website.

And it could be interesting to see.

And the other one is "Orphaned Files".

Now these are the files that are in your local site that haven't been used on your website.

So they're in your Local folder that you defined in the site definition.

And they just haven't been used on the page.

There's no real purpose for them.

So this might be a time where you're like "Ooh, I forgot to actually add that image to the page", because it hasn't been used anywhere.

And you can go and use it, or it might be that you discover some files that got in here and inadvertently you've placed them to the wrong folder and you're like, "Oh what is he doing in there" and you can go and move him out.

But we're going to focus on "Broken Links".

Now when you're running a check, in the top here, you see this "Play" button.

You can do it for the current document; just means the document you have open in front of you.

You can do it for the entire local site, and in our case, it's a really small site, so no problem.

You might have a huge site to run through though.

You actually just want to check a couple of them you select over here in the Files panel.

So you can select a couple over here and then run just this option.

We're going to use Current Documents.

You click on this and it runs through and here's our two broken links.

If I go and find that link just to show you, you can see this linking to index.html, which typically would be fine.

But in our case just for this tutorial we've called ours index-start.html.

So it's not going to the right place.

So we can double click it.

You can change it in here.

I'm going to click my Browse button and say "I want you to go to this one".

OK, it might be a spelling mistake or in our case just linking to a file it doesn't exist.

I'm going to close down Properties and you can see down here, where it was index.html, it's gone and changed it in the code.

You see, it doesn't disappear, you got to run it again to go and check.

Go check Dreamweaver.

Goes the first ones gone and this one here is broken as well.

So this is a broken external link.

It links out to www.adobe.com.

If I double-click it, you can see how it spelled the "http" wrong.

So I add the extra "t".

See again, it's changed it in the code.

OK if I hit "Play", "Check Links", happy days, we have no more broken links.

Now this link checking works just as well for broken links in your CSS.

You can either just open the CSS document and run it.

Just click on "Check Links in Current Document", or like we are here in our HTML document, we can go through and just check the entire current site.

And that will test this page that we've got in front of us and reach through all the other documents that we have on the site.

Including our CSS.

OK, so let's close down Link Checker.

Now well done buddies.

Me and you've gone through some of the tips and tricks that will really help you code faster and have a lot less errors while you're working.

We looked at Emmet, we looked at linting, also Dreamweaver's code hinting plus the link checking.

Now remember there are lots of other Dreamweaver tutorial videos here to help you out.

But for now lovely web design people, code faster with less errors in the lovely world of Dreamweaver.