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.

So, 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 obviously, the images, and the logo. You're probably not going to use a picture of me, find your own picture of your lovely self, standing next to a pole. It's really kind of easy site to get built 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 adapts for tablet screens, mobile screens, and obviously the desktop here.

So the desktop here has some padding on the sides, and there's an image created at the bottom here of 3x3, and what we want to do is, take a look at when I re-size it, it makes it become 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, on the top right is adjusting.

Now, when it gets down to the tablet, watch this. Okay, can you see the change there? That's for my desktop view, kind of switched down, and then it switches to tablet. Now, the big changes here are, probably the most obvious one is down here, is that it stops stacking 3x3, and it's 2x2. They all kind of stack on top of eachother here.

The other thing is, to get this navigation menu here, it's stacked on top of each other, and tablet versus desktop. It's got a bit more room, so it's spread out this way.  Now, when I get down even further to mobile, 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. 

Okay, so what's going to be a big thing for us to get started with, is to switch this to here. Can we use a little bit of Java script? And down the bottom here, the changes are these images stacked on top of each other now, one by one. And what I've also done is, can you see this, only four here, one, two, three, four. I've turned off a couple of them, just so it's not a really long page. Just that we can turn things on, and off, for the different screens, and 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, where you can go and check out the live site. It will always be there, live. Help you while you're building, to go and check my version, to see how yours compare, because you 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, you can kind of just check my version of that, right at that time that you're at, just to see, and just to compare yours with mine, just to see where you might have gone wrong. 

So, that's the final version. What we'll be building from, and how you'll typically work, is you'll work from a Photoshop comp. So this is what we'll be using as a reference. So, we'll go back to this Photoshop mock-up, just to check it out. Now, if you want to build your own mock-up on Photoshop before you start designing in Dreamweaver, it's rarely common to do this. It's really hard to be creative in Dreamwevaver. You're really just building the website based on a mock-up you've done somewhere, and that's traditionally done in something like Photoshop. If you want to get more into kind of 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'll also be a link somewhere on this page, so you can go and download the exercise files. It will include all the images we need, all the finished files, all the production files, and this PST. So you can have an open-end work forum to see if 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 CSS, or the images that we use in this course, you need the Java script that we use, you need 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, and the other thing you can do if you're a teacher, or a trainer, and you want to listen to 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 will do, is it will 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 other thing is, I'd love you to post your projects, so you'll adjust it for your own thing. Even if it's not finished, 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 those page, that'd be awesome. 

Another thing is that, once you get to a point whilst in this course, you're thinking this is a very good course, or this is a very terrible course. Ideal to jump out, and give me a review. Reviews at any stage are really helpful for me to develop my course, and a lot of platforms. It's the way I rank well, and I trend, 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 a review when you're ready.

And the last thing I've done is created a cheat sheet for you, so there's a PDF you can download, and print off, and stick it next to your computer, with all the kind of handy tips, and tricks, and things, while you're building a website in Dreamweaver.

There will also be a video version of that teaching towards the end of this course, or there'll be a link on the page here.

Okay, so 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.