How to create an index html & style css

All right, we're on to Project no. 1. So Project 0 is finished, that was our like, getting used to things and just learning the basics. Now we're going to actually start making some stuff. So we're going to build our structure, that’s our Project 1 structure. I've written it at the top there. We're going to make some basic kind of Div tag structure to it. Then we'll add some details to it. These are my Wireframes. We'll add a logo, some headings, some buttons, maps, and some cool stuff. Eventually, hopefully it'll look like this, this will be our final, kind of looking thing. I know exactly, it will look exactly like that, because I already made it. But first of all, in this video we need to work out, how to create an index.html page, and how to connect our CSS together. We'll also show you how to kind of separate the documents, like this, side by side. All right, you're ready? 

Project 1 about to begin. So it's time for our new site. So let's clean things up and get our new site started. So let's close down everything in VS codes, with nothing open. And we've been working in a folder called Project 0, we're upto Project1. 0 was like our throw away projects. So those are things that we just used to test, understand what a few of the basic things we've had to learn so far. So what we need to do is create a new local folder. We call it the Local folder, because it's on your computer, not on the internet. So it's local, local to you at least. 

So we need to create a new folder and create our html. And CSS, give them names and link them together. So first up let's go to 'File', and we're going to create a new folder. Now it doesn't matter if you-- if you find it a little bit difficult to go-- because we're to go to open a folder, then create a new folder, it's kind of weird. You can do it through your operating system. So if you're on Windows it's different, but on a Mac it's in Finder. Go to your 'Desktop', and in here I can right click and say 'New Folder'. It doesn't really matter how you get this new folder, but we need a Project1. If you're on a PC it's very similar. 
Open up your 'My Documents', find your 'Desktop', right-click, make a new folder. So either way we want to have a new folder, I'm going to open it, and on my desktop there's my new folder, Project1, click 'Open'. Nothing really happens, just kind of flashes and you get the Welcome screen back again. I remember, when I first started using VS code, and I was like, "Man, it's confusing." So get rid of that. Let's make a new document. 'File', 'New File', we're going to create two of them. We'll create our html, so 'File', 'Save'. Now this html document, we've given it random names so far, like divtags.html, or helloworld.html 

Now for a website you need at least one page, you need your Home page to be called this exact thing. So it needs to be called index.html. If you called it homepage.html, put it up on the internet, the browser would go to your site, dansawesomewebsite.com, and go looking for Index, and couldn't find it, and will load up a big error on your page. So you need at least one page called index.html. Use lower case rather than upper case. No spaces, has to be exactly that. And the browser goes and looks for this page as its initial first page. So call it Index, click it, save it. Let's add some basic html. 

All of our metadata, so remember, exclamation mark, '!', 'Return'. Let's give it a title, this one here is called the, 'Adare Restaurants'. I can't spell restaurant, is that close? There's no spell check in here. And I'm cheating as well, looking at my notes, like I've written it in there. I don't even know if that's spelt right, anyway. So Adare Restaurant is going to be my title. And we need to create and connect a CSS sheet. So let's do that by going to 'File', 'New'. Let's go to 'File', 'Save'. 

We can give it any name we like. I was thinking about it before, in between videos, it was like, there was Style, what is-- I used to call it Main all the time, main.css. It doesn't matter what you call it. The only problem is, if you call it Style, and you're a Web Developer or Designer, and you're making like loads of websites, you're going to have lots of common files on your desktop called Style. So it makes it a little bit hard to find them when you want, but not that hard. Let's just call it 'Style'. 

Remember, .css,if you forget like I do all the time, hit 'Style', doesn't work, but over here you can right click it, rename it, just put a .css afterwards, so it knows. Now we're going to connect the two, so back to html, and just under here, under Title, we're going to put 'Link'. I'm going to click on 'css', and it gets the right name, because I gave it the right name. I'm going to hit 'Save', and that should work; let's test it works. Let's just put, in the Body here, let's put in an 'h1'. Now I'm going to show you a slightly different way of working. We're going to add shortcuts as we go around. If you're like, "Man, I'm not ready for shortcuts", just type in the long way, angle brackets, h1, close, '<h1>. It already does a little shortcut there, but I'll show you a shorter, shorter shortcut. 
So I'm just going to type 'h1' and hit 'Return'. You can see there, don't even have to put the angle brackets at the front. So I'm going to do that probably for the rest of the course, only because I do it out of habit, and you might be wondering why, but anyway. Let's call this one "Do I Work?" 'Save', let's go to our Styles, let's add a Style for h1. h1, curly braces, we'll make it just change the color, is it not columns. 'Color', and we're going to give this one Brown. Let's get our semicolon in, we're going to save it. And let's go test it in a browser. 

