Transcripts
1. Introduction: Hi there, my name is Dan Scott, and in this video we're going to tune you from Web zero to web hero and look to build your very first responsive web page using Dreamweaver. Now you can follow along this tutorial perfectly and you just need to download the exercise files, there's a link down in the description desk, free to download, go and get that, pause the video, come back once you've got the files. The goal of this tutorial is to expose you to modern web design. We're going to look at terms like responsive HTML5 and CSS3. They sound fancy, but they're actually quite easy once you understand them. We're also going to look at how Dreamweaver makes this super easy for us to do. But actually what I really want you to get from this video is to get to a point hopefully and you are like, actually, it's not as hard as I thought it was. I'm pretty excited about going off and learning more and building my own site. So that's my goal. Let's get into it now and start working.
2. Process : So first up, let's talk about the process. So first up, you'll need to design your website first in something like Photoshop or Illustrator. So you can see here I've designed what my website looks like on a desktop, what it looks like on a tablet, and what it looks like on a mobile. You can see they are very similar, but each design takes best use of the device sizes. So there's just some font size changes and some reordering of boxes to make it look odd on the different devices. This is what we call responsive. The website's going to change shape and change form a little bit depending on whether it's mobile, tablet or desktop. So that's our first big term out of the way. Responsive web design just means the website changes to best use the device. So it doesn't matter Photoshop or Illustrator, but I've designed mine here in Photoshop. Now we need to translate it into this. This is the finished version of our website where you can see it matches my Photoshop mockup for desktop. But when I get down, watch this, watch this down to the tablet, can you see it changes there? I'm dragging my browser in and out, because the font size changes, becomes centered, the columns go from three close to two. So that is our term responsiveness. We're going to build this and get down to mobile where it's just stretching one across. We'll also do some stuff where you'll notice that there are six on tablet, but only four on mobile. So we're going to deactivate some of them. We're also going to change the menu along the top here you can see in my Photoshop mockup that they're straight on desktop but they collapse into this other version on the smaller devices. So we've worked out what responsive means, and we know what we're going to be building. Let's go off now and start building it.
3. Start building: Okay, so first thing is open up Dreamweaver. Often in the beginning they I'd ask you a few questions like, what color do you want in the background? Whether you want to be a designer or a developer? What you want to do is pick developer for this case. If you've didn't pick the right option, just keep going through and then you can change it up again and here in the top right and just pick developer and it should look something like mine. Next thing we need to do is we need to define a site. Go to a site and go to a new site. We need to do this for every new websites. If you've just got one, you'll only have to do this once. But if you like main building, lots of websites, you'll have to define this site for every new one. Give it a name, I'm calling mine "Roar Cycles." Okay. That's company we're working for and we need to decide where on a hard drive we're going to keep this website. Because all of our images and all of HTML, all the stuff we make for this website need to be kept in the same folder. 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. Okay, 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, okay? The other thing you should do before you move on is go to advanced settings and up here it says default images folder. Go to that and just pick the images folder that I've 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." What I've done is just to speed things up, is I've started the website, okay? Just get us going so we can jump into the responsive parts. Let's go to index1.html and this is what our page looks like in code. We want to see what it looks like in a browser. Down the bottom right here it's weigh down the bottom here there's one called real-time browser previous this 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, okay, somebody's calling web browser and it's the one you should be doing, most of your testing in, you cant use Safari or any of the others, but Chrome is amen. This is what I've done for you so far. It's just previewing locally on in my browser, okay? I've edited a logo, I've added 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 like sits there. Okay, so let's jump in into Dreamweaver and add our first bit of HTML.
4. Building the HTML: Let's put it in. We're going put in the hitting, We're going put it now we've got our header here, that contains my logo and my navigation. See those three little buttons there. Then I've got this other chunk, which is main. Main is the middle part of the website hitter is out giving me just a logo and navigation. Main here already has my hero box, and that is the big pink box that have created already. It's this guy here. Inside of this where I want my hitting. We're going to be designing this hitting here. This is roarX. Pre-order now. To put in a hitting, we need to put in something called an H1. H1 is how hitting one and the hitting one is the most important hitting on our page. The syntax works like this, just like say this main here, it says main, and it's inside these angle brackets, then there's forward slash made to close it off. We need to do the same thing for H1. Angled brackets stand by your in key, type in H1 and then close it off. That's the beginning part, just like mine here. You can see the second part is the same way, but it has a forward slash in front of it. We're going to type in angle brackets type and forward slash and helpful all Dreamweaver has going to filled it in for us, that's one of the perks of Dreamweaver. The text goes inside, it goes in the middle of these two here, it can cause flashing between the two tags, and we're going to type in roarX, which is the name of our new bike that we're launching. We're going to say pre-order now. Hits "Save". File save, and I want you to go and check your real-time browser preview. Now you can check back by flicking back to Chrome, it updates automatically or if you'd like to, you can click down here and click on Google Chrome again. Either way, let's get to our browser. You can see here is my H1 roarX. Pre-order now, and by default it is black and bold and a particular size. That my friends, is our first spit out HTML. If you're new to web design well-done. This is our first bit of coding, you've done it. Next thing we need to do though, is go and change these default colors and sizes and fonts to something that matches our markup in Photoshop. So let's go and do that now learning something called CSS.
5. Building the CSS: We've learned what HTML is, we've edited an h1 and we've added some taste to it. That's the HTML. To style this, we use something called CSS. I've created a CSS sheet here. You can see it here. It's in the "related documents" file. Let's click it. I've done some basic stuff already. I've said that hero box that we made. I gave it a height and I gave it that background color for hover above it of pink. I've got some stuff to get us started. Let's look at creating our own CSS now. Underneath this curly brace, hit "Return". Returns don't matter in CSS or HTML, you don't need that return, you can have it, I just like to space them out a little bit just to make it easy for you to see. When it comes to CSS, there's some basic syntax we need to follow. Basically you can copy what's up here, let's say body. There's the name h1 not two, h1. There's a space and you can see there is a curly brace at the beginning and the end. That's what we're going to do. We're going to type in the first curly brace and [inaudible]. You never have just an opening without a closing, so it fills it in there for you. It's putting the ending one for us, Let's put "Return". The "Return" just gives us a bit of space to write things like this, like the height and the color. First puts in text, curly braces. Don't forget the beginning and the end or don't delete them. Next thing we're going to do, is we're going to give this bit a CSS, what's called an attribute. An attribute just means, "I'm going to give it a thing like a color or might be font size". These are called attributes. You can see there I type CO and it pre-filled in color and I hit "Return" and what it did is it filled it in and edit the colon there. The colon needs to go in. Next thing is to pick a color. The cool thing about Dreamweaver is that has a color picker or you can pick from your libraries, which is really cool. Let's click "Color picker" and what we want to do, is drag this little circle here. We can drag it around, we can play with hues, but what I want is I want it to be in the top left-hand corner. That's going to be white. Drag it up there and we're going to use white. If it goes horribly wrong, you can just type in, pound, f, f, f, f, f, f that is the code for white. The last thing and the thing that lot of people forget when they're brand new to CSS is you need to hit semi-colon at the end. That's all the syntax you need for CSS. There's curly braces, there's one at the beginning, one at the end. You type in the attribute, in our case, it's going to be the font color, and you put in a colon afterwards, in our case Dreamweaver did that for us and don't forget the semicolon at the end. Let's go and save it, but let's use the "File, Save All". That's handy because it saves both the CSS and the HTML at the same time. They're actually separate files, so you switch to source code, which is HTML and this one here is my CSS. They're actually separate files in my website. I find when you're learning, it's better just to go to "File and Save all", make sure everything is saved, and then jump to your browser. Are you ready? We added some HTML, our h1 and we added some text, then we've gone in style or h1 using CSS. You're about to become a web designer. You're ready, set, go. Awesome. You've added HTML and you've being able to style that HTML using CSS. That is the fundamentals of all web design. We're going to do a few other things just to make sure it matches our mock-up, but then we're going to move on and start looking at specific responsive web design. Let's go and finish it up.
6. Making your site responsive: To match our mock-up, we wanted a couple of things, then we got the type tool here in Photoshop, I'm going to click. I know I want 62 point for the font. I want to push it down from the top and away from the left here. Let's go and do that now in CSS. Dreamweaver here, let's put a returning and it's type in font. You can see it's giving me some pre-filled options. Is all what font size, and you can see it put the color in there for us. Now in our case we want a 62. Actually I changed my mind. I'm going to use 55 pixels, just wanted a little bit smaller, just because and I didn't forget to add the semicolon at the end, when you knew that happens a lot. But retain in, we're going to do a couple of other things. We're going to type in petting. I've typed in PhD and you can see Dreamweaver super-helpful goes, do you mean these? I said yes, click on "Top", and for the top, we're going to do 120 pixels, remember a semicolon at the end, and the last one is going to be petting and I'm going to do left. I'll want a way from the left, about 60 pixels. Let's hit "Save" and make the stable, and let's jump into a browser and check it out. That's basically it we dumped in our HTML, which is H1, and then we spend a lot of time in CSS styling at getting it looking how we want. But now is the time to look at what responsive design does. Now responsiveness is an umbrella term used to describe some things we do in code to make it adjust for the different screen sizes. One of those things we do in code, and probably the main one is something called a media query. Now all a media query is as think of it as a trigger, and it only gets it off when a screen size is activated. Let's have a look at something I've made earlier. This is what we're going to create something called a media query. It just says trigger this H1, when the screen size is 768 pixels or less but if it's bigger than that, don't worry about ignore the stuff. That's what it is, is a trigger, only when it gets activated when the screen is a specific width. You can see down here there's a mobile version as well. Trigger this H1 only if its foreign to pixels or less. Let's go and create that now in our vision, where does it go? We're going to put it underneath our H1. Put it in a couple of routines, and this is the hottest, but a syntax you're going to have to ride, I promise. It's not that hard, but we're going to have to type it in and follow me verbatim, this is the 'At' symbol and we're going to type in media. Then after that, we're going to type in a set of brackets. Inside those brackets, we're going to type in "Mex" hyphen "Width." We need to put a colon in nixed. Make sure it's a colon and not a semicolon, and now we need to decide how big our tablet it's going to be. Now you can pick any size here, a really common tablet size or an iPad size is 768 pixels wide. We're just saying this media query, here is going to be for tablet and that's what I guess the size is. Now as time goes by, this default will change and you'll find different sites use slightly different pixel widths for tablet, but yeah, it's really common size, so use that for the moment but no, it's not an absolute rule. Last thing we need to do after this last bracket here is put in a curly brace. We add a curly brace, and put it in a return, that is immediate query. Now, I guess it's a little hard. There's a lot of syntax that goes into that, but what you can do in the future is just copy and paste that like I do into all other jobs. Now what goes inside this media query, anything you want to do, but only be triggered on tablet. What I'd like to do is change the font size. If you can see here my vision, and it goes from left align and quite big font size down to the smallest size and centered. That's what I want to do on a site when the width gets down to tablet, I want you to change this H1 to just change the size and the positioning. Don't want you to change the color, the color is fine, would leave that just the size and the positioning. Let's go and look at that in CSS. All we do is as long as it's between these two curly braces. Just here I'm going to type in H1. Just like we did above here, we need to put in our curly braces, put return in, and now we're going to go and style it. I'd like to say something like font size. Where are you font size, I'd like it to be down at 40 pixels, and they invest semicolon at the end. Make sure the syntax is right. You've got curly braces either side of it, and you've got a colon and a semicolon here. Lets save a wax. It's safe. Let's prepare ourselves, because we're about to into uncharted responsive territory, maybe for you. Let's go and check it out in a browser, and the way to taste it, is we're looking at desktop view here. It's quite wide, but when we get down to 768 pixels, where that is, just keep dragging until you figure it out, but watch this, come down. Looking at this font, I'm pointing at it. You can't see me pointing like that. That my friends is all responsive web design is. There's other things, but that is the main core part of it is that media queries trigger at certain widths that goes in, changes you will see assist your HTML is exactly the same. The tics hasn't changed, just changing the CSS for it, and that gets triggered without media query. Well done you. I will be excited, I'm in but when I first figured this out, I was pretty excited. Let's go and do a few other things. Jump back into Dreamweaver. What I'd like to do also is remember we had to do a few things. We had to do ticks the line. In code is text. Align there it is at the top there, and I'm going to click "Center." You can see this is the nice thing about Dreamweaver is that I don't have to type it in or remember the syntax. I can just click on this and all I have to remember to do, what is the last thing that goes on the interval these lines that everyone forgets, semicolon. Awesome. Hit "Save", save preview. Now centering. It's centering. [inaudible] is like flopped onto the centered ish. It's because watch this up and H1 here. This H1, is the one that gets triggered for my tablet, but this H1 at the top here is telling it to do pedding lift of 60 pixels. It's using that as well. It's got centered plus 60 pixels on the side. We can override that. Say actually, I don't want that. Pedding-left, I would like to be zero pixels, please. Semicolon at the end, save, check it out. Now we're good. Awesome, so a centered, is a new font size, drag it out, be impressed. Now we're going to go into one more media query for mobile because nothing much changes except the font size gets smallest. That's all we have to do. Let's jump into Dreamweaver. Inside Dreamweaver, we could type will this add again, or we could just be lazy and select it all. Media query, including the last curly brace, will forget that all the time. Get 'Copy' or edit 'Copy'. I'm going to put a couple of returns and under here and hit "Paste", and what I want to do is couple of things. One is I want to change this maximum width. I want to change it from 768 for tablet to a real generic mobile size which is 400 pixels. Now this change is quite a bit as well. There's so many different mobile phone sizes that I find 400, it's a really good coverage for the all, I think the new iPhones are 375 pixels wide, but some of the big LG Samsung phones are a bit wider. I just make it a little bit bigger just to cover all those phones. What do I need left. I don't need padding left, and I don't need Tics Align. All I wanted to do was change the font size. I'm deleting all of it except I want to change due down to 20 pixels. I should save. Let's check in browser, desktop, tablet, mobile. It's probably a little bit small. But this side 28 pixels, I think that's what I wanted, a little bit bigger. That is our media queries for all of our different sizes. We just doing three in this class to keep it simple and often for smaller websites, that's all I do. Some websites go a bit harder though, describes seven different sizes. I have seven different media queries. It's up to you, but I like to stick to just the basics, desktop, tablet and mobile. One thing I would do in CSS, and before we go on is we'll add some CSS commenting. All this means is that I know because I just made this, what this thing does and what this guy does here, but I'd like to add some notes to myself, to my future self ordained to say just how I remember what these things do. With your cursor just in front of the media query for this one here, this CSS, is I'm going to on the left-hand side here, click and hold down the one that says "Apply comment. " That is a comment in CSS. Click on it. Nothing much happens. You can see there's a forward slash and two actresses, but inside of here, if I type in "Tablet" this just means this gets ignored by the browser. Nobody sees it. It's just the heavy humans, it's for other web designers, is for yourself and the future to know what you're talking about. I'm going to copy it, use it down here, and I'm going to call this one mobile. Let's go to file, Save All, check is working in the browser. If yours isn't going down to tablet and then down to mobile sizes for this H1, you can just hit the reset button. Let's all do that. You don't have to, if yours is working, carry on. I'm going to do it. So you can close down index 1, and open up index 3 actually. Click on that one there, preview in a browser, and it should look exactly how we had it a second ago. Nice. So if yours just goes horribly wrong, open this one up here and we'll reset and we've got back to this part here. The next part of our responsive umbrella, we've looked at media queries that's considered responsiveness. Another one is responsive images. What just means is, if I check out one of my final examples here, it means when I resize the browser, or it goes to different devices, the image is actually resized to best fit. You can see this background moves here at the top, and all these bottom ones resize as well to best fit the space provided. We're going to look at this background image first, and then we'll look at these images down the bottom here. They are both slightly different in the way we approach it. So jump back into Dreamweaver, open up our styles, and what we're looking for is the hero-box. That's the big box that I've got here. Let's look at the one we're working on. You can see that's the big pink box that I've already created for us. All I did is I gave it a height, and I gave it a background color of pink. But I'll also like to do to it is, I'd like to give it a background. I'm typing in background. You can go down here to background image. What I mean to know is I'm meant to use URL, hit "Return". This is the long way. Images, I started typing Im, this is really handy, this pre filling out stuff. Especially when you get down here, when you get to pick these images. Can you get to hover above them, then it will preview them for you. There's even a quicker way the Dreamweaver uses. I'm going to undo all of that. Up to you. You can type it in that long way. There's some really good code emit hinting. In this case is BGI, so background image. All I need to do, instead of hitting "Return", or clicking one of those options, it just to hit "Tab" on my keyboard. You can see it filled out background-image colon, add the URL that I needed, and I'm ready to typing. If you're new, you might be typing out the full thing, just to get used to it. But once you get going, typing up the whole word background image and URL. Remembering it as well can be tough. So I just type in BGI, and hit "Tab" on your keyboard. What we want to do is I want to grab my image from my images folders, so I typed an I. Thank you, Dreamweaver. Then it just looks at my images folder and sees the images that I've got. I want this one called Background image. Hover above it, and that's the one that I want in the background. Even added the semicolon at the end. I'm going to save it and check it in the browser, it's not going to work. It's there, but it's not responsive. I wanted it to be able to stretch in, fill the background. We do that by using a CSS property, and it's a CSS3 property. When people talk about HTML5 and CSS3, what they really mean is just some of the new things we can do in CSS that we couldn't do before. Before this, it was HTML4 and CSS2, so it just a newer version. But it does sound quite fancy and intimidating, but really they're just new things like this. So one of the new CSS features is background, and I want the one called background-size, there is there, and there's an option called cover. That's a really cool new CSS3 feature. Add the semicolon at the end, hit "Save" check in the browser. Now we are talking. Now it's all responsive, and fills the space provided, gets all stretchy and it's the CSS3 feature called cover and background-size. So we've unveiled one of the secrets of new modern web design and it's this thing called CSS3. You see it in lots of parts, but really it's just some new things we get to do that we couldn't do before in the new version of CSS. Now if that went horribly wrong and yours doesn't work, open up, I'm going to save and close that one. Open up index 4, and that should get you back to the exact same spot, just as a little reset check in the browser, and yes, it's working perfectly. If yours is working fine, you don't need to reset, you can just carry on with your index 1 throughout the course. If you do get lost, you can follow me with these little resets. The next thing I want to do is I want to build out these smaller image grid down the bottom here. So we're going to have to put in a box for these images to go into. Let's have a look in Dreamweaver. So these boxes are generally called Divs. We've got a div already. There's one called div hero-box, that's the thing that was pink, but now has the stretchy image backgrounds, so we have to create one of these for ourselves. So underneath our hero-box, put a returning, and we're going to type in a div. So we go in the bracket, and we type in div, and we also give it a class name. The class is just the unique name that we give it. All the syntax should be pre-filled in for you. You can see that as I type the word, as I type the word class, I can just click on it with my mouse, and it fills in the syntax, and I'm going to give it a name. You get to give it any sort of name. You just got to make sure you don't use capital letters or spaces. We're going to call ours col, short for column. It's really common to use that term. Finish it off, we need to put in square brackets and then open out last square brackets, and just like in H1, we put in that forward slash, and it finishes it off for us. So that is exactly what hero-box got made. We've just made our own vision called col. Now if you add a little bit more advanced with HTML, and you're like, man, that's a long way of doing it, I wish there was a shorter way. There is, if you just type in dot col. Dot at the beginning of it just refers to it being a class name, and if you hit "Tab" instead return, it just assumes you mean a div class with col and it fills at all, and so super quick and easy, or you can just type it in the long way if you're new just to get used to the syntax. Either way, Dreamweaver it is awesome for helping out. Inside of this, I'd like to put in my image. So I've made the box, but the box doesn't really do anything yet. It's just an empty box. I want to put an image inside of it. The way to do it, the long way. I don't want you to do it this way, because this is a really long way. We type in square bracket and type in IMG, then we type in SRC. Then inside the SRC we go off and we find our image then we add all texts and there's all sorts of other things we need to do just to put in a simple old image. You can see it up there, I already done it. So image, SRC, there's the image then we've got to put in the all text. It's a little bit long. So I'm going to undo it, and what I'm going to do is use our super secret, Dreamweaver awesomeness and just type in IMG hit "Tab", Enter, and you can see it puts all of that stuff in there for me. Now inside of the source, where's my image coming from? I type in my I for images folder. Thank you Dreamweaver. Then it looks my images folder and say, do you mean this? I say, yes, I mean that one there, image 1 please. Let's hit "Save All", and let's jump into our browser, check it out, and he's in there. He's not responsive yet, because we've just put in an HTML image, we haven't done anything else. But that's the first part. We put in our image. Now we need to make him responsive, and we do that by doing it in CSS. Let's have a little look. We do it a slightly different way from the first way we did it, because the first option we wanted it to be a background image. Remember this guy here, needs to be a background, it works slightly differently. So what we want to do is jump to our styles.css, then down the bottom, I want to put in the style for the desktop view, not in tablets. So I put a few returns underneath my top H1, but before the tablet. Now I hope you're ready, we're going to learn something fancy called a compound selector. That's a selector, our H1. That was a selector as well, these are all selectors. So what I'd like to do is do a compound selector. I'd like to do it to images. So I want to make all images responsive, but not all images. I want the images that are only inside of our columns. So that is called a compound selected. Just means images, but not every image on every page and every website. Just the images that are inside that thing we called col. Remember we called it a class called col. Now in CSS, you refer to classes by having a little full stop at the beginning. The things that you write yourself that made from nowhere have a little full stops at the front. The ones that preexist in HTML often don't. You can see this one here, I made this thing up called hero-box, so it's got a full stop in the front. But as H1, I didn't make up, it's just a pre-existing HTML selector, so we don't have it. So images that are inside col, what I'll like to do to it. I'm going to put in my curly braces and return. To make it responsive, what I'd like to do is I'd like to make it a width. Just typed in WI, come down, and I want to make a width of 100 percent, don't forget the semicolon at the end. Now that does most of it, but there's a couple of other things to make it a little bit better supported across all the browsers, let's put in height. The height needs to be auto semicolon. The last thing we need to do is something called display, and block semicolon. Just do those because they will help all the browsers deal with responsive images. That's the guy doing most of the work, with 100 percent. Let's have a little look in a browser. There he is. He's a responsive image if I scale them down, you can see, it gets smaller with the browser and gets bigger as a browser gets bigger. It's not exactly what we want yet. We're going to have to make him get to a certain height and not bigger. But that's how responsive images are done. The cool thing about using a compound selector, where we said images inside columns, it's not messing around with this image up here, which is my logo or this image in the background of this. It's just dealing with the images that are inside my column. Before we go and give it a width to match our mock-up, what we're going to do is duplicated a few times to get all the images in them. Jump back into Dreamweaver, and jump to our source code. Source code is HTML. This is called a source code instead and what we want to do is we want to duplicate this col, so I want six of them to match my mock-up here. You can see about six of these boxes. What we're going to do is copy and paste the whole line. The easiest way to do it in Dreamweaver is to click anywhere on your image, and hit "Control D" on a PC or "Command D" on a Mac. You can see it just makes a duplicate, because what I want is not just a duplicate of the image, but also the column on the outside. I'm going to click in here, Control D, we want six in total. Then I want you to go through image 1, there's an image 2. Down here there's an image 3, you got to click out, click back in 4. You can see it's previewing it for me, or something in Dreamweaver five and six. Awesome. Let's hit "Save", preview it in a browser. Now I've got the first responsive image, but now I've got all of them. We're ready to go. Jump back into Dreamweaver, hit "Save". If yours is working, awesome, carry on. If yours is not, and it's totally not working, close down the one we have open, and open up index 5. That'll get us back, preview it on a browser, back to where we are now.
7. Adding responsiveness: Next thing we need to do is if we look at our mock-up, you can see there actually, you can see this image is only this big, but in our current mock-up, it's restriction to the whole size. What's we need to do is the container that it's in, remember we called it a class of col. We need to say, "Hey col, you need to be 33 percent, not 100 percent like you are at the moment". 33 percent makes up our block, 33.3, so let's go and look at how to do that now, jump back into Dreamweaver. In Dreamweaver, let's go into styles and what I want to do in my desktop view, not tablet. Find tablet just in front of him, I'm going to put a few returns in. I'm going to put a.col. I'd like col here, calibraces. I'd like you to be a width and I'm going to use percentage of 33.3 percent. Then the semicolon at the end. Make sure you've got the syntax right. Often when I'm teaching people though, 30 width stuff with 33.3 percent. Just make sure it looks like mine hit "Save" it's going to work. Let's take it in, browser. Says working, there were 33.3 percent and thank you very much, but by default they stack on top of each other. They block on top. We can override that by underneath, call him, put a written just underneath width and say float my friends, float to the left, semicolon, save, preview it and now they're all sticking next to each other. Oh my goodness, you are awesome. They are 33.3 percent no matter what view I'm in. That is it for desktop view, we'll add some padding later on, but that is how to resize our for our desktop view. Well done next we need to do is you can see on my mock-up here, it's actually 33.3 percent on desktop at a tablet, it takes in 50 percent, right? When it's a mobile, it's 100 percent across. That's what we're going to do now. In Dreamweaver, what we're going do in tablet here, underneath right one before the closing one because you can see Dreamweaver helpfully highlights it. You can see if I click on any of these beginning again and you can see that's the rapa, so we want to make sure that everything stays within these two calibraces underneath each one. But before this closing one, we're going to say I'd like.col. Calibraces return. I'd like it to be a width, because just like we did above there. We're going to say width of in our case is 50 percent for type a semicolon at the end. I don't need to say float left already, because it's one of the top already says it. We only have to say it once. But when it comes to width, we want to say actually tablet override the 3.3 and become 50 percent. Let's have a little look. 33.3 percent manifesting that had to say down to tablet 3D way. Now it's decking will how we wanted in Photoshop and it's 50 percent across. Now, I want you to pause this now and see if you can go and do it for mobile all by yourself. Pause it, go, do it, I do it here. If you're not offered the d is let's go and do it together or if he was went horribly wrong, with mine. If yours didn't and you did it and you pose it as working, be very proud of yourself, you have learned lots of responsive web design in a very short amount of time. You are awesome. What I'm going to do in mobile, I want to use the same one col and calibraces. I'm just going to say with my friends of you with 100 percent. Remember, don't forget the semicolon, save it and preview in browser. Tablet is 50, mobile is 100 percent. We are responsive web designer of the new century. I get excited, but hopefully you're a little bit pumped as well because we're really learning the fundamentals of responsive web design. Everything else we're going to tickle and we'll make work, but we've got the real foundations done already and those foundations are media queries, okay? Then we looked at responsive backgrounds. We did it for here, a background. Remember we did a background image and we use this new CSS3 option called cover. That was awesome. But then we wanted to use a slightly different not as a background, but just as a regular old image. What we had to do is learn a compound selector. But really the main part was this where we say with 100 percent. The height of auto and the display block, that is responsive images. The last thing which we just learned was we said, "Hey column in desktop, we want you to be this width. But when I use my fancy midi query, I want you to be 50 percent". Basically the all other responsive changes we're going to do, I'm going to be just iterations on doing this. Picking immediate query, picking what controls the thing we want to change and then just doing some changes depending if we're in tablet or mobile. If yours still totally didn't work and it's not working. Let's do a reset and move on. Let's close that index five and let's open up index six, getting close to the end. Hopefully if I preview and a browser now, it's all waking 100 percent. Tablets, 30 percent, 33. 3 percent for desktop.
8. Completing our site : The next thing I'd like to do is I want to what's really annoying me is there is no gaps in between here whereas in my design there's nice wide gaps in between everything. Let's go and edit because I'm in quarter margin, in Dreamweaver here we're going to go to our styles.css and what we want to do it is around the column. We've got three columns now, there's this top one here, which is my desktop version. The top one, it's also referred to as the global, the top version then in here my tablet there's another column and there's another column. What I'm going to do is to this top one here and what I'm going to say is in this column, I'd like you to have a margin to the lowercase, margin of 1 percent. It's going to put 1 percent right around the outside of every column and it's going to cause us a little initial problem. To save it make sure the semicolon at the end, you getting sick of me saying that, aren't you? Let's jump into the browser and it works. There's a border around the outside of 1 percent but because there's 1 percent there, 33.3 percent here, plus 1 percent plus another 1 percent plus there's just not enough room. It all equals up to more than a 100 percent which we can't do. Whenever you add a margin of 1 percent, you need to minus it off the width. There's 1 percent on either side, you can see there's 1 percent there, 1 percent there, so we want to minus 2, to even, so it's 31.3 percent. Let's hit save, check it out and now it has enough room to fit. Cool. We need to do the same for all of them because if we get down to tablet, does the same thing. Not enough room so what we need to do is minus 2 off our tablet. Let's get down to 48 percent, check it, we can find all fits. Now let's get down to mobile. Mobile still works, not sure why. It shouldn't. We're going to get down to 98 percent, so all fits and we can see the borders around the edges. Nice work. Now, if yours is like mine and you can see 90 up there, I think it's just because I've got a better version of Dreamweaver, hit reset and it's gone. Happens to me a little bit at the moment but I'm sure that's just a bug on my machine. One other things you might be looking at in bugs me as well is because we have put a margin around this, doesn't line up with that anymore and that gets a little bigger from the top so we just need to add a 1 percent border to this div tag at the top here. Remember what we called it? It was called hero box. Let's find hero box in here, there he is and you my friend, get a margin as well. A margin of 1 percent, semicolon, save. Now it's all looking kind of a little bit nicer, there's a margin around him as well. Because we didn't give him a width, he doesn't need to be minus off of everything you can see he doesn't have a width any where, so if he did, you'd have to minus off it like we did these other ones but we don't so he's fine. Last but not least, what I want to do is let's look at the navigation. You can see here on my mockup it's stuck side-by-side here on desktop, but in tablet and mobile they are on top of each other. At the moment though, they are all sticking on top of each other. What I'd like to do is I'd like to say in desktop view, my navigation, I've already made a class, a compound class here to store my navigation just to save time at the beginning. What I'd like to do to it is you're looking for the one that says nav ul li, there is my list for my navigation. What I'd like to say is I'd like you to display and I'd like you to do this one called inline-block. That means they're going to stick next to each other, don't forget the semicolon, hit save, check it out. Awesome. Now trouble is when it get down to tablet, it also stays the inline-block and it gets a little bit messy and there's no room for it with a logo so it sticks underneath so we need to switch it back when it gets to the tablet, to that stacked on top of each other method that we had. All we need to do is find nav ul li, down here on tablet, which doesn't exist. What we're going to do is underneath column I'm going to put in this one called nav ul li,click blaces and I'd like to say when it gets to here though, I'd like you to now display block and that means they'll stack on top of each. Let's hit save to preview on the browser, awesome. Desktop stacked in line and here stacked block, same with mobile.
9. Conclusion: My friends, that is going to be the end of this one. We've covered a lot in our time together, mainly focusing on responsive web design. Just to recap, responsive web design is an umbrella term that covers a few different things we do when we're building a website. The main ones are media queries, where we get them to trigger at different sizes of browsers. Within those media queries, we can do some fun stuff with things like the column widths, to adjust for different sizes and change things like the font sizes and positioning. Also responsive was our images, remember we made them a width of 100 percent for the images. That is responsive images. We did responsive background images, where we did our background image plus this background size cover. So you can see when it comes to responsive web design, a lot of the work is done in our CSS and HTML is kept nice and clean. There's very little we've actually added to it, but a lot of functionality has been done using our CSS. All right, see you later. Have a great day.
Daniel Scott, Adobe Certified Trainer
