Transcripts
1. Introduction - Coding for Designers: Hi, my name is Dan, and you my creative type friend are going to code your very first website. Now, we're going to make this short, we'll make it super easy, and you have to think of all the extra money you are going to make with your mad new web design coding skills. I built this course for designers who know how to design a site, but gets scared when it comes to the code side of things. No more. This course is going to allow you to do what I do. You'll be able to design something in Photoshop, or Illustrator, and then bring it to life in a website using Dreamweaver. It's not about learning how to hack the matrix, it's about ensuring your ideas are accurately honored when it comes to the finished website. Using the right colors, the right amount of line spacing, the perfect font weight, and just making sure everything lines up perfectly. We'll create this portfolio website here together, and we'll take it from mockup, all the way through to actually having it published online. Come on. You know you've been meaning to do this for a very long time. Sign up for the course and you creative type person, and me, balding guy with accent and glasses, are going to code our very first website.
2. What we'll be building and resources: Hey, there. In this video, we're going to look at what we'll be creating throughout the site, as well as all the resources that I've got for you to help you along with this video series. Here's the website that we'll be building. It's a portfolio site for creative, and I'm happy for you to use this exact same layout for yourself, just switch out all the CB images, and the logo. You're probably not going to use picture of me, find your own picture of your lovely self standing next to a pole. It's a really just easy site to go build for yourself when you're building a portfolio. Now the big things to note before we start building this is that it's responsive and it just means that it depths for tablet screens, mobile screens, and obviously the desktop here. The desktop here has some padding on the sides and there's an image group down the bottom here of three by three. What we want to do is take a look at when I resize it. I'm going to resize it and it comes responsive when it gets down to the size, can you see? It's actually stretching, the images are stretching, the text is wrapping and the navigation up here in the top right is adjusting. Now, when it gets down to tablet watch this. Can you see the change there? Between there, that's to my desktop view kind of squished down and then it switches to tablet. Now the big changes here are probably the most obvious one down here is that it stops stacking three-by-three and it's two by two. We're going to stack on top of each unit but here. The other thing is to get those navigation menu here. It's stacked on top of each other in tablet, but when it's a desktop, it's got a bit more room, so it's spread out this way. Now when I get down even further to mobile, I seek out my mobile view, you can see the big change here is the navigation. It turns into this hamburger menu or nav sandwich, or three stripy lines. I love those descriptions of this little icon here. That's going to be a big thing for us to get started with is to switch this to here. We are going to use a little JavaScript, and on the bottom here the changes are these images stack on top of each other now one by one. What I've also done is, can you see there's only four here, one, two, three, four. I've turned off a couple of them just so it's not all really long page, just that we can turn things on and off for the different screens so you get a sense of how it works. Now that's the final thing there. We're going to be building that together. What I'll do is, there'll be a link up on the screen here now, bing, where you can go and check out the live site. It'll always be there in live and it'll just help you while you're building to go and check my version to see how yours compare because yours might not be working as you thought and you can go off and check my version. Another thing we'll be doing as part of the course is, at the end of every video, what I'll do is I'll save the files to where I'm up to and it just means that if you're working along and you get a little bit lost, and you can just check my version of it right at that time that you're at just to compare yours with mine, just to see where you might have gone wrong. That's the final version. What we'll be building from, and how you'll typically work, is your work from a Photoshop comp. So this is what we'll be using as a reference. We'll go back to this Photoshop mock-up just to check it out. Now if you want to build your own mock-up in Photoshop before you start designing in Dreamweaver, it's really common to do this. It's really hard to be creative in Dreamweaver, you're really just building the website based on a mock-up you've done somewhere and it's traditionally done in something like Photoshop. If you want to get more into designing in Photoshop, I've got a whole other course for that, so go check that one, it's designing websites using Photoshop. This file here will be part of the downloaded exercise files that are part of this course, so there'll be a link up on the screen here and there will also be a link somewhere on this page so you can go and download the exercise files. It'll includes all the images we need, all the finished files, all the production files, and this PSD so you can have it open and work from just so you can work along perfectly with the course. The other resources that are part of this course are the exercise files, which are going to be the HTML and CSS, all the images that we use in this course, any of the JavaScript that we use to do the menu, those types of things. Also, the production files, remember, at the end of every video, I'll save my Dreamweaver file with all the code as it stands right there so you can download that and check in case you get a little lost. The other thing you can do if you're a teacher or a trainer and you want to turn this into your own course, I've got teacher resources. There'll be a link in the description here or there'll be a link on the page here, and what that'll do is it'll take you to a page where you can order workbooks and what you do is you watch this course, get your skills up, and then you can use that workbook to work that through the class. The thing is, I'd love for you to post your projects. You'll adjust it for your own thing, even if it's not finished, and just where you've got to. I'd love to see a link or a screenshot of where you're at. Post it in the comments on this page, that'd be awesome. Another thing is that once you get to a point, you're watching this course and you're thinking, "This is a very good course," or "This is a very terrible course, " I want you to jump out and give me a review. Reviews at any stage are really helpful for me to develop my course and on a lot of platforms, it's the way I rank well and I trained and I'd love a review because the better this course does, the more students I get and the better I get paid for my efforts. So jump out, give me review when you're ready. The last thing I've done is created a cheat sheet for you. There's a PDF you can download, and print off, and stick it next to your computer with all the handy tips and tricks and things while you're building a website in Dreamweaver. There also be a video version of that cheat sheet towards end of this course, or there'll be a link on the page here. That's what we'll be making. Those are the resources available. Let's go off, lovely designer, and build your very first website using some scary code.
3. Our first HTML & CSS web page: Hey there, in this page we're going to create our first bit of HTML and CSS. We're going to do some coding, but don't worry, it's going to be pretty easy coding. Let's get into it. I've opened up Dreamweaver, first thing we need to do is we need to create something called a site, so go up to site along the top here, and go to new site, give your site a name, you can call it anything you like. I'm going to call this one Dan's portfolio, and down here, this is the important bit, the local site folder and all this does is tell Dreamweaver we you're going to keep your website on your computer. Now you need to keep all of your files in this one folder. You can't have them spread out all over the place like you can do as a graphic designer, you have to have them all on your laptop. Let's create a new folder, so let's click this little browse button. I'll put mine on my desktop for this case, and I make a new folder, I'm going to call it dans-portfolio. You can see the naming convention here, just don't use spaces, try to use underscores and because you're now going to be a hardcore coder, you need to use lower cases instead of title case or upper cases, just because, no real reason. let's click "Create", let's hit "Choose". One last thing we'll do before we go is, just to make our lives easier, go to advanced settings and go to default image folder, click on this one, and click "New Folder", and type ot images and click "Create". What it's done is it's just made, let's click "Choose", I'll go show you my desktop. You can see here is my folder that I made and inside there is my images folder, and that images folder here under advanced will just help us when we are gathering images from all sorts of places. It'll make sure that Dreamweaver picks them up and puts them inside this local site folder. Remember everything on this page, including our text or our files, any images and videos all have to go into this folder on my desktop called dans-portfolio. Let's click "Save". First things first, we're going to create an HTML 5 page. Now yours might look a little different, you might be on recent files, or CC files, just make sure you're on quick start. Let's click on "HTML 5 document". During this course what we're going to do is, there's a couple of options. There is standard, and developer, there's live and split in all these sorts of things. We're going to be in developer mode. I know we're not developers, we're designers, but we're going to learn to code, we might as well use it with the best tools we can and this developer mode has the best tools and it also is really lightweight and really quick, whereas the standard view can be a little sluggish and I find it a little hard to use, so make sure you switch to developer. Yours might look slightly different, yours probably is on files here so I'll switch mine there. First thing we should do is save our page. So let's go to File, lets go to Save. Now, for our first page, we need to call it index.html, and this is true for every website, you need at least one page called index.html as about exactly like that, and that will be your homepage, and you can't call it anything else just for this page, all preceding pages, say on portfolio page or any other services or contact us, they can be called anything we like, but the homepage needs to be called index.html. Where's it going to put it? It's going to put it inside dans-portfolio, I'm just going to make that a little bigger, and I'm going to click "Save". The next thing we should do when we're making any new pages add a page title, at the moment it's called untitled document, and it just means if I preview in browser,watch this, lets go to file, let's go down to real-time preview and click "Chrome". It's going to open up in a browser, and can you see the title on the top here is says 'untitled document' that little page title there and that appears on all pages and that appears both here in that little tab and when people bookmark your page, but also when Google does a search. If I do a Google search for, let's say Dreamweaver tutorials. See these little, the ones along the top here, these blue bits, that's where the page totally ends up. If you have untitled document, that's what will be in blue and Google, and you'll actually never rank. It's really important when you're doing pages to go into your page title so let's do that now. Here in Dreamweaver untitled document, this one's going to be called Daniel Scotts Design Portfolio. Next thing we're going to do, is we're going to add our first bit of code. Let's hit "Safe". To put anything on your page, you need to put it between these two tags called body. There's an open and a close, you can see the close here has the forward slash in front of it. If I put a couple of returns in here, so anything that appears in here, is going to appear on my page, anything that appears at the top here, in this head, is kind've stuff in the background, like, this page title here is kind of the stuff that the browser uses for weird things. In terms of the body here, this is where we're going to put our code. Now let's put in our first bit of HTML code. Are you ready? Ready to become a coder? The first thing we're going to do is we're going to put an angle bracket, and were going to type h1, so h1 is considered the most important heading on your page. To close off the heading, we need to put in a close angle brackets. That's the opening of the head and then we're going to put in "Hello world". You have to write hello world for your very first bit of coding just because that's the line of passage for everybody. If you're a coder and you ever go to coding school, that's the first thing you're going to go and produce, it's something that it's going to make a page that has hello world on it. Welcome, so let's actually make it work for us. We've got h1, the opening, then we've got Hello World, now to close it off, we need to put in a angle bracket, and then forward slash. Dreamweaver is pretty clever and finishes it off for us, but you can see over here there's the open, on my h1, and here's my closing. The only difference is, it's the same thing except it has a forward slash so it wraps around that word, and that is going to be heading, so we've done it, but we need to see it. We're going to use our real-time browser preview. Now you can go up to file or there's a quicker way down the bottom right here, select preview, I'm going to click on "Google Chrome", and there my friends, we have hello world in a nice big heading. You my friend, are now a coder. As long as people want a website that only has headings in it. But we've done it, we've got an h1 and it's got some texts in there, it's on a page, we've even coded our heading along that IPRL page title. Let's get back and do some more coding. Back here in Dreamweaver, we've created our first bit of HTML. The next thing we need to do is create something called CSS. Now HTML are things like the words and the images that go on the page they are quite physical and they appear on the page, the CSS is what we style them with because that's what we want to do now is this heading is big, bold in Times New Roman and black. What we want to do is go and start styling it, and we'll do that in our CSS. Are you ready? Let's go file, let's go to new, let's switch it to CSS, click "Create", and that is a CSS sheet. It's not particularly exciting is it? does have a little bit of texts in there so let's save it. File, lets go to save, you can call this anything you like, but it's really common to call it styles.css. Now the next thing is we need to link the two because these are two separate files at the moment, they are still in the same folder, but they're not connected, so let's close down the styles here and we need to connect them. You do it by linking to it in this head and our body is everything that appears in the page and the head is everything that's in the background that does that behind-the-scene stuff, and that's what we're going to do up here. We're going to put a return afterwards, we're going to put another link to our CSS. Now, it's actually quite long but of code, so there's lots of tricks that Dreamweaver has got to make things a little easier for us, and that's the reason really why people like me, come who from a design background, can actually do front-end web development is because of all these helpful things that Dreamweaver lets us do. Let's do it, let's type in the word link and what you want to do is you want to hit Tab not return, return does nothing. We've just have got this weird word called link, but if we've got link and hit Tab in our keyboard, look what happens. Hey, magic, it puts links to a style sheet and has this href thing here and if we start typing, s, can you see Dreamweaver is even more helpful,okay, and you can see the styles.css. It's looked in my folder and says, "You probably mean this dan," and I say yes, and I just hit return on my keyboard and it lays it in there. They're now connected, if I hit Save, File Save, you can see this little document bar appears at the top here, so source code references the HTML that I'm looking at, all this hello world. Up here, the styles, okay, is when I'm switching to the styling, and they're connected now, so what I can do is I can style this h1 in my styles.css. Go in here. What can we style? We can style loads. But let's get to the basics done. Let's type in h1, and CSS has its own syntax, it's not particularly hard, CSS is the easiest of all the bits of coding you're going to be doing, so it's h1 to reference the thing back in our HTML and then we put in a curly brace and then a proto returning, and can you see it automatically put in a curly brace at the top here and the bottom. Our style just need to go anywhere between them. Don't delete them, or, the top one, everything inside here. Now let's start typing. Let's do the font color, so just type in col and you can see Dreamweaver is quite helpful and tries to pre-fill it in with potential CSS properties and in this case, color is at the top, it's really common ones. If you use the word color, it references the font color, and you see that I didn't type it all out, I just click "Return" and it filled it in. Let's do that again, so you type in col and then I can use my keys to go up and down, I hit return in my keyboard and it fills it in with the right syntax. You can see that semicolon needs to go in there. The next thing you need to do is, if I know the hexadecimal number, I could go off to Photoshop and grab it, or I could just use the color picker here. You can drag this round and the hue sliders and link up a grid, hit enter. The big thing to remember when you are doing any CSS property is that to finish it off, to tell Dreamweaver, you're finished, is to put in a semicolon. That's a bit of syntax. Curly braces is a colon neighbor that automatically got, put it in there, and the semicolon at the end here. That's the one you always need to do, and when you're learning is the one you'll forget, and things won't work, double-check that you have got a semicolon in there. That code right there is #FF0000 is the code for red. Now, let's go and check our browser and what I'm going to do before we leave he is I'm going to do save. I use this one save all, all the time. I'm going to do that throughout the course, so save all, so it saves my HTML and my CSSs. Let's go look up the browser. Are you ready? I'm ready. It's an h1, but it's red, look at us doing web design. Let's jump back into Dreamweaver. What else can we do? Fun. Let's do font. You can see there's lots of font, let's do font family. I just press my arrow key down, hit return and here's some basic ones, I'm going to pick Gill Sans. Remember right at the end of this thing here we're going to put in a semicolon. Now we're going to hit Save and then we're going to jump out to my browser, we've got a big giant red hello world. Let's say we don't like the size, so font-s and you can see the size and I'm going to put in, let's put it in really big, so a 160 pixels, remember to end it in a semicolon hit save, jump out, giant "Hello World". Back here, that's probably be a bit big. Let's get down to maybe 60 pixels, save it. Let's look at one of the thing, the font white, because by default it's that big bold font white is used to, say this font white, and 100 is really thin and considered, 400 is a regular, 600 is about a semi bold and 800 is black. You like the big thick fonts, so I am going to make it 100, remember the end semicolon, save, jump out. It's starting to look nice. Gill Sans is one of those weird fonts where I love it really small, but I hate it in bold, I don't know why. Hate is a strong word. Anyway, let's jump back into Dreamweaver and that my friend is basically what we are going to be doing to build a website. You put stuff in your HTML over here, in this case it is an h1, but it could be an image or it could be a link and then you jump out to your styles.css, you reference it by its name, and then you give it some properties, and there's lots of different properties, but it's not that hard. People think coding a website is super difficult and it can be once you get into the really big, hardcore dynamic Java sites. But in terms of front-end web design and what you're expected to do, you'll be expected to know lots about how to put stuff into HTML and then how to style it in CSS and not a lot more, so don't be scared by it. That'll be it for this video, we've covered how to start a site , define a local site, and then we created our first HTML page. We put an h1 And there, we created our style sheet, we styled it, we did some web design. That'll be it for this video, let's go in the next one and what we'll do in the next one is we'll start looking at something called media queries, and that just helps us learn about responsiveness.
4. Making your site responsive: Hey, welcome to this video. In this one we're going to be learning what responsive web design is and how to do it using something called a media query. What we'd like to do is, when the screen adjusts to different sizes, I'm just going to drag this as an example, but what we're trying to do is get it so when it looks on tablet, it looks like something, and when it's a mobile, it looks different, and when on a desktop, it all looks different, and that's responsive. It was responding to the screen size. That's what we're going to do in this video. So let's jump into the Dreamweaver. In our last video, we just put in some real basic h1 in the HTML, and then we style it in our CSS. Now when you look at responsiveness, what we're going to do is we're going to do something called Desktop-first at CSS. Now a lot of people do Mobile-first, so they'll start styling their mobile screens first because it can be the hardest screen to design for because it's so small. What we're doing in this course, and I find what most people do start with and what I start with, is that I start with my desktop design and then I scale it down for my mobile. So it's up to you whether you start designing your mobile first or desktop first. Just know though that it's easy to go and do mobile first, people love doing mobile first. Me, I rock the boat a little bit by doing desktop first. But don't worry, it makes no difference to your site and how it works on mobile or tablet. So what we're going to do is Desktop-first. It just means that this h1 is going to be desktop. Just to make things a little easier, what we're going to say is we're going to put in a comment. The comments are this one here, and this guy here with a slash and then the asterisk, that's commenting in CSS. You can see one up there. It just means anything that I put in here is just for people, it's ignored by the browser. So you can write anything in here just to help yourself so you finally correct something and you want to leave a note to yourself, you do it in these brackets here or in this little code snippet here. What I want to do is this is going to be my Desktop View. Next what I want to do is I'm going to copy and paste that. I'm down here. Now retains that anything in code. This is going to be my tablet view. So what I'm want to do is we're going to learn how to switch this out using something called a media query. Now to write in a media query, it's the @ symbol then you type media, then you put in brackets, then you type in "max-width". Now in terms of media queries, this is the one thing at the moment that Dreamweaver is not super helpful with. It's the only bit of stuff you are going to have to write it out pretty much all of the syntax for. This is as hard as it gets. So if you're following along, you can copy and paste with the exercise files. You can download those and play along, and just copy and paste it up, or like me, you can write it out. We're going to pick a tablet size now. Now a max width, it just means we're trying to say what size should this website change and what size is the tablet size. Now the most common at the moment is at 768 pixels. Now that will adjust over time, and some people use some slightly different ones, but that's the most common tablet size at the moment. Then I'm going to put in curly braces. There is your media query, and it just means that anything inside of those two curly braces now is going to be triggered when the browser gets to a width of that. So let's do that, let's do h1 like we did up above. What we're going to say is, don't forget your curly braces at h1, curly brackets return, and what we're going to do is we're going to force the color to change. So we're going to use color like we did above. I'll use the color picker, and I'll pick green. Don't forget the semicolon at the end. Let's just put some spacing in there to make it look a little nicer. It just means that desktop view, it's going to be this color, but then, if the browser happens to be a width of this or less, it is going to change it to the screen color. Let's go test it out once it's saved. Let's turn to our browser. Here it is. So at desktop view, it's red. But hey, look at that, so at the width of 768, it's going to switch the color and that, my friends, is how responsive web design is done. Not that hard. People get a little freaked out by it, and it just means that, at this size, do this other thing. It can be, like in our case we're going to stack on navigations slightly different. Okay, so we're going to stack these guys there, and set it there. These boxes down the bottom here, instead of stacking them three-by-three on desktop, it's going to be two-by-two on tablet. Nice. Let's go and do it for mobile as well. Because we're going to use all that stuff again, nice and easy, let's go to mobile view and a max width for mobile. Mobile phones keep changing. They keep releasing new models of iPhone. So 400 seems to be really a good size. I find it's really useful. It ties in some of the bigger phones, the phablety ones, and also real traditional. How big are iPhones at the most? I think the 375 or something like that. So I make it just a little bit bigger to cover in some of the big LG, Samsung phones. Do 400, it'll be fun. What we want to do is we want to change the color. So I'm going to delete all this. If I type in semicolon, it should give me my little picker again. Great. I'll pick pink or magenta or purple, whatever this color is. Remember at the end, semicolon, don't forget him. Save it. Let's jump out to our browser. Chrome browser. This one here. So red desktop, are you ready? Tablet, green. Here we go. Mobile, it is a purply, mauvy color. I'll dispute that color. That is responsive web design. So in here, my CSS, you can see the nice thing about it. My HTML is super clean and clear. There's very little on this page. There's just one new line that we added. But in our styles, it looks quite complicated, but because you built it with me, actually, I know what that does. It's not actually that hard. Coding isn't as hard as it looks. So we're going to h1, that's my desktop view. Can you see what's happened here? This flow, it's called a cascading style sheet or CSS. So it means that this thing here, say the font-family, it flows down, and because the tablet doesn't argue with it, and the mobile doesn't argue with it, it stays Gill Sans the whole way through, whether its mobile tablet or desktop. But color though, there's a bit of a fight going. What happens is it's desktop unless this little media query gets triggered and do that. Then it will flow down to here, and this little media query goes, "Hey, when I get down to mobile size, I want to be this pinky, purply, mauvy color." So that is a media query. What we need to do now though is switch out our particularly lame h1 and do it with our navigation where we have that never sandwich and things not working. So let's jump out and start doing that now.
5. Creating a navigation hamburger menu: Hi there. In this video, we're going to look to make a responsive navigation. At the top here on the right, on my desktop view, the navigation is three buttons and a stack like this. But tablet, okay, it drops down to be underneath and the big one is when it's a mobile, it turns into this bigger menu. We're going to look to do that. Now, what we're not going to do is, we're not going to open up a JavaScript file, and start encoding everything. What we're going to do is leverage a lot, in particular, one specific thing that's already been made. There's lots of different people who've made cool, little, reusable bits of code that we get to use and just go and re-instyle. Because although it would be nice to do it all from scratch, if I'm honest, if I ever gone through and made a nav sandwich by myself, no, I haven't. Okay. I go off and stand on the shoulders of giants and find snippets that I get to use and I style the hell out of them. But, I'm using the underlying basis of their work. Now, there's a bunch of different ones. The language to use, say you don't like the one that I use here, you want to start with something different. I'm looking for like a jQuery Nav sandwich. If you go search for that, you'll find lots. I've found this one, it's one that I use loads. It's really simple, it's really easy. It's really easy to style. I like it. It's this one here, let me pull this out. Okay. It's this one here called SlickNav by Josh Cope. Thank goodness for Josh. He's made a super easy, Nav sandwich that we get to use and style and its got pretty good documentation. First of all, you can do one of two things is if you've downloaded the exercise files. I've got the bits you need in there. But if you're just watching the video. You can download the files that you need, stick it on your desktop, or stick them somewhere and open these, may have looked there. There's a zip file, open them up and here's bits of documentation and the stuff you need. This is probably the only bit that is a little hard for people that are brand new. If you know what you're doing, this is great. But if you don't, there's a lot of stuff in here. Actually all you really need is, if you open up distribution here, you need this thing and this thing mainly. Those two files plus a little bit of text from here. Let's go through and do that ourselves. If you're following along with my files, open up the, ''How to code exercise files'' and what we're looking for is I want you to grab this, this, this. These three files are going to help make it work. Let's hit "Copy" and remember we're going to go to our desktop, open up dans-portfolio. Remember everything for our site all files, images, this bit of code included needs to be inside this folder. I'm going to push it in here into the root of the folder here. If you're going to be real nice about it, you should have a CSS folder and a JavaScript folder and put everything CSS into that and JavaScript into that. We're not going to for this one was going to keep it super simple and just lump them all in the bottom here. Because it's not going to be particularly big sites. This is part of it, we've got this slicknav and we've got this thing here. This bit of jQuery that Josh has written and this is the library that it refers to. You need all three of these to make it work. Let's go and grab the code we need to make it work. If you go to the website sliknav.com, it's got it here. I've saved it as well on and in the exercise file, so let's check it out. Exercise files, desktop, code. There's this one here called navigation code. If we open that up, there's this bit and this bit. We're going to grab this but first, copy it and we're going to put it into Dreamweaver. We're going to replace "hello world." That was great. We loved it. It was helpful, but not a whole website. We're going to place this in and just to be pretty, we're going to tap it across once. That's inside there. Use these tabs to show who's inside what. Let's save it. It's not working yet, don't get too carried away or too upset when it doesn't work. Let's prevent a browser, we'll just see what we got here. Here is my site here. That's all it is, some of these items and you can see if I change these list items. Now, if I change this to portfolio, hit "Save" up out here you can see that's what we're doing. Okay. So that's going to be on navigation. That's the first part is we've copied this bit of code in. Next bit of code to paste in, is this stuff here. This bit of JavaScript here, we're going to copy it and we're going to put it and where does this go? This goes just before the closing of the body, okay? All JavaScript goes down the bottom here. You know what's JavaScript? Well, you don't know what's JavaScript. But generally if there's a tag called script, they mean JavaScript and it always goes down the bottom here and you just got push it down the bottom side don't delete it. You stay down there, this is closing my body tag. Returns don't mean anything in code but just keeps them separate. Now, what we'll find is nothing's actually working yet. Lets jump and have a look. Nothing's working yet. That's part of the things we've paste that in, we've pasted this in. The next thing we need to do is we need to link those files. Okay. We copy them into our hard drive. The CSS and the JavaScript, we haven't linked to them. Let's do that. First of all, let's link to the CSS that Josh made. Link then tab. Then if I start using, what was it called? SlickNav there it is there CSS. Okay. Great. That's one part and next I need to link to those two JavaScript files and we're going to do it here. Remember JavaScript, it goes down the bottom. We're going to go script and in this case we're going to go source and we're going to go, there it is. Nice. Thank you Dreamweaver. There's two of them. I needed to do that one first and I'm going to close that off. Then we need to put in the closing for it there. Okay. We've got our script source for that jQuery for slicknav.js and now we need to do the same thing for I was going to copy and paste that. Paste it there. Make sure the tabs line up. I'm going to make these all line up as well, just because there's no real reason, but it looks a lot better when everything's lining up makes it easy to, for visual person like myself to see. Okay, so let's delete this one and let's put in the other one which was jQuery. There it is there. Okay, so those two. Those both need to be there. Let's hit "Save" and now let's go have a look. Fingers crossed. It doesn't work. It looks exactly as it did before. I know why. Let's go back into Dreamweaver. When you're putting in this JavaScript on the bottom, make sure that this one here, the jquery-1.11.3.min is at the top. This thing here is the thing that Josh's created, and it references this library above it. If this thing appears first, it can't read below itself. This needs to be above and that bound underneath. So that should work now. Let's have a save, let's jump out and have. That isn't working, it may not look like it, but that is the kind of big bones here. So the SlickNav installation, this is if you get to hear, you've won. We're going to go off in style it obviously, to make it look like we want. If you want to start with something different, if you have a look at SlickNav, there's lots of different ways of kind of getting it started. We've started with this Basic Demo you see here. But there is ways of using, we've just used the basic code and you can see here there's a nice bouncy one with all sorts of other dropdown, so if you want to go a bit more hardcore this K start with this HTML and this JavaScript rather than the one that I've given you. Let's go through and have a little look. Whereas it that we have? So it does drop down menu and these things are saying now, what we need to do next is we want to see the navigation only when it's down at mobile view and this thing here we want to see a tablet and desktop just as I'll show you here. So this is that line styled, this guy here, and we see him here desktop, we see him here tablet, and we don't see him at navigation. What happens is we only see this [inaudible] , which is this guy. We're going to delete the word menu, but we only see that and mobile, and we see this a tablet and desktop. So let's go and do that with ALCI says. What we need to do is we need to play around with how media queries. So let's have a look at, first of all, let's look at the SlickNav now, I've had a look at this for you and it's, pretty good instructions but they're really, for somebody who really nerdy knows what they're doing, good for me, but if your really brand new, and you're a graphic designer, it's got to be a little tough. But what have worked up is that I need this guy here, this thing called SlickNav_menu, and this thing here, we're going to copy it. You can just tap yours in, I'm going to Dreamweaver and what we're going to do is we're going to go into our styles and we're going to say at desktop, I would like this thing called selective menu, and I've just played around and I've worked out that SlickNav menu is the name given to this box here, that little stripy line. So the three, that's techniques to each other are just called Menu. So that's the name for these are called menu and this is called SlickNav menu. So SlickNav menu, what I'd like to do is put in curly braces, and I'd like to do something called display and I'd like to say Wheatley block. I'd like to say none. That was,got me when I started block feels like the same as none like blocket don't be in here. But block means display it like a big block of wood, that's how I remember it anyway. So I want to say when I'm at desktop view, I would like to stripy menu here, to display none. I don't want you to appear at all, please, semicolon. Save, let's go look at our menu. Let's look at the right one, let's go here. So at desktop he doesn't display. At the moment though he doesn't display a tablet, or it's a mobile, we're going to ignore this guy at the moment. But it's kind of working, its doing what we said, do not display on desktop and what happens is this one here flows down and because nothing contradicts it into tablet or mobile, and it stays none the whole time. So what we need to do is actually what we'll do just to tidy this up. This h1's here, we use this kind of just to test earlier on then, we just used it to change the color of my hitting just so that we understood what these media queries where and how they worked. For the moment, we'll just have a really nice tidy one, there's desktop and also I just want to be a desktop slash global. People will call this global, this top one and anything that overrides it, will be in our case, tablet and mobile. But global is, if somebody says put it in Global, they mean the top chunk, it might not be Desktop, you might be dealing with what's called mobile [inaudible].So it can be Mobile instead of Desktop on the top, but that's called global at the top there and I got a little lost. But what we need to do is here, we're going to copy this whole chunk. So at this top, don't display and template though, I'd like display, block and let's go and check it out. Actually, I don't want to do that, do I? I want it to be often tablet because my little menu, actually my mockup and Photoshop has it off there as well, and it's only a mobile, or I get to here and I block it. Let's hit "Save". Let's have a look. So Desktop not there, Tablet not there, mobile hello and it's that easy, kind of. We've just turned it off. The last thing about this bit of menu that SlickNav has built is that these are tied together, when I change, you can see on here I don't have just as one portfolio. If I change this one and I go to contact me in here, you see that's connected to this one here they're all the same, but displayed twice, and all we need to do is to decide which display will show. So we've done it for the mobile one and that works. So it's, well that the bigger menu, so bigger menu for mobile not for tablet not for desktop, let's deal with this one. I wanted to [inaudible] Desktop, I'd like it to appear for tablet, but when it gets into mobile, I want you to go away because that's going to read the menu and this menu is called, menu. So we're going to go to my styles, and what I'd like to do is when I get down to mobile view, I'd like to say div menu. You might have noticed that we've been using full stops for these things, to describe them and sometimes we don't, sometimes we have hashes. We just following the lead from the person who made the SlickNav. This is called a class and this is here is called an ID and classes have periods in front of them, full stops, and IDs have hashes. How do I know that it's an ID? A couple of things. The easiest way was in his instructions. There is there says hash menu, and I can see it there, where did I see it? I can see it has the ID of menu. So this side of menu, I'd like to put on our curly braces and I'd like you to do something called display and this one here is going to be block, no non. I think it can be used. So I don't want the menu to appear on mobile. Lets kind of look. Go to preview this one here. So desktop, tablet, mobile and that little line turns off and he turns on. So at mobile all the work happens. SlickNav menu tunes off, well, turns on and menu turns off. Making them all line up, so it's safe. So that's it to get it kind of real basics going now, we're going to go off and style because it's looking a little bit plain Jane, we want to make it look like our mobile design. So let's go and do that in the next video.
6. Styling our responsive navigation menu: Hi there. In this video, we're going to look at styling our blogger menu along the top here because at the moment it's looking a little like that. We need to make it look like this. There's some fonts to do, there's some styling with the blogger menu, there's some text to add and remove, and make it look pretty. Let's go do that now in Dreamweaver. First things first though, we need to tidy up a little bit. We've just thrown this together which has been great, but we need to add some core structure. We've got our body tag, great, and inside of that we've got our menu and that's above it. There's some JavaScript hiding down the bottom. What I'd like to do is we need to put in a framework and to start with, it's this thing called a header, so I picked header, closed it off, I'm going to open up the angle brackets and put the slash in, and you see it automatically filled that out, great, so that's my header and everything for your heading is going to go in there. If I look at my mocked, this thing here. This chunk here is going to be considered my header. I think logo and nav, that's pretty much all that goes up in there, and maybe phone number. That's going to be my header, so inside that is this guy. It's one of my navigation so he goes inside header. This is just really good. This is really common to do this. There are some perks but it's mainly just really good HTML5. Syntax, it's got across. Great, so we've got a header then everything else in the middle of your main content is called main. Close it off, angle brackets, and forward slash and that's going to be everything that is in this site, that is, it's going to be pretty much all of the site, so it's going to be this hero box here and these six. Now, we didn't have a footer and this design, purely just to speed this tutorial up, but you would have a footer in here as well. Everything would go in footer and often that is the basic structure for much of the sites. We're not going to have a footer, so we're going to leave it off. We're going to work on this header and in my design there, there's a logo first, so we need to put that in. It's before my list or our menu, so I'm going to put it above it. I put lots of returns in, some people do, some people don't. I'm going to put in an image. Now, an image tag is quite a long one to type, so image and you've got to put SRC and there's lots of things that go into it so we're going to use our sneaky shortcuts from Dreamweaver. Just type in IMG and then hit "Tab." Hey presto. Now we're going to start typing IMG for our images folder, hey presto, nice work at Dreamweaver, click "Enter", and there's nothing in there because we've got an empty folder. What we're going to do is; we're going to go click "Browse" and we're going to find the files that you've downloaded, the exercise files, if you haven't, check out, there's a link somewhere in here. In my exercise file I've got an images folder and in this images folder I've got that being our laptop logo. Click "Open." Cool. Let's hit "Save." Last thing we do when we add any image is we need to add this alt text or alternative text. It's just the text that appears if the image doesn't load. It gets used for lots of things, screen readers, and also, Google uses it to identify what's on the page, so it's really important to add alt text. This one is the bring your own laptop logo. Where is it? Let's have a look at our preview. Now it is there, nice, just sitting in the corner. That's great. We've got our image in there. Let's now move on to styling this menu. First of, let's make it the three button, so I'm going to get rid of that guy. My different things here are going to be; portfolio, there's going to be about me and contact me. Great, switching out. Nice, perfect. The next thing we're going to do is get it to float to the right because at the moment it's sitting underneath here, we need to get it over this right-hand side. That's pretty easy, we're going to go to our CSS and we've done it before. Remember our menu? We see it down the bottom. Remember, this menu is those blue lines at the moment, so we're going to say up here in my desktop view, I'm going to put in lots of returns, I love my returns just to keep it all separate, and I'm going to say up here, "Root menu, I would like you, curly braces, to float, and I'd like you to float to the right please." Remember, semicolon, "Save". Let's have a look. Bingo. Next of all, I want it to stack side-by-side. If you look at the finished version, I want it to stack next to each other rather than the default underneath, so let's go and do that. To do it, what we need to do is have a look at our source code here, we've got these list items. A UL is an unordered list, which is a bullet point list, and here is the allies in that list, so this is the overall list and these are the different attributes in this list, so different bullet points, so this is the list items. What I need to do in this case is I need to say, we're going to do what's called a compound selector. We're going to say, "I want to find a list items." The allies are inside menus. I want these guys, if they're inside this menu here. I'd like you to do this thing called display, and we've used block and none before, we're going to use this one called inline-block. Remember, blockup is up here and inline just means they get into a nice little line there. Hey, hey, awesome. Cool. Next thing I want to do is I'd like to style them because they're looking a little bit sad, with the blue underlines and things like that. Let's go and do that. To do this part, what we need to do is be a little bit more specific. We need to do is style these a-tags, which is my hyperlinks, that are inside the lists, which are inside my menu. Let's go and do that. Another compound selector. Menus, so here we go. These a-tags they are inside lists, they happen to be inside this menu. I'd like you, curly braces, to do a few things. The first one is text-decoration." Let's get rid of that. Text decoration is the underline. We're going to go to none. You can see, you can add lines-through and overline and underline, so we're going to go to none, semicolon, hit "Save," go check it. Hey, underlines are gone. Nice. Next thing is, let's change the color. Let's go to you guys. I would like to say, you, and if you type color just by itself it means the font color. You can use your color picker, but I'm going to type in 4e4e4e. Just a dark gray. Remember at the end, make sure there's a semicolon, "Save". Let's have a look. Great. What I might do just to make things a little easier while we're styling it? Yeah, just so you can see both of them. Great. Next thing I need to do is give them some padding, so I'm going to go padding, and if I go padding eight pixels, you see if you leave eight you can see it's going to do the top, right, bottom, and left all the way around it, which is great for me. It's what I want. What I want to do is go and change the fonts. Now, I could definitely go and change this font. I could type font family and go and do it here, and pick one. You can see it changed in the background there. But I'm going to have to do this, say I want to pick a font for my website and let's say it's Arial or Times New Roman or something, I'll have to reiterate this every time I put a text. What we're going to do is we're going to do something sneaky, is we're going to say "for global" over desktop. I put it at the top here because it's a big overall thing. We're going to use this thing called a body tag. Now, if we look at our HTML CSS, body is everything on the page, so what we're going to say is all the fonts that are inside this body tag, I want you to be this font and it just means everything. This a-tag, any headings we put in, it's all going to come along for the ride. We can override it later on, but I want to say "Body, I would like you to have a font family of, and I'll use in the moment Gotham, Helvetica, Arial, Sans-serif." We'll talk about fonts a little bit later because those basic ones aren't very cool. We want to use our own fonts, but we'll save that for the video after this one. Font-family, we're going to use this, and there's my little fonts in the background. Great. You can see here it's just a lot easier than trying to write it every single time we put in any text and we're just going to ignore it for the overall global. We might do here now as well as with the font size. Font size, we'll make it, and I'm pulling these sizes from Photoshop. I've got my mockup and I'm just going in and checking, so I'm going to do 18 pixels. Great, it's a little bit bigger. Lovely, say "Save". Let's have a look. Next thing I might do is that there needs to be a bit of padding around this heading or this header tag. I could pad this out a bit more and the image out separately, but because they're all inside this, let's have a look, they're inside this thing called header. I can just add bit of code and a CSS to this header just to pad it out so everything inside of it get some padding. What I'll do here is, down the bottom here, I'm going to say, "Header and curly braces," and I'm going to say, "I'd like some padding please." So we do padding, top, and maybe the top is 10 pixels. I say maybe, I already picked this out. It's been ages going over and deciding how big and little, so you'll spend a little bit more time in here going back to your Photoshop dock and deciding what looks good. I've got padding, top-left 20 pixels. Now, I'm doing it the long way, I know. Let's watch this. We're doing it this way, 20 pixels. Great. What you'll find is a lot of people just do this. We've done top, bottom, left, and right and it's great when you're learning because it's nice and easy. But watch this, let's get clever. If we do padding, and it assumes top first, so if I put in 10 pixels and put a space in, can you see the little interfere? It's goes around clockwise, so next is the right and everything else is 20, so 20, 20, 20. It's doing the exact same thing, semicolon at the end. It just goes top, right, bottom, left. Let's have a look. Yeah, it's got a bit of padding around it now. Lovely. The next thing is we need to fix up our tablet view, so watch this. We get down to tablet and it just gets all stack in there, so what I've done in the mockup, remember, is I've got it to do this and then it gets down to that lovely stacked on top, so let's do that. What I want to do is when you get to tablet my friend, I would like you to select the menu. We did it up here. We went inline-block, which stacks them next to each other. What we're doing is we're turning it back to what it was. I'm going to use you, come here. It's just the one that says block. Save it. Let's check it in the browser. You, and boom. Great. We could add a bit of padding underneath to it, but because we haven't got our perfect font yet, we're not going to do that yet. We'll do it a little bit later. Cool. One of the things that I wanted to do is I wanted it to align right. I'm going to go text, align, and I want it to be right. When it gets down tablet, let's check it out, it's aligning to that right-hand side. Now, the big thing to change is a big menu, because he's down here and hey, I'm joined in gray and I got this word menu you, even though I feel like everyone knows that that's the word for menu, but I love that is left the stuff in here, if you do need it, it's easy to take out, it's harder to put in. Let's first of all get rid of the word menu. We're just going to use this just on three lines here, so we going to do that. Where does that word menu? It took me a little while to find as well. It's not in the HTML, it's not, the CSS, is not in the Slicknav.CSS is it's not in the jury, it's in this one here called jquery.slicknav.js, and there's a few things in here. You're not going to change a whole lot of stuff in here, there's some values that you might play around with, but this is the label that I want. I'm just going to leave mine, but you can see I can adjust this one if I put my name, you'll see that it's this guy here. I'm going to get rid of this and leave all the arrest. Great, let's jump back to source code, let's check it out in here. Great, nothing in here, next up, and we're going to get rid of this big giant, a gray box. What I'm also going to do, is I'm going to stick this over here because I'm working on my Byol here and I can fit it in. Nice, I can do some adjustments, now, this big gray box here, how do you know what those big gray boxes is? In our HTML, there's only a few things in our styles and few things. There's this other CSS called Slicknav and it's going to be in here. This is the styles that Josh has made to start all these bit, we need to change them. They're all in here now. First of all, just because the way this was created, it's not really looking as good as I like it and things on tabbed in, and there's no space between them, a nice little feature in dream with, if you do a select all the text, and there's an option over here that says Format Source Code. Click on it there and says "Apply Source Formatting" and it just tidy things up, can you see? Makes it a little bit easier for me to work out where I'm at, and fine, you don't have to do that, and I've got this now, want to work out what this gray bar is, and what you'll do as a web designer is you'll go in, we use in Chrome to display it, and previewing browser, and what you do is in Chrome is you right-click it, there are options for the same thing in Firefox and Safari, and Edge Explorer, but use Chrome, and right-click anything and go to Inspect, and what I'll do is can you see it's highlighted and it's told me it's this div code, all right, click it again, say Inspect, this is div.slicknav_menu grid, and it's telling me a few things, and what I'm looking for is, it's a little hard because we're in the small size. It gets a bit bigger if you want to drag it out there. But you can see over here and you can see there's background color? If I turn that, I actually have to go down again, yeah, that's this guy here. He is, that background color and that there is slicknav.css, and it's telling me that it's a line on line 64 of the CSS is controlling it. If I go into here and I go to slicknav and I go down to line, is it 64? I might be lying, no 64, sorry 94, and do this one in here and it's says 94 startmenu , and you can see there there's the gray color, lovely. You use and spent quite a bit you like what the hell is that? What controls it? You can look in here and it tells you what lining the CSS it does. I'm going to grab this whole line and just spin, it was working, the gray boxes bar, the color's gone, but it's still pushing this logo down I you to slide up there. What we can do is this menu here is we can say float to the right please, spell it right? You can see when he flips to the right, opens up a space for this guy to slide into, great, this is safe get in there. Next lets go and change this to the colors are over here we've got this lovely, where is it? Redbox, and you'll notice that there's no rounded corners and there's no rounded corners on the lines. I know it's a really menu detail, but I'm not into the rounded stuff. Nobody isn't the moment, it's all about square edges. Let's go into that, then close down Inspect, and let's jump back into our CSS. I'm not going to keep going off in trying to use Inspect to figure out what classes are being used. I've done it already, you can fiddle around with it. I know that it is something around here, it is I combine here it is, this thing here called slicknav button, and it's got this thing called border-radius. I don't need all the border-radiuses, goodbye, Save it, you see, Hey, gone. There's take shadow that was for may be we had the word menu you there doesn't need to be there, tick decoration is the underlying, we don't need that either, this background color I want to change the one for my flash file, now it's nice and read, "Save". The last thing I want to do is get rid of my, it hard to to say these little white lines have rounded corners on the edge. That's why I like them so much, and it's this thing here. All of you guys here, so slick.nav.slicknav_icon-bar, if you've done it's on line 43. There been a let don't need any of you guy lovely, hit "Save", and look nice square buttons, great. Last thing I need to do is it's working. But my little menu here is, I've got rid of the background color, but you can see these guys copy same when they're dropping down, because I removed that background color. What we need to do is I need to stall these buttons a bit better, lets go and do that, and I found a little friend it's line 1, 3, 4, slicknav_nav a, and in this one here, there's no background color, so coloring mean that we style the font, and it's a white font on a white background with no background color. We need to add a background color, background color, here we go and I've got a color I want to use F1474c lovely semicolon, lets Save, and now, going here could get hey, you got a background color. Now, what I really want to do is pie with the padding and the font and the hover, but we're not going to worry about that, that you can spend some time, you just go into this exact same class, play around, but you see the padding here and increase it and we do want to do it, but I'm going to save some time somewhere. The one thing you want to do is you could spin, it just playing with a hover, but don't save it because imagine you're on a phone, there is no way to hover, nobody ever sees these hover ones, don't bother doing the hovers, you can't if you like, and let's close it back up. Lovely say Save, and that my friends is how we make a responsive menu. Big version, on a desktop, but when it gets smaller to tablet, close down and bright lines and stacks on top of each other. I know the fonts not require one yet, and then it gets down to desktop, I'm sorry mobile, and it's just the big menu. Now, these are probably too small then your padding, you've got to make sure one of the things to do just when you are making mobile stuff is that especially Google. Google will check your site to see whether these buttons are clickable, they've got methods of seeing if these touch points can actually be touched after too small, like my dad with giant fingers, and you hit like four of them at one time. You've got to make sure there's enough padding, all the buttons are big enough that people can clearly hit them, as part of some of the ranking stuff that Google do but good work. We've styled it, you can style it as you want. You can add and remove, and colors and fonts and styling things, but some good work man, we've used somebody else's Lovely Josh's slicknav to do a lot of the hard work. It's mainly just the JavaScript, and yeah, we've gone through and made it our own high-five team. Next, what we'll do is we'll look at getting serious about our real-time preview and prevailing on a mobile phone because it is a bit tough, doing this slide thing here. Let's go do that in the next video.
7. Real time preview on phone & tablet: Hey, welcome back, and up until now what we've been doing is we've just been living with the whole toggling between Dreamweaver, back into the browser and sliding things around mobile, and this one works okay for mobile, but it's not a mobile phone. It's not the same size. It's longer than it should be. So what you need to do is actually preview in your actual devices, and it's really easy with Dreamweaver. Dreamweaver's got some sneaky tricks to do that. So when I'm working, this is how I typically work, is I've got two screens. I obviously can't for this tutorial because you can only see one of them. But what I'll do is I'll have this sit up like a desktop up here. I've got a big nice Mac screen over here, and then I have Dreamweaver down in this screen and it means that when I'm editing in this, this adjusts. We see that it happens at the same time. So if I make changes, they instantly display in the browser, which is great. So that gives me my desktop one always there, so I don't have to toggle back and forth. Now, for the devices, say your tablet and your mobile phone, what you can do is, I'll show you down the bottom here. I'm going to make it full screen. See this thing down here, this little QR code reader, QR code, and what you need to do is you need to jump to your phone and use your QR code reader. So let's go, let me grab my phone now. So I've got my QR code reader here. I'm going to open it up and down here, bottom of Dreamweaver. I'm going to go here, click and get my QR code reader close to it. I'm going to weed the angle on my desktop. Good work phone, jumps out. Might ask you for your username and password. It does. Can you see it while I'm typing it? You totally can. So you know it begins with T. But I'm going to cut this out so you can't see the rest of it. Look at us. We have got it on our phone. Cool and nice, you just take a photo with QR code reader. You have to download a QR code reader, they're free from the Apple Store or from Android like my one and then you just sit this next to you, and I'm going to sit down there and watch this, as I make changes. So let's go to our styles.css, and what can we see on mobile? Not a lot at the moment. So let me decide, what can we see? I've got an image here so I'm going to do what with that image? I'm going to make it smaller. So I'm going to give it a width. Here, I'm going to give this guy a width of 100 pixels. You can see he got smaller. If I make him 50 pixels, he's tiny. You get the idea, 10 pixels. So it means that while you're working and you're like, say you're doing something on the desktop view, you don't really realize it affects something in the tablet or mobile device. If you have them up around you while you're working, it just means as you're doing changes you're like "Oh, didn't realize the ramifications of that," Probably the best reason for having them up is that you will impress the heck out of anybody walking past. If you work from home, your flat mates or your wife will look at you and you'll look like you're in Minority Report. Lots of devices all around, and at work you'll look like a hardcore Coda with all things flying around. So that is real time browser preview, and you can do it on your device as well.
8. Working with typography on a website: Welcome back buddies. This one, we're going to look at fonts. Fonts are super important for us designers. Earlier on, we just used Arial and basic ones. So let's go and look at doing a proper font. Now, you've got a couple of options to do it and the big two are Adobe's Typekit or Google Fonts. Both are great. I'm going to use Google Fonts now. Why? Because they are quicker and easier and [inaudible] Go to Google Fonts, so it's fonts.google.com, pick a font you like. In our case, we're going to use Open Sans. Why? It's a good font. It's the new Arial. You'll find, if you open up 100 websites, I bet you 90 of them are Open Sans. Why? Because it has really good weights. There's lots of other ones, Roboto I use lots, it's the YouTube font. There's lots on here and the cool thing about them is they're free. So have a look around, find ones you like and say you're at the design pieces where you're in Photoshop, you can go into and say, "I like Open Sans." There's a button option here that says select this font. Is there a download option? Click the font, then you go, you've edited it down here to your collection. Then there is this option here that says download. That's not going to do anything for your website, but it'll mean that you'll have them on your machine. So if you download them to your PC or Mac and you can use them just in your Photoshop mockups and in InDesign and illustrate that these are fonts you can use, lovely. But you use them on your website, it's slightly different. They tell you what to do down here. You need to do two things, you need to put that into the head of your document. It tells you what to do, put that in your head and this is the style that we use. So grab that. Well actually, before we do, I want to customize it because I want to use in my design, I've used light, regular and bold. What you'll notice is the load time, the more fonts you include, the slower the page loads and that's really important for search rankings. You want your page to load really quickly. I can't help myself though. I want extra bold, I mean moderate and it's really common for me to get into the slow. Why? Because I want all the way someone italics and I want this and I want that. So I'm going to use 300 light, 400 regular, and 800 for extra bold. Lets go back to Embed and what we're going to do is going to click on this, copy, go into Dreamweaver and now Source Code. Say you put up inside the head. So know our header, the language is quite important. This is our head. So our body, I'm going to move down. Remember body is everything on the page, head is the background stuff. That's all I want and it says put it anywhere in here. So there you are anywhere in there. It just says it's going to link to Google Fonts and it's going to look for this font family court, Open Sans with these three weights. You don't have to go back, say you do want to use 600 later on. You can just type it correctly, but just type it in there and you'll have access to it. Remember it's going to slow down your fonts though. So that's one-half of it. So it's looking for that font, you need to now actually use it in your CSS. So let's jump back into Google fonts. So said do this, then it said use this font family of Open Sans ends here, copy it. What we're going to do is, we did it earlier under styles.css and we said in the body, so everything in the body be this font family of Gotham. All of these ones, we going to do this. So just switch it up and it just says use Open Sans instead. Lets save it, lets have a look. Look, it's my lovely font. You might be going, "It doesn't look much different." Yeah, it's not much different from Arial but it is so much better. Yeah, it's defaulting at the moment to 400. I could go in and change it. You can see in here, let's go down to, where was that thing controlling it? There it is, there. It's typing font-weight and I could use say, 800, save. I've done some bad syntax in there. oh, this looks good, save it, jump out. Things look broken, I have lost my fonts, lost everything. I'm going go to file, save all. There's a bit of syntax wrong, I've broken it and I can't see. No, I didn't, just save all. Sometimes that happens in Dreamweaver, just go file, save all and it saves all these separate files you might be working with. Hey, giant bold font. So I'm going to switch that off, go back to the default 400, save. Nice work, we have got a font. Can you have more than one font? Of course you can, but load times get compounded. So you're going into Google Fonts and you'll find another one, you'll have to put it up again in the head and put it again somewhere. You'll have to use it for body or maybe you want to use it just for this menu. So you can use lots of fonts, but remember, it starts getting a little slow. Now, why we are using Typekit? Only because it takes a little bit longer and you need a paid subscription to do it. You have a paid subscription for Typekit because you've got credit cloud, because you're using the new Dreamweaver. So you can totally use that, it just takes me a few extra steps to get set up. There are different fonts on them, there's a lots of the same fonts. So go and have a look at Typekit versus Google Fonts and find the font that's going to work for your design.
9. Creating our hero box: Hey, welcome back. In this video, we're going to look at creating these boxes down the bottom here. We'll start with this thing here. This is generally called the hero box, sometimes the jumbotron. First thing we need to do is, we need to add a bit of structure to our main part, something called rows and columns. Now, what is a row and column? It's the underlying structure of pretty much all responsive websites and we need it, it's pretty easy though. Just like Excel, think Excel. This thing here is one row, one column. This thing here is one row, three columns. That's what we need to know. What we're going to do, is we're going to jump down into our Dreamweaver and get the rows and columns in. We're going to jump to our source code, and we've got our header, there the is there, and then there's our main. We're going to put some retains in between it and some spacing in there. I'm going to tab across, and what I want to do is put in some rows. We're going to use this thing called a div tag. Now, div tags are divisions of space. It's easy way to remember them. What we need to do is we need to create a div tag. We're going to create something called a div class, we're going to give this a name and we're going to call this one row. Then we're going to close it off. Then we're going to close this div tag by angle brackets. Just like we did for our H1, we close it off with the angle brackets and then the backslash. I've got one row. Inside that row, I would like a column. I'm going to go, exact same thing again. I'm going to put in a div class, great, I'm going to call this one col. Close it off. Open up the ending bit backslash and it finishes it off, and that's going to be my column inside. This the first one. Let's make sure we do the other ones. I am going to show you some cool stuff now. Instead of having to type div class equals and all that sorted of stuff, it's pretty good with Code help there to make it easier. But they make it even easier using this thing in the background code ima. All it does is means watch this, if I put in.row, remember a dot in front of that means it's something called a class. If it's a hash in front of it, we learned earlier, it is an ID. We're going to do a class. You just put that in and say in return, return does nothing, hit Tab member from earlier on, and look, just guesses because it's such a common thing. It knows that if you put it in a class and a tab, it just assumes you want a div tag. Div class row, awesome, return that and we've got one, two, three. Now, in this case, what we're going to do is just because of the layout that I want to do. I want this to be one, two, three here, so there's two rows out of three columns. But what I'm going to do is when it gets down to here, tablet, if I had them two separate rows, it means that I have one, two, three here and then I'd have one, two, three, and that looked pretty weird. What we're going to do is actually we're going to put in just one row. We're going to put in six columns. It just means that these collapse nicely. It means that if I get down to here, they all techniques, each of them flow into the box because they're all part of the same row and they'll float next to each other. You'll have to experiment with your design. If you've got four and four, you could definitely have two rows with four columns that would work. But it was had to play around with it. I know when you have these multiples of three and you want it to do this. Otherwise, this guy is in a separate row and gets pushed down and you have this wave break. They're all going to be the same guy, trust me. How many columns I want? I want to two or three. It's going to take me forever, not forever I could just go call and copy and paste it, and gets even clearer though. I'm going to just type in call and before I hit Tab, I'm going to hit n times, and I'm going to put in six, so times is just the asterisks. Now hit Tab. Hey, go in. These are the tricks that make you get fast when you're bringing that from web designer. Lets hit save, so we've got our rows, got one row with one column. I've got another row with six columns. That's going to be my stack because I want this hero to go inside this one. Let's do that. To create a hero, what we're going to do is I'm going to put a return in here. Inside this column, we're going to make another one co-hero, and we're going to hit Tab, But in this case, so just like we did for row and col, this one here, we actually go in style now. At the moment, these are just our overall structure that we didn't want installed them at all. But this guy here, we go into style. What we're going to do is we're going to go to our CSS styles. We're going to do it for our heating, well global and more tins. We're going to say.hero. Classes have a period in front of it. Can you brackets, and we're going to do a couple of things. Let's do background image. Background- image. Its URL when you are dealing with background images, and browse. Now this is member looking at my files that I've downloaded. For the exercise files, you can use your own. That's my hero background. This background thing, I have gotten photoshop and I've just turn your [inaudible] down so it looks washed out. I'm put ticks on the top. Great, hit Save, and remember close it of at the end, semicolon to finish it. Let's go and check it in the browser. Nothing happens. Why? Because he's there. But because he's gotten no substance, there's a background image. The background image doesn't hold it open. What we need to do is give it some height. Now, it's really uncommon to give it height, why? Because we want the content inside of it to define the height. When you're working, we just often add sum padding to the top and bottom just to get things going. Padding, it's going to be 52 pixels by zero pixels. Zero pixels for the right and 72 for the bottom, and 72 for the left. Hit Save, and lets have a looked at it. You'll see now, it just got some padding from the top and the bottom and the left, and I've left it on the right just to zero, and that's why we can seen the image now. The image is not doing what we wanted it to do. If I expand this out, it's repeating. You can see the repeating in there. But we want it to be responsive basically. What we're going to do is we're going to go into hear and we're going to use this thing. We are going to use background, and it's going to be size, and we're going to use this one for cover. Cover is a really handy one, if I hit Save, check it out. It's the one that stretches out, fit, watch this. Gets smaller, it's going to work on all sizes. It doesn't look perfect now because it's all squished in, but as we add content, it's going to look nice. Often, background cover is the one you want to make the background of boxes responsive. Next up is, let's put a now text and style it. Yeah, having to do with it. What we're going to do is going to move to our source code and inside of hero box, I put 10. The first put a text in there is this ima, and then digital designer. Obviously, isn't going to change for what you're going to do. Let's play along to get the idea of it. Normal body ticks, we didn't heatings before moving H1 that are important and you should only really have a hitting an H1 one per page. All the risks that takes often as a p tag or paragraph. We're just going to use a p tag. What was it? It was ima. I'm going to close off that p tag with a slash pre-filled it in, save it. Let's checked in the browser, and look at the right one. There's this little ima. Let's go install that one. Now, I could style the p tag. The problem is if I style a p tag and I'm going to use this and lots of different pages. If I make it like it is my make up which is big and bold, everybody takes me big and bold. What we're going to do is make a little specific class for this guy. All you do in between here is we're going to create a class, and we're going to call this one class, and were going to give it a name. I'm going to call mine sub hitting, copy that. Now, I'm going to go to define that class, sub hitting so much styles. I'm going to in my desktop view. I'm going to in here. Now, what guys invest before a class, that's right. fool stop or a period, and I'm going to style it. Now what I want to style it as it is. First of all I want the color and the color just buy itself styles the font. Now, there's very few [inaudible] in this number that I remember, and #fff is what? It's the only one I know. Font white, it's going to be that nice big bold color. You go, that's going to be 800 pixels less. What I might do is change the font size and I'm just pulling these font sizes from my Photoshop makeup. You can play around, trial and error. I know that the margin at the bottom here needs to be played around with. Actually, we might leave that til afterwards, so we can see all the fonts. We'll leave that off, great. Checking the browser. Hey, you've got a font. It's not big and bold. Why not? Pixels, it's not pixels. This is just the weight 800. Thank you. Let's put in and underneath, and it's this guy here, the digital designer. Let's put that in and that's going to be the most important word. This is going to be my H1 instead of a p tag. Why? You need at least one hating per-page to tell Google in the search engines what this pages about. If I had the H1 as ima, Google would come two this page and say, ''Your site is all about this thing called ima. " But I want it to be about digital designer. Let's go in here. Back to my source code. Underneath it, we will put it in H1. I'm going to close it off. What am I going to call it? It's digital designer. I'm going to close it off with my angle brackets foward slash. This my H1. I'm knot going to use a class because why? I'm going to have this H1 is, every page is going to use the same title. I'm going to use H1. Let's stall that H1 and braces. You'll notice that we didn't put a period in front of it or a hash. There are just some things that are premade like p tags, H1s, image tags, they don't hit tags. The pre-made in HTML, we don't need to add anything to them. It's the stuff we make up on our own. The stuff that never existed before in life either has a period in front of it or a hash. What we're going to do is we're going to give it a color. Remember, the one color I know, font white. This one's going to bee the thin one. Font white is going to be 300 dipole px, and let's put in a font size. This one is a nice, big, healthy 52 pixels and save it. Let's have a look in the browser. There's a few things, there's some defaults going on, h1s have by default just come out of the box. Somebody decided long days ago that they have a really big gap in front of them and, p tag has a little bit gap underneath. Together, they have giant leading. So we're going to use margins on the bottom and minus them. Let's go do that. The subheading. What we're going to do. You could do the margin of the top of h1, or I like to do this space off after, so we're going to do h1. We're going to remargin with bottom. You're going to be minus 54 pixels. This is going to play around with our spacing. There you go. Nice. Next bit it shall be source code, and we've got the paragraph pixel underneath. Now I'm going to put it in here and I'm going to put a my p tag. Now, I want to put a new class because I don't want to use the same one here, so what I'm going do is use my trick. I'm in the p. If I hit tab it's going to put it in. But I could type in p class. [inaudible] To be really clever Dreamweaver does this p. remember. from my class and I'm going to call this one heading-body-copy and hit Tab. It's created my p tag and add the class to it with this thing here called heading-body-copy. Let's add the p tag on my paragraph text. Let's check it in a browser. Whoop. Does this sometimes. Sometimes you need to go back into Dreamweaver and just hit "Save All". Back in here that's [inaudible] Great. Now we need to apply some styles to that p tag. Let's go to our CSS styles. Up here in my global or my desktop, I'm going to type in the class it was header, heading. I can't remember. Just guessing. Let's see if it works. Actually color, remember color by itself is for the font. Remember fff is for white. Actually that's about our font. Let's check, have a look. What we might do is play around with this because the spacing after this is not great. Now, you notice that I didn't put a font size in. If you leave a font size alone, it's going to pick 16 pixels by default. That's a really common size. Try not to go too small. [inaudible] that's these penalties from Google for having fonts that are really hard for people with disabilities to read. Anyway. What we're going to do is play around with the margin for this one. We are going to do margin-bottom minus five pixels. Let's have a look. Yeah, it's getting to how I wanted. It's [inaudible] a bit big. One of the things you can see here is that, I didn't put any padding on the right-hand side here. Why? Because there's something that I want to do. It's a little bit tricky, but It's not that hard. Is this guy here I want to put a right margin on him. A margin to the right. We're going to use a percentage instead of a fixed number. It just means that the percentage can be nice and big when it's at a big size. So if we use a 20 percent it's quite wide when it's 20 percent of such a wide screen. But when it gets smaller, it starts progressively getting smaller as a percentage as well. You could totally just use actual, they call an absolute size when you use pixels, but this one here is a relative size. Padding make sure margin- right and it's going to be 20 percent. That's relative to the size of the box that's in. Great. I'm going to put a padding here. You'll notice that it's quite big here. We want to get down to the smaller sizes. It gets progressively smaller so it's not being too destructive when it gets down. Great. That's the fonts. Let's look at adding our button. It's this guy here. This let's talk button. You can click on it and goes off to maybe our contact us page. Let's go and do that. Now when we're putting in a button, really what's happening is we're going to put some text, we're going to put some padding around it and fill that padding with a color, and it's going to look like a button. Let's go and do that. In my source code. We're going to go down here and underneath my p tag here I'm going to put in a link. Now, so I want it to be a link as well so I want it to be clickable. We're going to start with an a tag. Now we have looked a tags, but we haven't created one of our own. Now to write an a tag takes forever. It's a href and then you put in where you want it to go. It's quite a long process. When you're doing any link, a tag is also normally called just hyperlinks. A, put it in a tab, and puts in the href and all the junk in there. We're going to be able to [inaudible] and we're going to do a and add a class to it at the same time. We'll call this one let's-talk. Hit Tab. Can you see all that lovely stuff done for us? We've got a hyperlink that's got a class already applied to it called let's-talk and let's put in here let's-talk. Save it. Now we need to go and style this guy here, so jump into our CSS. Let's put few routines in and let's make and let's talk,.let's-talk, curly braces. First up, let's put in a background color because we can start background color. This one is hash and it is a background color of f147 is the I've used the color of peach red. Let's have a little look. It is there. You can see where we're going to go from here. We need a bit of padding around it. Let's going to do that. Let's do padding and I'm going to eight pixels. You see here it's defaulted to eight all around. Top, bottom, left, and right, if I leave it like that. If I put it in a second one, which is going to be, what is it, 30 pixels. Can you see it's done top and bottom at eight pixels but left and right at 30? Clever CSS. You can fill them all out. But we be sneaky in doing just what we need to. Great. We've got a button. It's clickable. Doesn't go anywhere. Can you see here? We've got this href. I didn't really mention the link. What you'd write in here, is you'd write maybe go to the contact us page, contact-us.html. That will be the page. We don't have that page yet. You click on it and come up with an error. Often when you're working instead of leaving a blank put in this, put it in a pound sign or a hash key. It just means that it works. But there's no errors that throw up. Because if you're sending it to a client and they're testing and you're just saying, "Hey, have a look at the website." The look and feel, but not the actual. It's not fully built out yet. They click on it they'll come back to you and say. "Hey, the link's broken and it's not working." So you just put in an hash just as a place holder and make sure you switch that out later on. Great. Next thing we want to do back at our styles,. What are we going to do, we'll do you. Text decoration. That is the underline. Let's get rid of that. Let's put it to none. Let's pick of a font. It's not font, it's just color by itself, fff. It's hash. Got to put this syntax in there. You can put capitals or lowercase. It's up to you. Getting there. Got a button. Needs a little bit of padding maybe. But let's leave that for the moment. What does that one look here? Yeah. We're getting there [inaudible] box. Looking good. One thing we'll do before we go is that it's stretching on forever. That's fine on the sizes of MacBook Pro. It's big enough. But if you've got a giant screen like my other one here or an iMac, really big screen, this is going to stretch off and your own menu is going to be all the way over there and your logo signal over there, and it's not going to be great. We're going to have some boundaries in terms of the marks width. How big we want it to get. What we're going to do is jump into our Dreamweaver, and what we're going to say is that I would like it not to get here. There's something called max width. What can you do it to? You can do it to our body, because remember our body is everything that's on the page. I want to say body that's around on the page, I'd like it to have a max width please and don't get any big than say 1024 pixels. That's the size that I had designed in Photoshop, 1024 is a common size. You got to say 1024 not 1,024. If you say 1,024, they're going to know you're newbie and you don't know what you're doing. So 1024. Or even bigger than that. You can make it any size. Let's have a look. When it's down here, it's stretching and doing cool things. But then it gets to a screen size, it doesn't get any bigger. See the colon of 1024 or say 1200, is another really cool one. I'm just going to leave one here. The one of the things though, did you notice that by default it left aligns. What we need to do is when you're aligning anything, you need to do something called margin-left auto and margin-right auto, so they call it. It will make the automatic left and right margins and it just sits in the middle there. Look at us. Cool. It gets to a more manageable size,and you my friend have started building the content. Now, a lot of the other stuff that we're going to do is just repetition of this. You're going to be lots of div tags, but container, style it, and you're going to have yourself a handsome little website. Let's go and do our boxes that are underneath here in the next video.
10. Adding our image grid: Okay. In this video, what we're going to do is, we're going to add these grids down the bottom here. Let's go and do that, lets turn to Dreamweaver. They're going to go inside these columns here. What we're going to do is inside this column, we're going to put an "Img", like we did before and then hit "Tab", and then we're going to click "Images", go to the "Images" folder. Now we don't have them in the folder yet, so we're going to hit "Browse". We're going to go to my "Desktop", find the downloaded exercise files and "Images". Here we're going to go "Thumbnail 1". Nice. Make sure whenever you put an image and put the "Alt" ticks remember, it's for the visually impaired, it's for people using screen readers and also for Google. I can't remember what this image is, "Love image", they're exciting. What we want to do is, let's check in the browser. Check the right one. There it is there. I've made mine a little bit bigger. Why? Because I just heard that they can resize when they get down to, can you see when they get down to mobile it actually gets quite big? When you're styling these ones, make sure you use, because we're going to use the same image through all three sizes and just make it responsive. So just make sure your image is big enough, for however big it's going to be. Next, what we might do is just duplicate that one. We are going to delete all these guys. Have my cursor, you can copy and paste it, that works. But a cool shortcut is, put your cursor anywhere in here go "Command D" or if you're on a PC, go "Control D". Just go "Control D, D, D, D ". We've got all our little guys. What we need to do is switch these out. Now, I can't just go and change the text here. Why? Because remember when we were in here, we were in "Browse" and actually copied it into my folder? I need to go and move them. Let's go check this out. Somewhere just top there is, this is the website. There's the images, and there's the guy that get copied. This is my folder of exercise files. Let me grab all of these guys. Come on in here guys, oops, I can't see you. I hate this about a Mac. They're in there somewhere. I need to go in the "Images" folder. Get in there. Great. There's all my images. Now I should be able to go into here, so in here it's going to be "thumbnail", actually, this one's thumbnail. Because I've just copied it in the background there, I might have to since it's not appearing, so I'm going to hit "Save" and there is a refresh, it's [inaudible] on both a Mac and a PC. [inaudible]. Getting there, we're getting there. Now, one thing you need to do is, I'm just copying these, just jamming them in there. You should change the old text for all of these, it's really important. Important enough that I'm not going to do it now, because I am just doing a tutorial. It's not my actual site. Got all you guys, let's check them in the Browser. They're all in. By default, they will stack on top of each other. What we need to do is get them to collapse next to each other, so they stack up. We're going to do that. Let's go to Dreamweaver and do that now. Okay, so to do it, we've got a class illegal column. But we're just going to say, if we flip all these cols to the left, and they will stick into each other. We did floats earlier on and we floated the navigation member to the right, it floats over this way. If you float to the left, they will keep stacking up next to each other, because by default, they stack underneath each other in line. Let's go into web styles.css somewhere at the top here. It doesn't really matter where it goes. I like to put these big things at the top. Now remember this is a class, so I forgot to put the dot, kill the braces, let's go float, and we're going to go left on your image, look. Okay, so they float. There's not enough room for them all to get in there, but they get mostly in there. So what we're going to do now is create another class, we're going to divide this into three parts. Let's go and do that. Now, this bit we're going to do now is working with something called the grid, that's the raw term of dealing with this positioning where we get them to stack one way in the desktop, and another way in tablet, and then again in mobile. We're dealing with this thing called a grid. What we're going to do to make this thing work is, we're going to create a class and we're going to call this one "col-lg", large. It's really typical to call desktop large, tablet medium, and you've got small, and then you can have extra small as well. We're going to use this guy. What we're going to say, it's going to be quite easy. We're going to say you have a width of, now we could do 33.3 percent and save. I think it's going to work. We've created it, but we haven't applied it. We've created this thing, now go over here, and we're going to apply it to this class. We've got one class called "col". We're going to apply the second class. You just put it in there. You stick them next to each other. That's how you apply more than one class. You don't have to write out class again, you can, but you just put them in-between these quotation marks with the space in between. Great. Now, I want to do it for all of them. There's a cool little trick that Dreamweaver does. If I click here and hold down the "Option" key on a Mac or "Alt" key on a PC, and click and drag, can you see I got a cursor, multiple cursors? There goes that. Hey, I love it, col-lg, okay, and let's apply them to all. Great. Now we're going to check it out. It's working. The columns are all the right width. But these images aren't being responsive. So by default, these images are being their exact size, the columns are the right widths, but the image is squared out over the edges. Let's go and fix the images so that they are 100 percent. To make our images responsive, we're going to go to our styles.css. I'm going to create a class where as long as it's in the global hitting. Where am I going to put it? I'll put it in with the columns that I've made. We're going to do another compound selectors. We're going to say, "Images that are inside my col-lg." I'm going to do this, and we're going to say, these guys are going to have a width of 100 percent. Great. What we need just to make things responsive is we need to add a height to it as well and just put it auto, and that'll save you some problems later on. Just automatically picked the height. The other thing that makes it useful is display block. Why? Just because. Responsive images make the width 100 percent make sense. Put the height in display though, in there. It'll make it work. Let's have a look in the browser, get in there. Nice. So the widths are right. Yeah, so the widths are 33.3 percent. They all stick next to each other, and the images are responding. What we need to do now, because you can see, as see 33 percent is great because it squiches down when it gets down to table. Next thing I want to do is actually, my Mockup has padding in between these. Let's add a little bit of padding to it. How I've done the padding in this case, instead of using this 33, there's not enough room for paddings. We need to put this down a little bit. So I've taken two percent off the overall size. What I'm going to do is I'm going to use it for here and I'm going to do some padding. We're going to put padding all the way around, and we're going to do one percent. We use that percent around here. Yeah, let's have a little look, there's one percent around it. Great. One percent either side, okay, left, right, up and down around these columns and the rest. I guess just to make my point here is if you leave it at 33, there's not enough room, so 33 plus the 1 percent in between, pushes this guy off. What we want to do is make sure there's enough room here. When you are doing yours, yours might be size four. You're going to be using 25 percent if you've got four across here. You're going to play with different percentages, whatever works for you. You're going to have to minus it. Whatever you've used for padding, minus it off the width stamp and yeah, do a bit of playing back and forth. Great. We've made a responsive grid. It looks good there. When we get down to tablet though, what I'd like you to do is I wanted to switch from this one here. This is our working version. When it gets sent tablet, I want to switch into these two columns here. The moment it does it, it stays like this. What we're going to do is we're going to create another class. We'll do it, but instead of putting it in the head here, we're going to create it so it only gets triggered when we're in tablet view. Anything in this media query only gets activated at the time and we're at max in within this width here. What we're going to do is we're going to create a new class called 'Col-md" for medium. This one here is going to be 25 percent. When I say 25 percent, what I mean is 50 percent. But we're going to have the slight problem. For some reason I just typed 50 by itself, so let's type in the full thing. This is going to be a width of 50 percent. But because we've got that padding applying, let's have a little look. It's not working. Why is it not working? Is because we created it here, we created this col-mid, but we haven't applied it to anything. I'm going to pretend like I did that on purpose, but I just totally forgot. Let's go here, we've got this thing called "Col-lg", but we also need one in here called "Col-medium". Remember our trick, click in here, hold down the option for "Alt" key, "Space" and let's type in "Col-md". Okay, so we've created it, we've made it. Let's go check it, and it doesn't work. Remember 50 percent, but because we've got padding in there, we need to be a little smaller. This is where you can go in and play around with, I know it's 48 because I've already done it. Great. So it fits in there. What's this? So at desktop it's three across. When it gets down to here, it's two across. Now the last one we need to do is when we get into mobile, I'd like it to be 100 percent across. Let's go do that now. We going to do two things, our Mockup has the mobile view, they're all 100 percent across. We're going to slide down here, we're going to create a class called "Col-small". This one's going to be a width of our window, we're going to be a width of 100 percent. Syntax is getting a bit way-ward. Okay, let's go apply it. Here's our cool trick. Okay, We're going to be "Col-small". Great. Let's check in the browser, and it's going to be a little bit broken. Well it's not broken, but I want to get rid of this padding in-between. My Mockup just has them all butting up next to each other. So what we're going to do is, in here, let's go to our styles, and up the top here we said col have a padding of one percent. What we're going to do in here is we're going to say, that same class, we're going to say you, col have a padding of zero. Pixels or percent, it doesn't matter, 00. Great. They are all butting up next to each other. Awesome. Look at us. You can start to see we're making responsive stuff. When you look at somebody else' CSEs and you look at this for the first time, you're like, "Wow, okay. That's pretty complicated." You go into here. That's not too bad, especially with the tabs and all the returns. There's lots going on in here. But you can start to see if you start chipping away at this thing one little class at a time, it's actually, I think quite simple. Great. What else do we need to do? The last thing I think is just a background color. I don't know. It's not a big deal, I guess. We're going to do it to the body, let's do the background color. Let's go "Background Color". I'm just going to pick a light gray because that's what was in my Mockup. "D, d, d", "Save". Okay, so background color, you can see it's just a slight gray in there. Cool. All right. Well done. Us, and me and you, we made a website. The big thing is this navigation here, it responds. Once we learn that kind of responsive stuff without media queries, it actually became quite easy to do these. There's our tablet view, down to desktop, a lovely nav-sandwich, and we've got our little images going. Bravo. Little things that I would do to touch this up, you can see on mobile hits, the padding's probably a little bit big for this one. So what you do is you find the class that does your hero box. He's at the top here somewhere, there's something called hero.You make another class and you just change the padding and override it and make it smaller. You go and finesse all of these things, maybe the fonts as well. It's a bit because it breaks on to two lines. So you just get your H1, make another H1 down here in mobile view and override the font size. Lots of those little tweaks is weird. I guess you as a graphic designer really shines. All those little finessing in terms of the spacing after and the space between lines, and all the font sizes and things. Cool. All right, no more fooling. Let's go onto the next video.
11. Publishing your website to the internet: Great, so we've created a site, now we want to get it online. You need a host and a domain name. You'd only buy those together, I've got a whole course on buying domain names and hosting. Was going to do the quick version here to get you going. Login to your account. I'm going to use GoDaddy, it's the world's biggest, most popular hosting. If you've got something else, it's not far off there's be slight quarks. What we're going to do is, I'm going to log into my account. What I want to do is get a web hosting. We've already bought our web hosting and paid for a domain name. We've got the basic hosting. Going to merge it. Wait for it to load. You're looking for this thing called FTP accounts. So file transfer protocols that's how you upload your website to your hosting servers. You create one, you put in here, you're going to call this one testing. You give it your name, but it doesn't really matter. It doesn't have to be an e-mail address it looks like it but no. Make up anything in here. Give it a password, make sure it's a really good one, not like my one here, really simple one. I'm going to go and delete this account just in case, right after this. The big thing when using GoDaddy is that, can you see it, put in our username here. It's going to make a sub folder, not what I want. It needs to go into public_html. That's traditionally where things go. If you're using somebody else hosting, they'll tell you that sometimes it has htdocs and some names and public. Nearly always it has public_html, it's like the root of everything that goes into. Click create account. The only thing we need to know now is, well, we need to remember our username and password. Let's jump into Dreamweaver, let's open up our Site and go to Manage Sites. Here's Dan's Portfolio. We made this right at the beginning. That's the one that we and here remember we did the local folder on our hard drive and we told it where the images went. Now, what we're going to do is go to this one called Servers and then hit "Plus" and then here, we're going to call it GoDaddy. It doesn't really matter what you call it, in here FTP address. If you're not using GoDaddy this can be different, bringyourownlaptop.com. Sometimes, it doesn't need the FTP for some hosts, in this case it does. The username was testing@bringyourownlaptop. Again sometimes, some hosting just need the username, they don't need all this junk. Password, put that in. Now you are going to hit "Test" and you're going to cross your fingers. Connected successfully. Now that work for me because I know what I'm doing. Hosting is by far the hardest bit to get set up. Don't be afraid if it's still not working you've tested it, you've tried without the FTP, without this username. Other things you can try is don't hit the root directory, sometimes you need to put in a public_html\. Down here sometimes, under a More Options, you need to turn off passive FTP. There's a few little things you can play around with, but my advice is, don't stress too far or too long, just e-mail the hosting company, send them the screenshot of this here and say this is the details I need, what is it? After, they'll send you the details and you just put them in. Now what you do is hit "Save", hit "Done". Great. Click "OK". Great. Now what you do is, you go up to Site, so it's connected now, but nothing's really happened. You've got this thing called the Local, and you've got this other one now called Remote. That's what we want, Local is on our machine, Remote is GoDaddy, it's the hosting service. We go to Site and we got to Put and you hit "Put". It's going to go through and connect. Then, it's going to ask you, would you like to put up the dependent folders and you click "Yes". It's going to put the html up, but then it needs to put the CSS up, this other CSS and JavaScript. It goes through and puts up all the images. I'm going to hit "Cancel" in this case. Why? Because at the moment I'd upload this weird, not weird but this portfolio over top of my web cycle bringyourownlaptop.com. I don't want to do that but what you do is, that it run through then you'd go to bringyourownlaptop.com or your URL and your portfolio should be there. If it doesn't, strike me a line in the comments and I'll give you a hand. Definitely connecting the server up is the hardest bit for anybody because even it's still hard for me. I don't want to get a new host or someone using a client's new host and I have to work out all the different settings. That's how to connect a site using GoDaddy. That'll be it for this video.
12. Lasts things now that you’re a coder: All right, so to wrap up, the last things you need to do, I guess to complete a website is to create other pages. Let me just quickly, briefly go into it, because it is literally we would just create another page like we did this one. Let's say we're going to start with the basis of our homepage. There's our index to our HTML. I'm just going to start with that, so we're going to duplicate it, get it duplicate. There's one cool copy, so I don't want to call it and I rename it, edit, rename and I'll call this one "My_contact_me page." Great, there are no spaces, just use hyphens or underscores. So we've got this, double click it to open up, my index page, my homepage and now this contact_us page. What we're going to do in this one as you go through and start changing it depending on your design from say, Photoshop. So I'm going to change this to maybe contact_me. I'm going to get rid of that and you start styling this page. Let's have a look at it in the browser. There it is, so you can see this is my contact me page. I'll go over the top page. I've still got my homepage. If I switch back to this one and but here there it is, this is my homepage and my contact_us page looks very similar. I guess through now, I decide how many columns I want, what's going to go in those columns and takes a type, probably a form in this one. Now to connect the two, let's go to index, and I want to connect them up because remember we used hashes before. So up here we've used hash. So what I'm going to do is delete the hash and I'm going to call it from contact. You can see pre-fill it in, nice. So my menu now when I click on contact_me should jump out to plus one to prevent a browser. So homepage, I click on "Contact_me." It goes to my contact_me page. That's it then go off and build yourself some pages and connect them up this one. Now the other things you can do is I've got a bunch of other courses, add this one for Photoshop. We just had a mock-up at the beginning there. There is a Photoshop for web design and course that I've got. There's also a larger course, this one here is I guess a short one. It's a few videos here for Responsive Web Design. I've got a long one that's about 50 videos and it's to do with something called Bootstrap, it's in Dream weaver and it's a next step after this. We have some of the same features, but it's a lot more detail. You can get into that one. There is a UX course, becoming a UX designer. This things about domain names, other things you can do if you are a trainer and you're going off to teach this one here, I've got Teacher Resources, you have a look on the side here to be a link for the Teacher Resources and there's notes that you can get your hands on and you can use these exercise falls to teach from. What else? Poster projects. So you might have followed it along but switched out the images to yours, I'd love to see it. You've picked a different font, I'd love to see it. I do, I really like to see this stuff. So links or screenshots, anything you can, stick in the comments. There's lots of different ways on the different slides to show me what you've done, I'd love to see them. Also give it a review, if you've enjoyed it, you've liked my teaching style or if you haven't. Work a comment in there and give it a review and so I can make it better. What else? The last thing is about getting paid, and I've got a whole video series on that as well. About how to run a brief, how to make sure you get paid on time, what costs you should charge? Again, there's a full course on that, go check it out on my other courses. Okay my friends, we have come a long way. We have built our portfolio site, we've led one media queries where, we've done cool responsive navigation. Now it's time for you to go off and build your own site. Hide it out good people and I will see you again in another video series.
13. Dreamweaver Cheat Sheet: Hello lovely people. In this tutorial, we're going to look at our cheat sheet. This thing here is the video version, there's going to be a PDF, there'll be a link on the screen just here, all of the downloadable printable PDF, so watch it, print off the PDF, and stick it next to your desk and become more awesome in Dreamweaver. So first of all, we are looking at something called QuickEdit, I love QuickEdit. It's new for 2017 Dreamweaver, so if you're using an earlier version, it's not going to work. Now, QuickEdit is a way of editing the CSS really quickly. In this case, I have got this button and it's far too close to this p tag, it's being annoying me this whole tutorial series. So I want to push that down, so there's a p tag here. So let's jump into Dreamweaver. Dreamweaver, here's my header, actually whereas it? So header, there's my main content and there's the p tag, the offending p tag, and there's the button underneath, so there's the Let's Talk button, there's the p tag and it's got a class called heading-body. I'll replicate, I can go to QuickEdit or I can use command either shortcut, even shorter shortcut. The coding is bad ass, as you can see, it's like a little wormhole, goes through and finds my style.CSS. It's noses at line 75, and this is my heading-body-copy, found it. I'm going to put in padding-bottom, and we're going to put in 20 pixels. I'm going to close that little wormhole up. Just checking the browser, some distance between the two. Why it's good? It's just a different from going into styles and trying to figure out which style its is. There is there, but if it's a long CSS, go via Facebook. Could be too powerful. Quicken it. The next one we're going to look at is something called Emmet. If you've done the videos tutorials, we've done a little bit. Just recap, say I want to add a div tag, and I want to add a class to this div tag. So I want a div tag and I want to add a class called column. Or a class called awesome. I want there to be how many of them? I would like there be six of them, please. If I hit, don't put Return, hit Tab. Look at that. The classes, six of them with the class name of awesome. Let's say we need something else, let's say we need an unordered list with a bunch of list items. So we go ul and we go li, and we'll say we want 20 of them because that would take a long time. Hit Tab, look at that unordered list, with 20 of them. Gets even better if I want to have say a class applied to them of dans-bullets. Then go here, hit Tab. Look at me with Emmet. There's a bunch of other things that Emmet can do. Loads and loads and loads. Go check it, Emmet, it's E-M-M-E-T. There's a website and all stuff and you can go through and figure out what it does. Couple of other quick ones is img, Tab, which gives you image and the source and it's all tag. Another one that I know and can remember is link, Tab, gives you the stylesheet link, all with the right syntax, and it's quick. Thank you. Tip Number 3 is going to be multi cursor. We've added a class to this group of divs that I've got randomly in here but let's say I need to add another class. Say I want to add a class to all of them, can be tough, so I can put multiple cursors. So what I can do is hold down the Alt key or the Option key on the Mac and I can drag across all through these. Look, all the cursors. I can put another class and this might be my I can move any classes, I've got a bold class. You can just have the classes going. Now, we've done the Emmet tutorial series. But let's say we want to do it in random places. That's great when they're all, because you can Alt drag across, but let's say I need one there that also I need to edit here as well. Alt doesn't work. You need to Alt drag it. What you can do is start here, hold down Command, I want to put one in there and I want to put one there, so many classes in all these places. Can you see my cursors? One there, one there, one there, all flashing. I can say other class, I don't know what this class is called but awesome. So multi cursors but even better when they're not just in one place, you can have them all over the shop. That is the multi-cursor awesome cheat sheet show time. This could be my favorite. This is Number 4. This is something called Apply Source Formatting and it just cleans up your code. It does nothing to it, just aligns it and tabs it out, makes it look pretty. I was working with this, I downloaded it from slicknav.CSS. Is awesome, but I am very visual. So I need everything to line up and tab out and you can see there's a class there and my natural instinct is just move it down and make sure he's away from that, not sure why but I feel like this needs to be down there and it could have races. So what we'll do is, I'm going to go over here and is one called Format Source Code, click on that one and go Apply Source Formatting. You do it to a selection, you can do it to the whole thing and watch this transform into, look at that, so pretty. I do this with all of my stuff, I'm picking on this CSS here because it's not mine, but my stuff ends up looking just as bad. Well, not bad but mine is ends up looking a lot worse and just tidy everything up, make it look nice. I'm just like I'm visually see everything nicely. If you're on early versions, there's an option over here in 2017. If you go join me with earlier versions, there is under Edit so the Code and there's one says Apply Source Formatting. That is Apply Source Formatting and that's Number 4. Number 5 in this lovely list of cheat sheets is something called Code Folding. See these little arrows here, it means that I can fold up whole of my body and all of my head. Why it's useful is just tidy things up, its does particularly stressful looking a bit of HTML and returns in separate things out. I want to fold up the heading and my main, just keeps everything together. I find it probably the most useful, say that I've got a chunk that I need to delete instead of trying to, especially when it's off-page. I hate that when it's a really long tag and it starts here and ends somewhere way off screen. Let's fake it here, is way down there. So Main and I want to try and select it, and I want to try and figure out where the end is, and I'm trying to find it. So what you can do is just, toggle that up and what I do is grab all of that and then delete it. That's a nice way of grabbing all of that stuff. When it's toggle up its not gone, toggle back out, code folding people, I love it. Next on our cheat sheet list is just duplicating. Just a nice and really easy shortcut in Dreamweaver. Say that I need another one of these buttons, there's one here, but if I need another one I could. Select the row, copy it, cut it in and paste it out, get the tabs right. I find that it's the biggest problem, but it all making it look pretty. What I can do is, I undoing. Instead of doing all that drama, watch this, cursor flashing Command D. If you're on a PC, it's Control D, but on a Mac, it's Command D and watch. Unless there is duplicating, we've a tag it's in, it will reach out and duplicate it. That is number six. The next in the super fantabulous a cheat sheet for Dreamweaver works good for any numbers. Obviously, we're going to work a little bit in CSS for the properties. Let's say the line spacing between this H1 here, my H1, there's my line height. If I have my cursor flashing inside any of the digits and I hold down Command and Alt, if you're on a PC, it's Control and Alt. On a Mac it's actually Command and Option and just use your up and down cursors, so your arrow keys. Watch this, I go up, and there goes 80, goes down, there's a 70. Down, down, down. You can see with the combination of this real-time browser thing here, which is down the bottom to the right and it's a real-time browser, new in Dreamweaver 2017. It adjusts exactly the exact same time. So any of these fields, anything you find, font-size here, go up and go up and go down. That lovely people has adjust any of the numbers by holding down Command option or Control option, and use your arrow keys. The next cheat sheet, awesomeness in our lovely list is number seven. It is not, it's number eight and it is a way to wrap a tag that exists. So say you've got these tags that are sitting in here, but I don't want them to be inside my footer. I haven't written the footer tag and I could go and write the footer up here and K for the closing and type it in down here, and that will work, but it's a little long. So what I want to do is grab all of these guys. So I'm going to say you and all of you, and I'm going to hit Command T on my Mac or Control T on a PC and you can see there, wrap tag. How good is this? I'm going to wrap it. Hit Return. You have to hit Return twice. Cannot show why. You can seen there, there is my wrap tag. So grab anything, select Command T and it's going to wrap it up. That's number eight. So let's move on to number nine and it's selecting the parent tag. So let's say I'm deep inside some layers. This thing that I'm using as exercise, well is not great. It's not particularly confusing, but let's say it's a really bit confusing. There's lots of children inside these parents. So what you can do is I want to select the, I'm not too sure who the wrap a tag is or the parent tag is. So anywhere inside here, hold down Command or Control on a PC and use your square brackets. I'm going to use the left side one, the open and you can see it grabs the hole tag and go again, grabs the parent, go again, grab some column, go again. You can see, lovely way of grabbing the parent, the guy around the outside. It's really great especially when this parent spans more than one page. You can't quite see what the ending is, so you can select it. So that is Command and use open square bracket and that's the way to select the parent tag. Nice. Number 10 is a variation on number nine, selecting the parent tags. We're going to use this tag selector in the bottom. People ignore this thing down here and it is awesome. So if I'm inside of here and it's really helpful when using compound selectors and you are not too sure what to put. So let's say I want to, you got navigation up here, put it inside. You can see this my A tag. This is my tag selected on the bottom here. That's my A tag and it's inside my list item, which is inside my menu, which has got, sorry, my UL, which it's got an ID of menu which is inside the header, which is inside the body, just gives me an idea of where I'm at in the world came. So say I want to cut the UL, watch that, clicks the whole UL. Grab the header. It's a way of selecting and using this parent, using this tag selected on the bottom to known where you are in the world. I love it. All right, let's do the next one. The last on this amazing list of cheat sheets stuff, we're going to look at snippets. So I am here. I am looking at the snippets panel. I'm in my CSS here. So we're going to start with CSS snippets. There's lots in here. We're going to start with the big guys. So let's say I need a footer and I need it to be fixed to the bottom so it doesn't move, so it's always there at the bottom. I could go figure it out or watch this, fix footer, double click. Look at that. It's all the coding to fix the footer to the bottom. Nice. Another one might be, you're starting a new project and you need to put some zero in code and just to clean everything up. It's really handy to do. CSS snippets, there's two in here. There's HTML style reset, watch this. This thing I do. That is a nice, impressive style reset. Everything's going to look the same on different browsers. Happy days. I'm going to look at that one. There's another one here called Eric Meyer's one. Which do I like better? I think I like Eric's one, it's nice and simple. Just clears everything out petting as there are happy days gets that a build a website, snippets gets even better. Watch this. If I go into HTML snippets, look in here. Let's find some HTML. I need to add now a Nav bar. I'm going into something, Create an Nav bar. There it is there. We've got a Nav bar, title the class to it, set the leagues guy is into it. The list items are all linked ready to go. There classes. I can duplicate them. Snippets, awesome. Next, little bit is let's do meta tags. I need to add them. Can you remember what they all are? I get in trouble when I don't add them. Hear I go, and I find them over here and it is general meta tag. That one or versus that one, not all verses meta tags for SEO. I need probably a couple of those, but yes the name in there, the syntax right, I don't have to go and try to remember what they are, snippets. The last one, and this one comes with a double banger. It's the last one, the finale of the cheat sheets. It is this lovely one here. Imagine, so I've got a P tag, says P and I want to put some Lorem Ipsum into it, I'll go to that Lipsum.com and there's the coffee cup on there, and you go and copy it out, but it's got junk attached to it. You got to clean it. But watch this. Add Lorem Ipsum, oh my goodness. Lorem Ipsum, built into there and I said this was the double bang for the finale. So Lorem Ipsum is awesome, but imagine you doing that quite a bit. Imagine if there was a shortcut you can make. You can. You can see in here this one says Lipsum. I'm going to get rid of this one and just put it in Lor and you can see underneath trigger here, I can make up anything I like. mailto another good one. So just Lor. Now, I'm in here, I've got my P tag and I want to put in L-O-R and hit tab. I'm making my own in it stuff. How good is that. mailto is another one. Tab it out. Who can remember how mailto goes? I gets it most of the time and I gets it write. But all the time I got to go check, is it colon, how does it a work? Snippets, they are in there, they work and that my friend is the end of your lovely cheat sheet. Now remember, if you're just watching this course, this is the end of a longer course. It was 12 videos of making your own responsive websites. Go check that out. Otherwise, there is a PDF you can download. The link will be on the screen again here again, and go fourth. Be quick, be awesome in Dreamweaver. Thank you very much.
Daniel Scott, Adobe Certified Trainer