So that's our old page that we're working on. I'm going to go to 'Open File'. Let's go and find it. So we're looking not for Project0 now, go to my 'Desktop', 'Project1'. And there's my index.html. Hey, there's my h1, and he's brown. 
Now a couple of other things I want to show you in VS code, is this thing, the Explorer. It's cool once you use it for a while, but at the beginning you're like, "It's a little bit confusing," so there's two sections to it, right? I'm going to have these little chevrons here to kind of tidy it all up. So open editors, I never have open, just shows me, what it means, open editors, that's an editor, that's an editor. It's showing me I've got these two documents open. I don't find that useful because I can see there. Project though, it's really helpful. That will be the name of your website. 

So we've called it Project1, but if you're working on this website, you might call it Adare website, and that will be the name there. And in here is all the different pages you have. So in here if you end up in Project1, creating a bunch of other pages, let's say we call this one 'Contact Us', and we make a bunch of other pages, let's make one more, just kind of cheating, right? You'll notice that, can you see in here, it's adding it to that project. It's going, "Okay, I've looked in that folder, and I'm seeing everything in there." And Open it, it is, it's just showing me the two that I have open. 

Not sure if that's useful for you, I found it quite difficult, getting made around that weird little Explorer there. Open these guys, they're not anything, you see it updates. So instead of going 'File', 'Open', you can just double click these and we'll open them up, if they're not already open, look at that. 
The other thing I want to do is, I've got Index and Style, and I'll toggle between the two. You'd spend forever toggling between the two. I'm going to show you a little trick. Not too many tricks earlier on, we're going to get trickier as we go, but this one is just, it's good for teaching, and handy for what we're doing. If you click and hold the tab at the top. So I'm going to grab the word 'Style', hold it, hold it, hold it, so dragging it around, you can see these boxes appears, it's a bit weird, and I'm like, "Is it that one, is it that one?" Move it around vaguely over here. Not too high, not too low, about there. 

You can kind of see it's taking up half. It's got about like, that gray, it's kind of half of it, there we go. So the cool thing about it now is I can see my Index and my Style, and I don't have to toggle between the two. So I can go over here and say, actually I'm going to change this. I'm going to add an h1, h2. h2, tab, what about this? And over here, you can see, look, I don't have to leave or toggle between two tabs, and I'll make this one a color of red. Now, in a browser, 'Refresh'. It's not working at all. Why is it not working? You've noticed, you're like, "A-ha," I can't see it. Red, do I work? 'Save', I didn't do 'Save All', there you go.

 Now I said before, I ran into problems. 'File' 'Save All ', because I saved this side, but not this side. Ah, I'll pretend like I did that on purpose, but I didn't. So that's a nice little helper thing to work through. If you want to get rid of that you can click on this little icon here. You cannot, just splits it again. 'Close', 'Close All'. 'Close Saved'. I don't know what button to click there. You can drag it to be down here as well; where is it? There you go, so it can be underneath. 
All right, last the little thing I want to show you is that, you spend your life going from html, putting stuff in, then styling in the CSS. So a nice way to kind of just split these up is you can be on any of these, and click on this little icon in the far right here, give it a click. And it will separate them up. Does a weird thing. I find that button, although it looks amazing, I find the easier way to do it is actually just drag it. So, I got these two. So style.css, if you click, hold, and drag the name there, just drag it over here, you can kind of see it makes this big gray box that appears, and it's a little bit random in terms of where it ends up, but what we're looking for is vaguely in the top right here, because we want that half. 

You can see, so html on that side, CSS down on that side. You can close it down if you don't like that. I'll save it. Open it up so it's two separate tabs, but I'm going to drag it. You can have it down here as well, depending on your laptop. I find my screen works really well for-- oh, just mixed them up. You can-- man I find that hard. You can put html above CSS. I never do it that way, always have it over here. There we go, side by side, up to you. 
So now I can go into here and say, actually, I want an h2 tab. How about his one? And over here I can type in-- oops, leave my bracket there. I could type in h2, you can see, it's handy. Color, blue. 'Save', check in the browser. Browser check. Blue, nice. 

One thing you need to do as well is you need to go 'File', 'Save All'. I find I accidentally hit Save. My cursor's flashing over here, so if I hit-- watch this, if I add an h3, 'h3', and stuff. And over here I start working, and I add, style my h3, color again, whatever. I save it and I'm like, "Hmm.' Refresh, refresh, refresh, I've saved it, but because I've only saved the CSS it didn't save my h3. So I can spend ages trying to fix this problem, like, "Hmm, what is wrong with the code?" And I spend ages trying to fix a problem that doesn't exist. It's just me being silly and not going Save All as the shortcut. So if you're in a habit of Command-S or Ctrl-S, you need to learn the Command-Alt-S as your default save. Or on a PC it is Ctrl-Alt-S to Save All. Now, let's have a look; 'Refresh'. Yeah, easy.
 
All right, let's get into the next video. Actually no, I'm going home for the day. I've been recording all day and it is time for a break. And that will-- like tomorrow you'll hear either a more excited Dan, depending on how well his baby sleeps, or a less excited Dan, depending on how much coffee I've had. In between videos, but for you it won't matter, because I'll be right here in a second with the next video, where we start looking at Plugins in VS code. I will see you then.