Hi, if you've taken the time to set up a Bytehost account, this video is going to walk you through how you can transfer your files onto the web. If you haven't set up a ByteHost account, you can still follow along because I'm going to be using something called cPanel. And cPanel is very widely used by a number of hosting sites. So it never hurts to kind of just see the different GUIs and interaction steps that you may need to take. So let's get started. Before I actually log on to my cPanel site, I'm going to go ahead and take a look at my website right now. So this is colleenvanlint.bytehost24.com. Now it's very likely that your page is going to look different. Instead you'll have something that says congratulations, you've set up your account. But regardless, it doesn't have the content that you want to be up there. It's our job to upload those files and name them in such a way that the server knows which file you want to display. So let's get started. After you type in your username and password you should be redirected to your cPanel site. Where you might be overwhelmed by the number of different options. When you pay or even get free hosting, there are all these additional tools you can use. You can setup email accounts, you can setup databases, you can set up something called Chron jobs. Which are a kind of cool way where I teach my students how they can have the computer send their mother or father an email at 8 AM on Sunday morning. Saying, just headed out for a jog, by setting up everything automatically. But what we're going to jump to right away is the file manager. When you go the file manager, there are typically public and private folders. The public folder might be called, as is in this case, ht docs. This is where you want to put all your files, that you're okay with people seeing on the web. If you don't have anything there, that's why the server says, I'm not sure what I'm supposed to upload. Sometimes you get a kind of dummy index file. And that's the one that's going to show, yay, you've activated your account but there's nothing there yet. So, let's add some files. I'm going to go ahead and upload. And what I'm going to use is the Font Awesome example I did earlier in the capstone. So, I'm going to choose a file and navigate up here. Here it is, here's my index.html file. Now, you want to make sure that at least one of your files is called index.html. Because that's the name you give so that the server knows, here's the main page, here's what she wants me to load by default. Click open, once I do that, when I first went to Bytehost, I got a little bit confused. I selected my file but there's no OK or Continue button or something along that line. Maybe a Submit. What I eventually figured out is that we needed to use the green arrow. So go right there, great. Let's go back to colleenvanlint.bytehost and see how it looks now. Going to refresh. And I can see already that some of my code is loaded but it doesn't look the way I want it to. So I'm going to view my source code and it's all there, so why isn't my page showing up? Why don't I see all those cool icons? Well, the reason is, is that my site is made up of more than just my HTML file. I also have these two different CSS files that I want to use as well. So one step I could take is to upload all these files individually. Let's go back over here. All right, I'm going to go back here. But another option I can take instead, is actually to zip up, or compress my files and upload them all at the same time. So let's take a look at how I would do that. Here's my font awesome folder. It has all the files I need. I am going to, in this case, right-click on it. I am going to say compress font awesome. And if you wait a second or two you can see I now have a new file called fontawoseme.zip. Let's open that up. Look around, no Submit button, that's right. I've got to click the green arrow. And, as you can see, it uploaded a lot of files, more than I expected. So let's go back and see what my file directory looks like. It didn't upload just the files, but the entire folder. So when I go back over here, I can't just type in colleenvanlintbytehost 24.com. I need to include the folder name as well, which was font awesome. Up here we go. Now we can see that it uploaded all the files I needed, and I didn't need to upload them one by one. No matter which route you choose. Using cPanel on a free site or a paid site. It's really valuable to kind of get used to this idea of navigating between file structure and folder structure. Because in the real world, believe me, you're going to spend a lot of time kind of following the pebbles of where you uploaded files and what you called them. It doesn't mean that you're not a good programmer, it's something everybody does. So if you do decide the host your page I hope this video will help you get over some of those humps and thinking out how to get these things to work
