Edit Your Web Page & Manage Files - Class 4 of 6, Website Basics Course | Andrew Tye | Skillshare

Edit Your Web Page & Manage Files - Class 4 of 6, Website Basics Course

Andrew Tye, Founder at Seedproof

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
4 Lessons (32m)
    • 1. Introduction to the Website Basics Course

      1:17
    • 2. Overview of the Website Basics Course

      7:47
    • 3. Edit your web page and upload to your hosting account

      11:29
    • 4. Edit Web Page From Hosting Account Directly

      11:31

About This Class

Edit your web page and upload it to your hosting account.

You will have step-by-step instructions and a Case Study to guide you. The Case Study corresponds to the Project for each class and as you progress through all 6 classes in the Website Basics Course the Case Study will continue and tie everything together.

***After taking this class you will be ready for Class 5 of the Website Basics course***

The complete Website Basics Course: Learn how to register a domain name, set up web hosting, create 1st website, and edit pages with pictures, links, video, WordPress, and PayPal

This course will show you how to find and register your very own unique domain name and setup a web hosting account. It will also guide you through the process of creating your first web page. You will also learn how to edit web pages using different methods, and manage your files on your hosting account and your local computer.

  • More than 3 hours of content
  • List of useful links and resources
  • Step-by-step guides
  • The tools you need to be successful
  • Live example pages and templates
  • Case Study for one website to tie it all together

You don't need to know anything about domains, hosting, HTML, CSS, or Jquery

We will start at the beginning and go through the process step-by-step. The course is structured in a logical way so you can follow along with each lecture and end up with your own website that is hosted online and located at your personal domain name.

After taking all classes in the Website Basics Course you will be able to:

  • Register a domain name - Class 1
  • Set up a web hosting account - Class 2
  • Create a basic web page - Class 3
  • Edit a web page using different methods - Class 4
  • Monetize a website with Affiliate Links - Class 4
  • Upload a web page to a hosting account - Class 4
  • Understand other options for getting a ready-made website platform - Class 5
  • Understand options for eCommerce and Blogs - Class 5
  • Install WordPress on a website - Class 5
  • Find out about more advanced topics - Class 6
  • Put a PayPal button on a website - Class 6

Transcripts

