Hey, my name is Dan. Uh, in this video is one of the production videos. So I'm gonna go through and pretty much step  and repeat what we did for the nesting  and the centering on all these different columns. Go back to straight to live view. Okay? And I'm gonna click inside this column  and I am going to insert a row with a column.

Gonna nest it and it's just gonna be one like we did before. Great. So I've got click inside there. I've got my column, which is inside the row, which is  inside the column, which is inside the row. Okay. Now what I wanna do is I would like,  actually I wanted two columns in this case, didn't I?

Okay. I've just put one in. So if you've done that, it can either go  to undo and redo it. Okay? And put two columns in which I,  which is exactly what I wanted. But in this case, what I'm gonna do is I'm gonna drag this  one down, okay?

Um, to six and add a new column. Now there's no difference between doing it, uh,  the columns at the first time or doing  it afterwards like this. I've still got one row with two columns in it. If you're unsure about it. Sometimes looking at split view  and source code is an easier way to look at things. You can see I've got a row beginning and closing.

And inside of that I've got two  columns and they're both large. Keep an eye on that. Remember, if they start becoming small,  you're gonna have to go manually go and change them. 'cause we're dealing with the desktop view at the moment. Let's click live. All right?

Um, and what these needed to be is this top one here needed  to be 12, okay? And it pushes this column underneath. So this guy can be out at 12 as well. Just so that means that when it does get down  to mobile view, I remember I can scoot it up  and get these guys going side by side exactly how I want it  to be when I get to my uh, mobile view. But again, let's get it back to 12. So 12 and 12.

Inside of this one, I'm gonna insert my image, nest it. I'm going to grab my desktop. Dream of exercise files, uh, image. I'm gonna bring in my icon two  and you'll notice that I bring it in from my exercise files,  but it ends up copying  and pasting it inside my actual site files. And that's a nice thing that  Dreamweaver does for you as you go. So let's compare the two.

These are my exercise files on my desktop  that you've downloaded and they've got everything we need. Okay? Over here on my bootstrap website, okay? With all my site files you see in images,  it only brought in the ones that I've actually used so far. So there's the books and there's the two  icons that I just imported. Okay?

And it will slowly but surely shuffle them all across. You can save time by just selecting all of these  and pasting them all in this side here. There's no real difference, okay? Um, either dream weve doing it manually  one by one and bringing it across. Um, but just know that we've got duplicates of this now. So if I go into Photoshop  and start editing these icons in my exercise files, I need  to copy them back across into my actual site, okay?

'cause they're duplicates over here. Alright, back to Dreamweaver. And while I'm here, I am going to add the class  for this one called uh, center Block. Great. Click down here. I'm gonna insert paragraph, gonna nest it inside here.

We're gonna call this one app development. It's called app Dev. Great. And I'm gonna click out of it, have the P selected  and go in here and put and text. You can see the different ones in here. So you get a sense  after a while when you start seeing some  of these suggestions, you might get an idea of what some  of these other things might be doing.

Okay? So I know the center,  there's other ones called hide info Justify. So you might experiment with some of these as you find them. I know I need center, which is great. So let's do it all again. And what I could do now is I could go through  and save some time by going to Split View.

You can see here's this column. You can see it changing up here in my live view. That's that column. That's that column, okay? And there's nothing inside of it. This is the gap, okay?

Where stuff goes inside of it and there's nothing in it. So it's pretty empty over here though. This column. So here's that, here's that row. Okay, so there's the row over here  and there's inside of,  it's got another row and another column. So I can grab all of that.

Okay? So that's the nested row  and the column with the image inside of it. And I'm ready to go. If I copy that and I go into here  and I hit paste, so I'm inside this one, okay? There's another nested row  and column I gonna do the same for this guy. Paste him inside.

Okay. And I've just got nice little replicas of each other. I'm gonna have to go and do a couple of things. Okay? So I need to make sure I go through  and change the text in the image. That's easy enough to do.

I select on the image itself. I can click on here  and this little where it says source SRC, click that  or down the bottom here in your properties panel. It's up to you. It ends up at the same place. Click browse desktop, dream of exercise files, images. Let's bring in icon three.

Great. Make sure you add alt text. Now you can either old add it down here  or you can add it up here. Okay, I'm gonna add it up here. And this one is gonna be called, what is this one? This one's gonna be called photography.

Photography services. Great. Make sure I add the Make responsive. You'll probably think in to yourself. You didn't do it for this one, Dan. I know, I forgot.

Okay, make responsive down here. This one's gonna be called photography. That's why I like Dream. It's kinda the best of both worlds. You get to do kind of visual stuff up here that help, uh,  people like me who like to see things as they're working  and allows me to kind of jump in  and get amongst the code when I need to,  to when it makes sense. This one here, Click.

This one's gonna be icon  Four. Great. Gonna add some T text. And this one is  video production. Great. Gotta make sure it's responsive.

Great. Down here, I'm gonna adjust this one video. All right. Um, and  what you might notice is you're playing along  with my exercise files and I've done a little sneaky trick  because I wanted them all to have the same 'cause. I want this text all to line up together. Okay?

What I've done is in Photoshop, I've made sure  that these guys are exactly the same height and width. Can you see this image doesn't need to be this wide. Okay? Um, I've made it extra wide using the canvas in Photoshop  just to make sure that they're all equal so  that when they start stacking they stack all evenly. If they weren't, this guy would be a little thinner. This guy be, wouldn't be as tall as this one here.

And this guy would be a lot shorter as well. So that just would stack and this text would rise up  because there's a bit more space left  and would all push up and nothing would line up. I'll show you what I did. I thought I'd include the dodgy versions just  to show you the before and after. So in your exercise files,  there's this little sneaky folder here called  odd sized icons. Okay?

So if I use these exact icons,  they've got the exact same name, so I'm gonna do a little  thing, I'm just gonna replace them over here  and it's gonna freak out and say,  oh, you're gonna replace them. I'm gonna say yes, yes, yes, yes. Oh yes. Okay. So I've updated  them, actually I've moved them by accident. But anyway, let's go back into Dreamweaver  and it's not gonna update automatically.

Okay? It does eventually, but to, to speed it up,  there's this little refresh button here. Can you see? Because they're all odd sizes,  they're all trying to fill the width. So this thing to fill the width had to get really big. This one to fill the width, um,  had was a little bit shorter.

This one's even a little shorter again. And can you see now the text lines up. So what I did was, and it's really common when you want  to kind of do this kind of like stacking of similar shapes,  is just to make the physical size in Photoshop match. If you don't have Photoshop  or know it at all, there are lots  of other image editing, um, programs. You're just gonna have to go work out and try  and work out how to get the, um, documents  to be the exact same size. If you want to though, I've got a video course on how  to use Photoshop for web design.

Kind of precursor  to this one if you wanna go off and do that. So I'm gonna go back and over here, undo what I did, okay? And I'll dump all of these guys back in. Great. And hopefully now I've hit refresh. They're all the same size, so I'm gonna have less problems.

Alright, that's the end of this production video. See you in the next one.