Production video - Creating the portfolio boxes in Bootstrap

Hi, my name is Dan. This is a production video. We're going to go through and repeat this box here. Changing all the images for the different clients to kind of mock up this here, where we got the different clients.

First thing I want to do is, I want this to be a hyperlink. So when somebody clicks that client, it jumps across to that specific page where we display what we did for that client. Now, I don't have that page created yet. Who can remember what I did to add to it? I don't add the url, I add a special symbol. That's right, that's the pound symbol, or the hash symbol.

So I'm going to select the text. I've selected the text, I'm going to click 'Hyperlink', and I'm just going to put in a '#' sign. And it just means that now it's a hyperlink. You can roll over, it changes color, and later on when I've finished the page that this client is going to be housed on, I can link it to it later on then. I'm going to duplicate this across. It's probably going to be easiest to do in 'Code' view. So I'm going to go to 'Split' view here. These are the other boxes. So what I want to do is-- there you are. I'm going to make it look nice and simple. I've added a 'return', why are there returns in here? Just to kind of align things up, and make it look nice. There's the 'open' and the 'close'. I'm going to grab everything that's inside there so I'm going to grab these two lines. I'm going to copy it. I'm going to put a couple of 'returns' in. 'Paste' it.

You see, it appeared there. Put a 'return' in there, 'paste'. Put a 'return' in there, 'paste'. So now we can go through and edit it. We could do it here in Code view, we could do it out there in Live view. It's up to you. I'm going to do it in Live view. So I'm going to click on the image, and I'm going to go and switch it out. At the moment, I don't want to go to insert an image because that will insert a new one. What I want to do is replace the one that's in there. To do it, down here, it's linking to my 'images-portfolio 1.jpg'. What I can do now is, I can hit on this 'Browse File', and go off to my 'Desktop', find 'Dreamweaver Exercise Files', find 'Images'. There's 'portfolio-2', and that will replace it out.

I need to make sure that when I do put in an image I need to put alt text, and I did forget to do it for this first one. So this one here is the client, I can't remember what the client is, but it's going to be 'Cassette Client Work'. This one here is going to be my 'Illustration Work For Acme'. Let's switch out. This one here 'Desktop', 'Dreamweaver Exercise Files', 'Images', 'portfolio-3'. And then the last one, the 'alt' text. And this one is going to be 'Auto Salon'. Let's look at this last one here, switch this one out. 'Desktop', 'Dreamweaver Exercise Files', 'Images'.

I could copy and paste all of these images over earlier into my exercise files, so I don't have to go and find them every time, but I'm doing it the long way. So let's have this one here. This is going to be our 'Photo shoot for Models'. Something like that. I should go through and change all this text. So this one's going to be 'Cassette'. This one here is going to be 'Auto Salon'. This one here is going to be 'Models Inc'. I've gone through and adjusted it now.

Now you might find that everything has kind of done this. Let me show you. It might have flopped down, so it's underneath each other. You might be a little winded up by that. You just got to make sure that we're working on our Large Desktops. Down the bottom here, switch it to 'Large'. And we'll be back to our nice laid out Desktop version. We're going to look at mobile in a little bit, and make those do a whole lot better when they go down and collapse down to mobile.

All right, let's do a 'File', 'Save All'. And make sure you go off now and back up your site in case things go horribly wrong in the next tutorial.