Hey there. In this video we're gonna 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 a creative, um, I'm happy for you  to use this exact same layout for yourself to switch out,  obviously the images and the logo,  and you're probably not gonna use a picture of me. Um, find your own picture  of your lovely self standing next to a pole. Um, and yeah, so it's a, it's a really just kind of easy  site to get 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 it adapts for tablet screens,  mobile screens, and obviously the desktop here. So, desktop here has some padding on the sides. Um, and there's an image grid in the bottom here  of three by three. Okay. What we want to do is take a look at when I resize it,  so I really resize it and it make 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. And the top right is adjusting. Now, when it gets down to tablet, watch this. Okay? Can you see the change there between there? That's still my desktop view, kind of squished 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 three  by three and it's two by two. They all kinda stack on top of each unit here. The other thing is check out this navigation menu here. It's stacked on top of each other and tablet,  but when it's a desktop, it's got a bit more room. So it's, you know, spread out this way. Now, when I get down even further to mobile,  check 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 stripe lines. I love those descriptions of this little icon here. Okay, so that's gonna be a big thing for us to get started  with, is to switch this to here. Okay, we're gonna use a little bit JavaScript. And down the bottom here, the changes are these images  stack on top of each other. Now one by one.

And what I've also done is,  can you see there's only four here? 1, 2, 3, 4. 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  so you get a sense of how it works. Now, that's the final thing there. We're gonna be building that together. What I'll do is there'll be a link up on the screen  here now, Bing.

Okay? Where you can go and check out the live site. It'll always be there and live,  and it'll just help you while you are building to go  and check my version to see how yours compare. 'cause you, yours might not be working as you, uh, you know,  as you thought, and you can go off and check my version. Um, 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 'em up to,  and it just means that, um, if you're working along  and you get a little bit lost, um, you can kind  of just check my version of it right at that time  that you're at, just to see,  and just to compare yours with mine, just to see,  uh, 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  mockup just to check it out. Now, if you want to build your own mockup 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 mockup you've done somewhere.

And it's traditionally done in something like Photoshop. If you want to get more into kind of designing  and Photoshop, I've got a whole other course for that. So go check that one. It's designing, um,  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'll include 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,  so the exercise files, which are going to be the htm, LCSS,  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, uh,  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.

Um, 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, okay? And what that'll do is it'll take you to a page  where you can, 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 through the class. The other thing is I'd love for you to post your projects. Okay?

So you, 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  and 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 review reviews at any  stage are really helpful for me to develop my course.

And on a lot of platforms, it's the,  it's the way I rank well and they trend. And I'd love a review. 'cause the better this course does, the more students I get  and the better I get paid for my efforts. So, jump out, gimme 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 next to your computer with all the kind  of handy tips and tricks  and things while you're building a website in Dreamweaver.

There'll also be a video version of  that cheat sheet 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.