Production video - Creating the portfolio boxes in Bootstrap

This lesson is exclusive to members

Course contents
SECTION: 9
How to backup 4:44
SECTION: 17
Finished 1:58

Questions

0

Course info

53 lessons / 5 hours

Overview

NOTE: this course uses Bootstrap 3. Dreamweaver has recently updated to Bootstrap version 4. You can change it back to 3 using the ‘New Document > Bootstrap > Preferences'. Please do this before starting the course.

Some versions of Dreamweaver will require you to download the specific Bootstrap version you want to use and link it within the site. You can download Bootstrap 3 here: http://getbootstrap.com/docs/3.3/

Hi - my name is Dan and I’ll be leading you through this course on how to Make money building mobile friendly websites using Dreamweaver.

I built this course for the visual person, the right brained person. We won't hide from code but we'll use all the visual tools that makes Dreamweaver so amazing.

These are the skills you’ll need to become a professional web designer. You’ll learn how to make responsive websites in Dreamweaver as well as learning what to charge and how to manage a website project.

We cover everything you need to build your first website. From creating your first page through to uploading your website to the internet. During the course we’ll create a website for a mock creative agency - creating mobile and desktop versions. See our example here:

I’m a Dreamweaver Certified Instructor and an Adobe Certified Web Specialist.

With exercise files you can download and work along with me. At the end of each video I have a downloadable version of where we are in the process so you can compare your project with mine making it easy to see where you might have a problem.

I’ll be showing you how to work with Dreamweaver to easily create HTML & CSS websites. How to create mobile and tablet versions of your design and how to test your website on your phone.

I’ll be teaching you how to create navigation bars, how to work with responsive images and favicons.

We’ll work with Dreamweaver’s new Bootstrap integration to easily add carousels, tabbed menu’s and accordions. Even easier you’ll learn to impress clients by embedding videos, calendars, maps, event ticketing & social sharing options. 
 
 Know that I’ll be around to help - if you get lost you can message in the forum and together we’ll get you back on track.

Now it’s time to upgrade your skills, get that better job and impress your clients.

What are the requirements?

  • You'll need a copy of Dreamweaver CC 2015 or above. A free 30 day trial can be download from Adobe here.

  • No previous Dreamweaver or web design experience is necessary.

  • If you're not sure if this course is right for you. Email me what you’re trying to do and check if you’re on the right track.

What am I going to get from this course?

  • 60 lectures 3 hours of content!

  • Forum support from me. 

  • All the techniques used by professional website designers.

  • Ways to preview your designs straight to your mobile device.

  • Firm understanding of responsive web design.

  • Professional workflows and shortcuts. 

  • A wealth of other resources and websites to help your new career path.

What is the target audience?

  • YES: This course is for beginners. For people who prefer not to work in code. Aimed at people new to the world of web design. No previous Dreamweaver experience is necessary. People with knowledge of previous versions of Dreamweaver CC 2014 and below will also get great value from this course as the software has changed so much.

  • NO: This course is NOT suited to people experienced in using HTML & CSS. If you prefer to work in code only then this course isn’t right for you.

Course duration 5.5 hours + your own study.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Transcript

Hi, my name is Dan and this is a production video. We're gonna go through and repeat this box here,  changing out the images for the different clients to kind  of mock up this here, where we've got the different clients. All right. Um, first thing I wanna do is  I want this to be a hyperlink. So when somebody clicks the 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, so who can remember  what I do to add to it?

Okay. I don't add the URLI add a special symbol. That's right. It's the pound symbol or the hash symbol. So I'm gonna select the text. All right, so select through the text.

I'm gonna click hyperlink  and I'm just gonna put in a hash sign. And it just means that now it's a hyperlink. You can roll over, it changes color. And later on when I'm finished the page that um, uh,  this client's gonna be housed on, I can link it  to it later on then. Alright, so I'm gonna duplicate this across. It's probably gonna be easiest to do in code view.

So I'm gonna go a split view here. I'm going to, you see these are the other boxes. Okay. So what I want to do is, there you are,  I'm gonna make it look nice and simple. So I've, I've added a return. Why is there returns in here?

I just, um, just to kinda line  things up and make it look nice. So there's the open and the close. So I wanna grab everything that's inside there. So I'm gonna grab these two lines and I'm gonna copy it. I'm gonna put a couple of returns in,  paste it, you see here. Pair there, put a return in there.

Paste, put a return in there. Paste. Great. Okay, so now we can go through and edit it. We could do it here in Cove View. We could do it out there in um, live view.

It's up to you. Um, I'm gonna do it in live view. So I'm gonna click on the image  and I'm gonna go switch it out. So at the moment, I don't wanna go  to insert an image 'cause that'll insert a new one. What I want to do is replace the one  that's in there to do it. Down here you can see it's linking  to my images follower portfolio one jpeg.

What I can do now is I can hit on this browse file  and go off to my desktop,  find the dream weaver exercise files, find images,  and there's portfolio two and that will replace it out. I need to make sure though, 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 this is gonna be, uh, a cassette client work. Okay, this one here is going to be my illustration  work for acne. Great.

Let's switch out this one here. Desktop exercise files, images,  audio three and then the last one. Make sure I do the old text. Okay, this one is going to be, uh, auto sell on. Great. Uh, let's look at this last one here.

Switch this one out. Find my desktop. Doing  Exercise files, images. I could copy and paste all of these images over earlier  into my site file so I don't have to go out  and find them every time, but I'm doing it the long way. So let's have this one here. Who is this one?

This is going to be  Our photo shoot For models. Something like that. Great. Um, I should go through and change all these text. Okay, so this one is going to be cassette. This one here is going to be what on  this one here is going to be model zinc.

All right, so I've gone through and adjusted. Now. Now you might find that everything is kind of done. This, let me show you, it might have flopped down,  so it's all kind of underneath each other. You might be a little weirded out by that. Um, you just gotta make sure  that we're working on our large  desktops down the bottom here.

Switch it to large  and they'll be back to our nice laid out desktop version. We're gonna look at mobile in a little bit, um,  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.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025