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.