1. Introduction to the Website Basics Course: Hi there. My name is Andrew and this course is about setting up your first website from scratch. Now you've probably seen a lot. Of course, is about how to use HTML and CSS, and you might have even seen some that talked about how to use JavaScript. This is not one of those courses. There's plenty of people that talk in depth about how to code in the program websites. But if you're like me, you have a business or a block for a personal site that you'd like to set up. But you're not sure how to register your domain name, were set up a hosting account. Or maybe you had someone set up a website for you in the past. And now you'd like to know how to manage your files or edit your files without going back and paying a lot of money for that expensive website development firm. This course is for you. If you're an advanced web programmer, you don't need to take this course. This course is for the rest of us. Would like to know how to set up and register a domain name out of set up a hosting account . How to manage it. Edit files on your computer or a three year hosting company, and also this course is to teach you about other options. What you can do if you want to set up an e commerce website. Thanks for checking out my course. My name's Andrew, and I hope to see you later in the lectures. 2. Overview of the Website Basics Course: Hello and welcome. Before we get started, I'd like to go over What? What we're going to cover during this course and what you're going to gain by going through the lectures. I also know that you paid a lot of money for this course, and I don't want you to waste your time or your money. If this course is not for you but this course is for you. If you're interested in having your own website or if you just want to learn the basics about setting up in building websites, it's also for you if you want a refresher about setting up a Web page. So maybe you've set up a Web page in the past, but you kind of want to go through the process again. And it's also for you if you've had someone else design a website for you and now you don't know how to manage it. And this is probably the most common thing I've seen is individuals or small businesses went to a Web design firm, got a website designed, got it hosted on the Internet, and now they don't know how to manage it. And so they might want to change, a phone number or an email address or a couple paragraphs on their website. But to do that, they have to go back and re hire this expensive Web design firm. So this course is absolutely designed just for you, and it's gonna help you understand how to make those kind of edits to your files and how to manage a website that you already have. Now, if you're an intermediate to advanced Web developer, this course is really not designed for you. It's not a Web development class per se, but we do go through a lot of Web development topics during the course, and it's Maurin, a beginner stage. So if you're an intermediate to advanced Web developer, then you already know how to set up domain names. You already know how to set a posting accounts. You already know how to edit and manage your files, and you already know about MAWR advanced topics in Web development. So this course is really not designed for you, but you should take this course. If you're setting up a website for the first time, you should take this course if you want to learn more about domain names and Web hosting should take this course if you'd like to know about website options. And what I mean by that is other options that you have in addition to building your own site. And so, as you go through this course, you may decide Hey, I don't want to set up my own website. What else can I do? Or I have any commerce. I it's gonna take me too long to learn all the ins and outs of developing my very own e commerce site. So now what do I do? So we're gonna talk about what options you have in that situation. And lastly should also take this course. If you're wondering what all or what MAWR you can do yourself, maybe you've got a basic website, but now you're you're wondering. Do I need to go hire someone else? Can I do more sophisticated things on my own or not? And we're gonna briefly go over some of the more sophisticated and more advanced things you can do completely on your own. With the help of some online resource is the first goal of this course is to explain domain names. The second goal of this course is to explain the role of hosting companies. The third goal is to create our own basic Web page, and the fourth goal is to manage and upload Web files. The fifth goal is to give you an overview of other options that you have in addition to creating your own Web page. And the last goal is to discuss more advanced Web topics. Domain names. We're gonna talk about what they are and kind of the science behind them. We're gonna discuss how much they cost and where you can get him and where I get them. When we talk about Web hosting, we're gonna talk about what, what it is, how it works and where you can go to get. Web hosting will also discuss some of the Web hosting companies I like and some that I've used and don't really like. Next we'll talk about creating pages. We'll discuss a couple different options that you have for creating pages one using, AH, text editor like a shown on the right, and we'll also discuss more of ah sophisticated user interface. Similar toe how you might edit files in Microsoft Word or PowerPoint. We'll talk about where you confined help for creating pages and find examples online. The correct Syntex and then we'll actually work through a basic example similar again to the picture on the right will work through it. Using a text editor will work through it using a more sophisticated editor, and we'll even go through, Ah, using some help documentation online. We'll talk about how to manage your files. So how you can edit your pages through one of the options that I just mentioned or edit your pages right on your hosting account. And then we'll also talk about how to upload files from your own computer. We'll talk about other options that you might want when you're not gonna build your own website. So if you decide to go with any commerce route and you don't want to try building that on your own, which I would not suggest doing, we'll talk about some other options for you. And lastly, we'll talk about some more advanced topics, and I'll give you a very brief overview from my own personal websites and some client websites that shows you what you can do with CSS and photo shop. What you could do with PHP Java script and my SQL just a little bit about me. I started coding or programming about 14 or more years ago, and I actually went to school for a few years and studied computer technology. And that's really where I got my start in Web development. And ever since then I've been involved in some form of Web applications or Web development , and along the way I've helped a lot of a lot of people, my friends or family, and even some clients set up their own websites. I got Teoh work at a university for a few years when I went back to school and actually developed very large scale Web applications there interactive Web pages that students use for projects. And so that's where I learned a lot more advanced topics, and along the way I've got to start several online businesses of my own. I don't mean to be a say that in a boastful way at all, but it's given me a lot of experience designing and developing websites, whether therefore small websites for individuals or their very large and dynamic websites that you might find it a university. A quick note about taking this course, the lectures do build on each other. So please, please don't skip any and I will provide you links after the lectures. So you don't have to try to scramble to write down links. If you see a website that you want to remember, you want to go back to and visit later. Don't worry. I'll provide you the links after the lectures. Guys, this course is for you. So please let me know if you'd like something clarified. And if you're not completely 100% satisfied with the course, please let me know right away, because I'll do everything I can to make it right. And as long as their students taking this course, I'll be looking at the comments and I'll be responding to your questions. And if I need to add lectures, I absolutely will. I want to make this very valuable course for you. So thanks a lot. And I hope you 3. Edit your web page and upload to your hosting account: in this lecture, we're gonna talk about managing and editing your files. So in the last lecture, we talked about how to create a most basic Web page and where you confined resource is to help you learn about writing code or even using a software package like Dreamweaver to create your Web pages. That way, now we're gonna talk about how to manage those files. How do you get him to your hosting account? How do you edit him once they're there? And how do you create new pages? Have to editing options? Really? Go online to your hosting account and use your file manager and I'll show you what that is . Or on your computer, you can use note pad plus plus to edit, just like we did in the last lecture. Or you can use Dreamweaver. So I'm gonna go online real quick and show you what that file manager looks like. This is my control panel on in motion hosting, and you can see it's a little bit outdated icons, but a lot of control panels use this see panel, and so you're going to see a lot of similar looks, even on other hosting accounts. Now I can cheese the form out of this. I'm just going to show you in case you encounter something different. This is a more modern version of my control panel. So then you scroll down. You can see there's a lot of stuff in the control panel to show you while we're here. A lot to do with databases, which is a more advanced topic will mention later in the course. Here's where you would handle all your domains, then all your email options. You can go and you can. Set forward is for email accounts, auto responders. You can go and actually check your mail. We're gonna go back up now and go to file manager. So click on the file manager and I'm not gonna show you all my files because I don't really want him in the public domain. But this is my file manager for one of my websites, and I created a folder called You Demi and I put our example files in that folder. So right here example dot html. Now that's online. I went to a w tie dot com. Here's the example file that we looked at before, So if you wanted to edit that you could do so from your file manager. Right here. Right up here. You'll find some buttons. Ones a code editor ones HTML Editor. I'm gonna start and click on the code editor. So here's the little bit of warning. You may see this other places as well just because you can actually mess up the code. But we're experts now, so don't worry about that. So here it gives you a place where you can edit code. We might go ahead and put this font size back down to 30. Go up here upper right hand corner and click save changes. Now it's done. Let's go look online and see if that updates. I'm just going to refresh the browser and you can see the font did go down. So just that fast it's live online. What we're looking at right here, this is out of my chrome browser On a w tie dot com slash you Demi slash Example that HTML back to our file manager and we'll close this editor done with it now. Now you can also come and click on the HTML editor. Look at it and this is more like dreaming or what you see is what you get. And I think what you're going to find is that forward Small edits. It's pretty fast and simple just to do them from your file manager because you can come right here and make little changes easily. So maybe we'll change this to say you Demi course blogged. We could change this paragraph to say something else. So far, I'm learning something from this course. Hopefully, our and maybe you want to change something with the fund, change it to blue. Um, I guess that yeah, change that to blue. That doesn't look really great. Um, but there's all hope a whole host of things you can do just right from here could make it a talic. Um, you could come up here, change the font, make it a lot bigger, or you could change, maybe make it a different type of fought, and then you just click Save successfully saved the file. Now let's go back to my web page and see if that updated. Sure enough, it is updated online just that fast so we can come close. This editor now, we're back in the file manager. So this file right here. We updated it two different ways, and instantly it was live online. So that's pretty cool. Now let's look at the other way to edit, which is to go back Teoh Dream Week or two. No pad plus plus. Sorry. And I'll go ahead and open up the file because I already have the file saved on my computer right from when we edit it before, don't bring that in note. Pad plus Plus, Obviously, this does not have the edits that we just made online. So let's go ahead and change a few things. Well, say my second Web page, okay and attempt at editing from no pad Plus Plus, Let's change that background that reds really getting annoying. So we'll put in and like a gray change this sponte Teoh, maybe 40 pixels, and we're ready to change the font of that one to 100 pixels. All right, we'll click. Save now that's saved on my computer, but it's not saved online, which really brings us back to our next point in the lecture. But first I'd like to stop and ask you to take a little break and try to edit your first page. So if you can go online to your file manager and try to edit your page just like we did go into the file manager and either use your code editor or your HTML editor, whichever one you want, the code editors where you change the code. HTML editor is really that What you see is what you get similar to updating a word file. So if you would give that a shot and make sure you understand how to do that now we need to talk about how to upload files to your hosting account. If you decided to edit your Web page using note pad plus plus or dreamweaver, it made changes to your local computer, but not online. So now we need to get that file online to your hosting account. You can do that through file zilla or your file manager. Now I use software called File Zillah. It's FTP software, um, which is just stands there, file transfer protocol, and it's a very easy way to get your files online without actually going and log it into your hosting account. So for me, if I'm gonna be making changes all day long to my files. I don't want to keep logging into my hosting account and use my file manager to upload files, so I use files. Ilott You can you can google it online. It's a free downloadable software, and I'll show you how to use it. But again, it's free, easy to use. The other option is file manager, so I'm gonna show you right now how to use file manager to upload your file back in file manager Here's that X self example about HTML file. Now let's click on Upload and Juice File and here's example. Html. It's on my local computer. It's the one we just edited in Note pad plus plus. Okay, so I'll click open. It says, Do you want to override it? And I said, Yes, I dio Now we'll go back Now let's see if that is updated online. Sure enough, my second Web page attempt to editing from note pad plus plus. So now it's online. We used file manager to update it. The other option is files L. A. That I spoke about. So now let's give that a shot. This is file Zilla. What you do is you come up here and you enter the host name your user name your password and you might wonder what those things are. If you go back to your hosting or you go back, let's say you have in motion hosting. So you Google in motion file zilla. This is what comes up configuring your site and file zilla. So it's all very easy to Dio scroll down and right here is exactly what you need to dio to connect and files. Oh, it's just that simple. So I've already done that. I've connected on the left is my local files on my computer. Here's the file way updated in note pad plus plus on the right is basically a mere image of my hosting account. So this example dot html is there because we just uploaded it. So if you want, we can go back to note pad plus plus make a few more changes. Um, maybe we'll change that font size of that paragraph 2 30 and we'll say this is our third attempt. So watch out for that to see if it changes. Maybe we'll even make this bigger is to make it real obvious. Make the color of the heading red click save and we go back to file Zilla. Now this file here is the one we just updated. This is the one online all made. It is drag and drop this over here. And just like that, it's updated online. To prove that to you, we'll go back to our website. Click, refreshing the browser, and there it is, updated online just like that. That's why I like files L A. Because I can edit from note pad plus plus and then uploaded online. Just like that night, I can completely avoid using my hosting account. I don't even ever long into my hosting account. I do it all right here. Now it's time for activity Number three. If you would just take a second and try to make another edit in note pad plus plus or note pad, you can use note pad. It's most likely installed on your computer, even if you don't have note pad plus plus downloaded yet. Just try. Use a note pad, make a few changes to the code and then go to your file manager and try to upload it the way we just went through the activity of uploading and make sure you understand how to do that before we go on. That's it for editing and managing files. Up next, we'll talk about other options. 4. Edit Web Page From Hosting Account Directly: Okay, Welcome back to the case study. Last time we created our own Web page and we could see real quickly. The changes that were being made were live online. So this time we're gonna do just a little bit more of the same. We're gonna go through, make a couple edits, and we'll see how easy that is to do even something like adding some pictures. So we're gonna go ahead and go back to our control panel and emotion hosting. Okay, so we're back in our control panel, We're gonna go back to file manager. It is already open. And what we're gonna do is we're gonna hit the new folder button. We're gonna call it images. Okay, then we're gonna double click on images, and I'm gonna go here to upload. Click on upload. Now we're gonna click, choose file, and I'm gonna choose some files from my personal computer. It's starting the upload now, and I'm gonna choose another file. I'm gonna keep doing this. I'm gonna choose several different files, OK? And now I'm gonna go back to the file manager, and I'm just gonna refresh this page now if we go to our images we're going to see we have four pictures in here, all JP. Okay, so that's pretty cool. So now let's go back to our will. Go up one level. We're back to our side. We're gonna go to Index, and we're gonna click, uh, html Editor. So here's what we saw before. Now, let's open up our web page again. OK, so here's loud Alaska trip. So let's say we want to add a place for pictures. You know, we're gonna put in a bunch of pictures here, so we come up here and click the image button. Now you could type in. I could type in wild Alaska dot com and I could go slash images and then type an image name , or I'm gonna sit this brow server and it opens up wild Alaska trips. I'll click on images, so I'm just gonna choose camping for right now, a double click on it. Here, you can see a preview. So let's say we don't want it quite that Babel say maybe we want to go 300 pixels wide just for now and leave everything else the way it is. Actually, we'll put in the alternate decks so That's what you see when you hover your mouse over image. That's the text that comes up. Or if for some reason, the image can't load that's the text the user will see. Okay, Clicked. Okay. And there it is, under pictures I had control be to make it bold, control you to make underlying. And I make this spot a little bit bigger. It doesn't seem big enough. Here we go. I'm also gonna change all this text. I'm gonna highlight everything come up here to find and I'm gonna change it all to Ariel. This for fine. It's safe file. Save successfully. Now let's refresh our page. And there it is. Online right away. Let's go back and add a few more pictures. Go back to our image. Browse super images. I'll click on double click on Denali. I'll make that 300 wide is all as well. Click OK, back to images. Browse server. Let me just and I put the plane in there 300 wide, so that was obviously a much different size. And maybe we'll just go ahead and have the last one browse super again. Let me just rainbow 300. So we're seeing these other ones. Air 1 99 high, 300 wide. So now I'm thinking maybe I had to change this plane to be the same height, so they're all kind of in a row now. I'm gonna right click on this and go to image properties, and I'm gonna say hi 1 99 you know, automatically. Scale. No, it didn't automatically scale. So I'm gonna click this lock ratio, click 1 99 so it will scale the wit so it keeps the same manage proportions. Now, you see, it's they're all the same, so I'll save that and hit Refresh. Now, if I made this bigger, they'd all be on the same page. They're on the same row. Okay, so that's pretty easy. Toe make edits like that. There's a lot of other things we can do to these images. We can add borders to him. We could round the edges of them. We could put some space in between him. A lot of things we could do. So let's maybe you want to put a little space in between them, so right, click. Go to image properties and I'll say the horizontal space I want to be 10 pixels. Now click. OK, and it makes a little space, so I'll do that for all of them. Put 10 pixels of padding in there. So now that you see, this padding is a lot wider than this, Patty, because this one only has the tin from this picture. This one here has the 10 from each. So I'll do that. The rest of them. Okay, There you go. So now maybe I want to add a border to these pictures, come up here and I put a one pixel border, okay? And, uh, maybe you put a one pixel border there now I noticed over here, when they're stacked like that, there's no space vertically either. So I think now I had some vertical spacing. You can add 10 pixels in there. You could add 10 in here had 10 in there. We can also add that border. Same for this one at a border at 10 pixels. We'll save. It will refresh our page. And there we see images that are nice and spaced out so we could add a lot more more things here if we wanted to. It's really easy to add text I think you've seen that there's all kinds of different stuff we could do. So maybe we want to make these a little different color. That's really easy to Dio will come and will say we're gonna make this kind of a red or something, I guess. Make this the same. We'll save it. Refresh our page. There it is. Okay, so we've made a lot of simple edits with these pictures. I think you're seeing how easy it is. Maybe we we took a video, and we want to add that in. Now that we can come down here, we could say videos. We don't want to reform at that. I'm just gonna copy this control. See? Come down here, paste. It changes to videos. All right. So appear you'll see in bed media content from different from various sites. I'll click on it. So I'm gonna maybe put a u r l. Lincoln there too. Ah, YouTube video. Now, I don't have any Alaska YouTube videos. The only YOUTUBE video actually have is the promo video for this course. So I'm gonna go ahead and paste that in here just to show you how you can embed it on the site and I say I know recent no resized. Okay, Okay. And you can see right here embedded a video or you can't really see that. But it did. So I'm gonna save this file. Now, let's go over here and refresh and see if that video comes up. Sure enough, there's I know this doesn't match the site. I just don't have any Alaska videos to show you. So there is a video right there. Uh, promo for this course, right on our website. We didn't have do any code. Now, if we click that, I think it'll play, so it starts playing right away, so that's pretty neat. Now, let's say that you want to monetize this side a little bit, and maybe you're have an Amazon affiliate account set up. You know, where you if someone clicks on your Amazon link to a product page, you get a percentage of that sale, so maybe we'll go to Amazon. Okay, So I'm just gonna type in amazon dot com and tense, and we get all these different tens. I'll click on expedition tents and scroll down here and find a cool 10. OK, a lot of tends to choose from, so it doesn't really matter which one we do. But, um, I'll just click on this one here and I'll get this link. Now you have to use your Amazon link to actually get paid. But for the sake of this case study, I'll just click on that link. I'll come back over here, click on this image, and now I want to put a link in there. So you see that little chain links I'll click Link and I'll paste it in. And all this target here, I'm gonna I'm gonna put that as you know, a new window because I don't want to overwrite my pace. I'll click OK and then save. I'll go back here to our website Click Refresh. Now I put a little blue border around there, which that's not real pretty, But when you put your mouse over, you see the mouth changes to what it normally would for a link. So I click on this and it goes right to that tent. That's pretty cool. So now you monetize your site. If your aim is on a feeling and you're writing about your wild Alaska trip now you have a way of people are coming in there and they see that they think, man, I want one of those tents You probably should link to the tent that's actually in the picture, but then they click on that, and if they buy it, you're gonna get a little percentage of that sale. So now you've set up your own site, you monetize it a little bit, and you can continue to add content. There's there's a lot of things you can continue to do here that are really easy and really fast, and there's no reason you need to go out and hire someone else.