Adding Bootstrap containers & creating our first custom CSS

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

Questions

1
0
0
0
0
0
0
0
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 in this video we're gonna create  our structure for our site. We're gonna start adding the desktop view for our website. So actually gonna start making something feels like, uh,  for the few tutorials. Now we've uh, we've got to all of zero CSS  and nothing on our page, but let's, uh, let's go through  and start making some stuff now. So to do it, we are going to uh,  need to understand two things. There are two kinds of containers you need,  so you need at least one container for your site and,  and there are two versions of it.

So let's check out the design that we've made in Photoshop. So, um, looking at the site here,  there are two kinds of containers. There is this one, okay, that's right  around the outside here. And that goes right to the edges of the page. I want that to expand the contract right to the edges. And there's also this one on the inside here.

This is kind of a fixed width, okay? So if I turn my guides on real quick, you can see that's  where that one runs to. Okay? So there's kind of a bit of structure in the inside  and then there's this bit on the outside. The one on the outside is called a fluid container  and the one on the inside is called just a container. Okay?

So we're gonna need a bit of both. Now, some websites you can see in my one,  I've got this navigation, which is got a fluid container  that I want to go to the edges, but it's also got this  internal container, so that's great. So it's gonna have a fluid container  and inside of that it's gonna have a regular container. Then the same for here,  there's gonna be a fluid container to start with. And then I want another nested container,  just a regular old container inside. And I'm gonna repeat that for all of them.

Another fluid, another normal container, another fluid,  another normal container all the way down. Okay? Some websites only need one fluid container  and one nested. So let's look at, say this is my New Zealand business. You can see there is one fluid, one on the outside  and there is a nice nested container on the inside. And you don't need to keep repeating it  because it's actually just one big fluid  and one big container all the way  to the bottom except for the footer here.

The footer has another fluid and another container. So it depends on your design. You start off with, if you're following me, we are going  to be building lots of fluids with little containers on the  inside, right? So let's ignore the navigation at the moment  because the navigation is a little bit more work. Um, actually we're gonna use actually some cheap tricks  and use a bit of bootstrap navigation to make that work. So we're just gonna put in the structure  for these containers first  and we'll come back to navigation later on.

So we're gonna work on this first one here. So in Dreamweaver, okay, we have our body selected,  which is kind of everything that's on the page. Uh, I'm gonna go back to source code just  so we can see this side here. And then I'm gonna go to insert  and I'm gonna change it from forms to bootstrap components. Great. You can see here's my container  and there's my container fluid.

Okay? So that's the first one I  wanna add is the container fluid. So I'm gonna add that. Okay? And that happens a little bit in Dreamweaver at the moment. It seems to be a bug I've  Clicked on body, but it's actually applied the Diviv tag,  which starts all the way up here and it covers up the head  and all sorts of stuff it shouldn't do.

So I'm gonna go to edit Undo, okay? And I'm gonna just gonna be very careful  where I click, okay? So I'm gonna click on body. So I'm gonna click down here  and click on body and try the exact same thing. Awesome. So I worked that time.

So if you run into that problem, just go to edit, undo and  'cause what you wanna do is you want this div, okay, um,  to appear inside the body. Now a div tag is called a dividing tag  or it's just a way of dividing up space, okay? A division of space. So they call 'em div tags. Um, so, and it's called this one Container Fluid. Great.

So it runs right to the edges. Great. So that's our first big division or our first big box. Now what we wanna do is add a little bit of styling  to it just so we can identify what it is  and we don't wanna adjust the container fluid, um, uh,  class we could, but that's gonna be used repetitively on the  page and we want 'em all to be unique. So we're gonna come up with our own class to do that. Go to CSS Designer panel.

I wanna put it in my main css. Make sure you're on all, I am going  to not worry about media queries for the moment. We're gonna look at that later on. And so I'm gonna close that down. Um, just got a bit more space  and I'm going to pick a selector. Okay?

Click on plus  and to be a class, it starts with a full stop  and then we get to make our own, um, word for this. 'cause this is our own custom one. We wanna style this. We wanna add a bit of styling to it. I'm gonna call it band, okay? 'cause it's one of my little bands.

And I'm gonna put a little, uh, hyphen in  and I'm gonna call this one. That's my hero box. Okay? So looking at Photoshop, it's the hero boxes, my kind  of lead bit with my big statement in it. You can call it anything you like. Okay?

So I'll call mine band hyphen Hero. When you're naming your classes,  don't use anything but letters. Okay? You can use hyphens,  but don't use things like question marks or Eand  or hashtags, okay? And it has to start with a full stop. If you leave that off, you need to go  and add it to it, okay?

'cause that identifies  that it's a class and that's what we need. Okay? So we've got this thing called Band Hero over here. I'm gonna add that class. So I'm gonna click plus  hit.click band. You should see it in your little list there.

Click it and apply it. So you can see I've got this Diviv tag. It opens there, okay, there it opens. And then it closes here with a slash div  and it's got two classes applied to it,  the container fluid, okay? And that means that it's gonna stretch to the edge. And we've got our Band hero.

