3 - Start building


Questions & Comments

Douglas Gillard - 1 year ago

You completely forgot to tell people to connect to your css stylesheet. This is going to frustrate people who don't understand the stuff very good. After I did add your css to a stylesheet, the navigation ended up Push down into the Jumbotron (Hero box).

Administrator Tayla Coman - 1 year ago

Hi Douglas, at what point are you saying this issue is apparent? The stylesheets of each index page is linked in the exercise file, index1 is linked to styles1.css and index2 to styles2 etc etc.

ALL ACCESS: $12 per Month + Cancel anytime   

Video Transcription

So first thing is, just open up Dreamweaver. Often at the beginning there it asks you a few questions like what color you want the background, and whether you want to be a Designer or a Developer. So what you want to do is pick 'Developer' for this case. If you didn't pick the right option, just keep going through and then you can change it up again in here, at the top right, and just pick 'Developer', and it should look something like mine.

Next thing we need to do is define a site. So go to 'Site', and go to 'New Site'. We need to do this for every new website. So if you've just got one, you'll only have to do this once, but if you're like me, and building lots of websites, you'll have to define the site for every new one. So give it a name, I'm calling mine 'Roar Cycles', that's the company we're working for. And we need to decide, where on our hard drive we're going to keep this website, because all of our images, and all of our HTML, all the stuff we make for this website need to be kept in the same folder. So, what we're going to do is go to 'Local Site Folder', click this little 'Browse' button and you could make your own one, but because I've got some exercise files already, you might download them. So the ones you've downloaded from the link in the description, go to 'Responsive Exercise Files' and just choose this folder here, no need to go in any deeper.

The other thing you should do before we move on is go to 'Advanced Settings', and up here where it says 'Default Images Folder', go to that. Just pick the 'Images' folder there I have created for you. If you're making your site by yourself you'd make your own folder with your own Images folder. We're just saving time to jump to the responsive stuff in this course. Let's click 'Choose', and hit 'Save'.

So what I've done is, just to speed things up, is I've started the website, just to get us going so we can jump into the responsive parts. So let's go to 'index1.html'. And this is what our page looks like in Code. So we want to see what it looks like in a browser. Down the bottom right here, it's way down the bottom here, there's one called Real Time Browser Preview, it's this kind of far right icon. Click on that, and then click 'Google Chrome'. If you don't have Chrome installed, it's best to go and install that now. It's the most common web browser and it's the one you should be doing most of your testing in. You can use Safari or any of the others, but Chrome is our man.

So this is what I've done for you so far. It's just previewing locally in my browser. I've added a logo, this navigation, and this big pink box. Just to get the structure right so we can start looking at what makes it responsive, because at the moment, if I grab the edge here, it's not responsive at all. Just kind of like sits there. So let's jump back into Dreamweaver, and add our first bit of HTML.

ALL ACCESS: $12 per Month + Cancel anytime