Hi, today we're finally going to write some code, and I'm gonna walk you through it by showing you how you can use an editor. One of the biggest pitfalls I've seen many of my students make is that they listen too carefully to what I'm saying, rather than actually trying to dive in and start coding, themselves. So while I encourage you to sit back and watch what I'm gonna do right now, in a little bit I'm hoping you'll sit down and you'll code with me. The first step is that you need to create and edit your files. One of the biggest pitfalls you're going to encounter is that you'll be saving your files all over the place, you're not able to find them later on. So decide how you'll be organizing your files. What are you gonna name your folder? Where are you gonna put it? Second, you need to decide on a naming convention. This is just a fancy way of saying decide how you're gonna name your files. So although many people use a Mac, and you're allowed to use spaces in your file names, this is not something you wanna do when you're writing code. So decide that if you have two words you want to put together, you're going to use underscores to connect them or use something we call CamelCase, where you capitalize the first letter of each word. Just remember, never use spaces and be very consistent about your capitalization if you are going to use it. Finally, you need to decide on an editor. If using a Windows machine, Notepad is already built in. You can also consider using Notepad++ or Sublime. If you're using a Mac, TextEdit is the default editor, although many people also use TextWrangler. I'll be using Sublime throughout the rest of the course, but for today I will be showing you examples of how to edit in Notepad and TextEdit as well. So in order to get started, let's quickly review the five steps that we're going to do, a few of them repeatedly. You're gonna start by opening your editor, and then you're going to save your file, add some content, save the file again, and open it in your browser. I want to walk you through a quick example, and I'm going to use Sublime to do it. But don't worry, I'm going to go ahead and show you some of the other ways to do it as well. So I've brought up my Sublime editor here, a nice black file. I'm going to start off by going to file. And save. And I'm gonna name it just firstpage.html. Now one of the things you need to decide right away is where you're going to save this. Hopefully you've decided on this before you even started working. I'm gonna keep mine in a folder called webpages that I've put on my desktop. But you can pick anything here, or even if you want to, if you click off to the side here, you can create a brand new folder. What you don't want to do is save all of your code on your desktop. Let's go Save. And now, while there are many times that I'm gonna force you to sit through and watch me type horribly on the screen, this one, just to save some time, I'm gonna go ahead and cheat and paste in some code that I've already written. As you can see, I have my doc type, the head section and the body. In the head, I've included my encoding and my title. In the body, we're just going to say hello. I went in and I saved it using Ctrl+S. You can always do File > Save, but I find Ctrl+S is much quicker. And for every editor you use there's these little helpful keys to help you know wether or not you've changed anything. So if you look right now at firstpage.html, which might be hard for you to see, if I were to go in and change anything. You actually get a little circle to let you know that you haven't saved in a little while. So I've gone ahead, I've created content and now it's time for me to open my page. One way to do it is to head over here to my folder. And oh, here's firstpage.HTML. For me, there's a little icon of Chrome off to the side. For you, it might be a different browser. I'm going to go ahead and click on it and bring up my FirstPage, and I have success. I cannot stress enough that most of the time when you type something at first, it's actually not going to work for you. For me luckily, I have the power of editing. You have no idea that it actually took me a few attempts to get that file to work, because I was messing around with some things. Throughout the entire course, I'm going to try to show you areas where you might have a problem. Hopefully you won't,but if you do, they're all very simple to fix. One of the most common problems is that when you right-click on the file, instead of opening up nicely in the browser, it opens up your editor instead. If you'd like to fix that, all you need to do is right-click on the file and select Open With. Another issue that happens quite a bit is that when you open up your file, instead of seeing a nicely formatted web page, instead you actually see all of your tags. When that happens, you need to check your file extension and make sure that it says .html, and not something like .text or .rtf. Another issue that happens quite a bit is that you change your code, but your page looks exactly the same. There are two reasons that this tends to happen. One is that you have to do something called refresh your browser. This just means you upload the contents. The second thing that happens quite often is that you forgot to verify your file name. Let me show you an example of this one. So let's go back to our original file. As you can see, I have Hello World written here. This is a very computer science-y type thing to say and since I'm trying to seem more normal, I'm gonna change this to Hello Everybody. I go in and I'm gonna Save my file. Done. Well, when I go back over to my web page, it still says Hello World. It didn't change and I'm kind of upset about that. So, now I remember it's often necessary to refresh your page. There number ways you can do that, you can typically go to the little circular area up here and click refresh. You can right-click and click on Reload or you can also go to View, sorry. You can also do it through the tool bar on top. So, I'm gonna go ahead and refresh right here. And you can see now I have the Hello Everybody. The other problem I mentioned is that sometimes people change their file name. So maybe you aren't working on your FirstPage any more. So you decided I'm going to save this as File > Save As second page. Save it. I'm gonna go back over here and I'm gonna refresh the file. Hello everybody. Well, nothing happened. You are gonna find this happening over and over and over again. When you're dealing with a lot of files all at the same time, you have to make sure that the one you're looking at on the browser matches the one that you've been typing. Because I changed the name of my file, I need to remember to change it up here in the URL bar as well. Boom. Another issue that comes up quite frequently is this idea that you get, what we'll call, weird characters. One of the number one reasons for this happening is my old favorite, copy and paste. Whenever I give you code and you're looking at it through PowerPoint, the problem is when you copy and paste it, a lot of the characters don't translate exactly the way you hoped them to, and you get what we call weird characters. The number one culprit is the quotes. So whenever you're typing and you have some sort of weird thing you're not expecting, go back in and try typing the code in by hand. So I've shown you how to create and edit a file in Sublime. But I wanna make sure that everyone has a chance to see how I can create files using the editors that they have on their own computer. So I'm also going to show you an example in TextEdit and also in Notepad. I really hope when you watch these examples, you'll have your computer out, and you'll type along with me. Go ahead and pause, stop things, don't go ahead in the video until you feel confident that you're at the point that I've reached myself. Hi everyone! Now we're gonna go ahead and make a file with TextEdit. And if I wanted to be evil, I would go through and show you a very quick, simple example of making a file in TextEdit. But instead, I'm gonna be very honest with you and admit that it just took me about 15 or 20 minutes to figure out how to make a really simple file in TextEdit. So first, let me show you what I did wrong. All right? I'm gonna go ahead and paste in my code for my very simple page. Okay, let's get rid of this. There we go. We've just got our header and our content. So, you can type this in as we go along, or you can wait. So it's time for me to save the file. And what I need to do is I need to make sure I'm saving in the proper folder with the file name. So I am going to go ahead and call this FirstPage and I am going to go down here and I want to make sure that I save this as a web page. So one of the options is .html, so I am going to click on this. I know have my firstpage.html, it's in the folder that I want and I really feel like we should be good to go. So I am going to go ahead and save it. Now, I'm going to go over here to my web pages folder, open it up. And it's going to open up in Chrome. So, let's see how it goes. That is not what I was hoping for when we were first taping this segment, and it took me a really long time to figure out what was going on. The first thing I went to check, let me close this up, is I want to make sure that my file extension really had been .html. And it was, there wasn't a .txt or a .rtf after it. The next thing I went in and checked is that all of my quotes were going the right way. So let's go ahead and put these in, because if you remember, I'm always telling you that copy and paste can sometimes give you bad quotes. So we can go back again. Still no luck. If you're going to be using TextEdit, you actually need to go in and make some changes to the TextEdit Program. It has nothing to do with what you're typing. It has to do with the TextEdit Program. So I'm gonna go ahead, copy this just in case I lose it, and clear it out. And I'm gonna go up to TextEdit, select Preferences, and you can see that we have two options. New Documents, and Open and Save. So one of the first things I'm gonna say is hey, whenever I have a new document, I would like it to be in plain text. Not rtf, or rich text, but plain text. The second thing that you want to do is go over here to opening. See the display HTML files is HTML code? We're going to go ahead and click on that. And then lastly the most important thing is when you save your files, we want to save it as utf8. So I am going to pause here for a second, just a second, while you look at your own TextEdit menu. You want to make sure that you have these boxes checked and you've changed it to unicode, utf8. Okay? If you've messed things up, go down to restore all defaults and try it again. I'm gonna close this up. I'm gonna go ahead and do New, paste my code in. Ooh, that's very small for you, but that's okay. Do File > Save. And let's call it FirstPage2.html. You can see right away it says, do you want to use HTML extension or the dot text? And I'm gonna tell it, use HTML. Before I click this though I'm wanna point out that down here, it's showing that it's going to save as unicode utf.8. I can get rid of this warning, if I want to, by unclicking this, if no extension provided, use .txt. So we're gonna use html. Let's go over here, let's cross our fingers, let's hope for the best. And now I have a successful page. So if you are gonna be using TextEdit, there's not really much you need to do, except for the first time you set it up. Make sure you go into the preferences. From there I can now go in, make changes, we did it. Save, and refresh. So hopefully now you can successfully save and edit a file. Okay, so let's say that you are using a PC to create your files. What you wanna do is you probably want to use Notepad at first since it's the free version of the editor that's already on your machine. The first thing I did, was that I made a folder right on the desktop where I can keep my files. I know it's small, you probably can't see it, but it's called web pages. If you don't know how to make a folder, just so you know, you can right-click on the desk top, go to New and Create a folder. Once you've created the folder where you want to save your files, I'm, right off the bat, going to go ahead and say File > Save, and I'm going to name this firstpage.html. It's very, very important that you include the .html. If you don't include that, the computer's going to think you're just working on any other old type of file. So I'm gonna go down here and change it from text documents to all files. Go ahead and save. Oops, it already exists, but I'm gonna say okay. Now, it's time for me to put in some content. I'm gonna cheat a little bit here and just copy and paste in my content, even though you're gonna have to type it in bit by bit. So again, I have my doctype, my HTML language equals English, meta charset equals UTF-8, my title and my content. Just to be safe, I'm gonna go ahead in here and put my quotes back in. Because quotes always make me nervous when I do copy and paste, that maybe I've put in some sort of character that my editor isn't going to recognize. Now that I'm pretty happy and sure that I've got the things that I want in my file, I'm going to go ahead save it again, go into my folder, and click on the FirstPage. And there we go. So now, every time that you're going to change your file you can just keep both windows open if you have the room. Make your changes. Job, I have a file. Save. And reload. Nice job. You've made a file using Notepad.