The thing that we've made at the moment,  the band Hero doesn't do anything. You can see in my main CSS there he is. Band Hero is Open, coolly Braces,  the closed clear braces, but he doesn't do anything. I'm gonna go to File save all. It's a good habit to get into, okay? 'cause it saves, uh, the HTML, the CSS, the JavaScript,  everything that's being used at once.

So I'm gonna go back to Source Code. Great. So to style it, um, main CSS Band Hero. And down here you can see there's  no properties we can style. It's 'cause we've left a show set on. So it's showing you all the things  that we have already applied to it, which is nothing.

So I'm gonna turn that off so we can see the big long list  of things we can do, right? The first thing I wanna do with this band is  give it a background color. We're gonna put in the image later on. Okay? So remember in Photoshop we've got this big image in here. We'll do him later on in the images section.

So at the moment we'll just put in a big background color. Um, so I've clicked, can you see here,  this is actually a big long list. These little icons on the top, just jump through this list  to make it a little bit easier for you. They're not separate pages  or anything, they're actually just  jumping up and down this list. It's a really big long list. They're all together.

But this thing here jumps to background, background, color. I'm going to set the background color. I'm dragging this little circle to the left hand side there. And it's made a background color of gray. I'll replace that with an image later on. Now, um, the height at the moment,  if you've given it no height, it will expand  and contract depending on what's in it.

But the height for this one here, I want to,  because I, I wanna kind of see it as I'm building it. I've got two options. What you don't wanna do right at the  top here is one called height. Do not add a physical height. Okay? A physical height is good.

Um, but the problem with it is it's very specific. Okay? If I say B 200 pixels  and I add images, um, in it that are 300 pixels,  it's gonna freak out a bit. It's um, it's kind of contradicting itself. So when you are dealing with heights, a good idea is to deal  with minimum heights. You can say I want it to be a minimum of 200  so it doesn't get too small like it is at the moment,  but can potentially get bigger.

The only trouble with that at the moment is  that if I add a minimum height to this say of 200 pixels,  it doesn't work in Dreamweaver. Okay? It does actually work when it goes out  and works on every browser, but doesn't work in Dreamweaver. I feel like this is a bug  and your version that you are using might do it just fine. Okay? Um, but I'm gonna go file save all  and I'm gonna preview on a browser just to check it.

So I'm gonna go down here, gonna preview in,  I'm gonna preview in Chrome, okay? You might have different options down here. You might just have Safari or  you might have Internet Explorer. I'm gonna preview in Chrome  and you'll notice that voila,  it's got a minimum height of 200. So the nice thing about that is that if I add text to it  and it's lots of text, it will get bigger but no smaller. What I'm gonna do in this class is  I'm not gonna do minimum height.

I'm gonna delete it. I'm gonna do what's called padding. Okay? Padding I really like, okay, so  padding allows me to put, um,  the content's always gonna be in the middle. Okay? So I can put 100 at the top pixels,  100 at the bottom, okay?

And any content within this. So let me add just a little bit of text, okay? I'm using the source code view just  to add text in the middle of the div there. I'm gonna hit refresh if it needs to. And you can see there's a bit of text,  but there's a hundred in front of it  and a hundred, um, below it. The nice thing about that is  that the content is always gonna stay centered  and there's gonna be a bit of text there, uh, sorry, a bit  of padding above it and a bit of padding below it.

I quite like using padding rather than using minimum height. Now before I move on, there's two options  and they look like they do the same thing. Okay? If I've got, um,  so main CSS I'm gonna do it with brand hero. I've got, um, padding and margin  and sometimes they do the exact same thing. They look like they do at least.

So the margin and padding have similar boxes here  and they have a kind of a similar but different, um, usage. If I had no background color here,  you wouldn't notice a difference between the two  and that's what gets people confused. But padding, think of padding as on the inside  of the DIB tag, okay? And margin is on the outside. So if I put a hundred pixels on the outside  of the DIB tag, let's have a look. So I, I'm gonna see this one here, this turns disables.

The CSS property temporarily, I can turn it back on  so if essentially deleted it,  but I can easily turn it back on  by using these little crosses here. Okay? So, um, so it's full intents, purses, it's off. But watch this, if I do padding 100,  the texts will move down a hundred pixels still,  but you can see it's the outside of the Diviv tag. Okay? And you can see  how people get confused if I had no background color  and if I turn off him, if I had no background color,  it looks no different than if I had padding up here  or margin, okay?

But when there is a background color, it's very important  because I'll have a white space with margin  and a big gray space if it was padding. So I'm gonna go and turn off, um,  where we go up to the top here. I'm gonna go turn off, I'm gonna delete the margin  and I'm gonna re-enable the a hundred a hundred, okay. To do with the padding, right? So we're gonna go through now and add all the extra bands. So you can see I'm gonna need, uh,  I've got my hero band done.

I need this one for who we are. I need this one for services portfolio and the footer. So we're gonna go through and add all the rest of them. Let's go do that in the next video.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025