Setting Up Our New Project
Hi everyone. This video is going to have two parts. We'll talk about the things that we're going to actually do in this kind of next section of the course. And also we'll get that kind of course stuff set up like the remote folder and connecting the CSS that type of stuff. And so we'll do it first. We'll tidy everything up and get ready and then we'll go through everything we're going to do. And so at the moment I'm on my explorer here. Okay. And we are currently using the local folder called Project one. I do not want to put a second website in here because we don't want to index files because we can't so we're going to go to file and we're going to go to open. It depends on how you like to do this. Okay. I'm going to go to my desktop. I'm gonna make a new folder. Go to the project two exciting, click open. Nothing really happens. I've got an empty kind of folder back to the welcome screen outline. I'm going to close down by clicking on it and I'm going to create an index file and sty...
les and connect them both up. So file, new file. This one is going to be saved and it's going into the right place. Nice. Index dot html or spelt right? All has to be lower case. Let's create a 2nd file. This one is going to be saved. It's going to be called style style dot CSS or main or styles will connect the two of them up. Actually, let's just move them across by grabbing the tab, everything nice and looking pretty before we get started and it's connected to so remember exclamation mark, hit return. Put it all in there underneath this. Okay. It doesn't have to be underneath this. I don't know why. I feel like the title needs to be down below but it doesn't have to be Okay. There are some order issues. Okay later on. But the moment it doesn't really matter what styles are, as long as it's before the closing of the head. So we're going to do link and we'll do a linking of CSS and it's pick style. Remember just guessed it. But that's what we got. And is that it? I think that is it? I like toiling up open editors because I find that confusing. That's me. Now let's talk about the things we're going to cover in this course. So let's have this up. This is the design I did in adobe XD if you if you like, what is this program? XD. It's a different bit of software and it's just the design. Okay. It's not coding. It's not an actual website. It's just like a mock up. It's a really good program. I've got a course on it. If you want to go check it out. Okay, look for my XD course, but what are we going to cover in this one? We are going to do things like gradients in the background, there's a slight one there, we're gonna build these kind of cards. Okay, where we've got, we're gonna look at icons, we're going to look at creating those little modules that probably the biggest thing we're going to cover in this course is something called flex box. Okay. We've been styling gives at the moment and kind of moving them around, we're going to have to kind of do some cool stuff where they all stacked next to each other and bits on the left and bits on the right and the last project to keep it quite simple so we can stage the stuff out. So I'm gonna look through my list here, we're gonna start off with a CSS reset. What else we're gonna do? We're gonna look at commenting in the code. We kind of looked at that already minimum height flex box is the big one. We're gonna do fonts because at the moment we've just got that area, we're gonna do fancy google fonts and we're gonna look at different font sizing things like Eames and rims, we look at images properly, how to create them. The differences between jpeg and PNG s. We'll make these buttons instead of just text. There's one there, we'll add some drop shadows there's a drop shadow on this fella here, there, he is rounded corners. Another couple of big ones is we'll do a drop down menu. So when you book online that will drop down and we'll actually have a proper navigation and we'll look at creating a form rather than just that really simple mail to We did in the last one. And that's gonna be it for this project. Let's to cover Project three. Remember is going to be a responsive website, so at the moment this one's not going to adjust for mobile, we'll get into that in the third project, and the fourth is going to be bootstrap. Alright, ready? Said, go on this new project. I'll see you in the next video.