Managing Project Files

All of your coding projects will begin with the single main project folders 0:00 stored on your computer. 0:03 That main project file will contain all of the following folders your project needs 0:05 to run. 0:09 Let's create that folder now. 0:10 As I said in the last video, there's nothing special or magical about the files 0:12 you create with a text editor, they're just files on your computer. 0:15 I'll create a folder on my computer called My Awesome Website. 0:19 You'll choose where to save this on your computer. 0:28 To stay organized, 0:30 you may wanna create a special folder to store all of your coding projects. 0:31 No that I've created a project folder, 0:36 there are a couple of ways I can open it in a text editor. 0:37 I can open Atom first, and choose File > Open. 0:40 I find the folder I just made on my computer. 0:46 Or on a Mac, I can drag the folder onto Atom in my toolbar. 0:49 And you can see that my project is open. 0:58 If you already have an existing project with some files in it that you want to 1:00 open in Atom, you do the exact same thing, File > Open, or 1:05 drag it to Atom on the toolbar. 1:08 When you open a project in Atom, 1:15 your project's folder structure will display here on the left side. 1:16 This is a file tree that will allow you to view and 1:20 interact with the structure of your project. 1:23 We'll talk more about that in a minute. 1:25 Now that I've opened my main project folder in Atom, 1:28 I'm ready to create additional files and folders. 1:30 There are a few ways to add files but my preferred way, because it's the easiest to 1:33 remember, is to right click or Ctrl + click on a Mac on the main or 1:38 topmost project folder, and choose New File. 1:41 Now Atom will ask me for a file name, we'll name this file index.html, and 1:46 as you can see in the file tree on the left, 1:51 that file has been created in my project folder. 1:54 See how it's indented a little bit from the topmost folder? 1:58 That indicates that this file is inside of the main folder. 2:02 If I created another file, Like a styles.css, you'll be 2:06 able to tell by how they're indented that both of these files are on the same level. 2:11 Say, I wanted to create a folder to hold images I'll be using for my project. 2:18 I can do that by right clicking my project's main folder and 2:23 selecting New Folder. 2:25 Again, it will ask me for a name, and I will name it images. 2:28 And then a new folder is created in my main project folder. 2:33 So how do I add images to this folder? 2:37 As I have said, were working with the folder on your computer, so 2:39 I could add an image simply by finding that folder on my computer and 2:42 putting images inside of it. 2:46 Atom does give you a shortcut for this. 2:51 You can right-click on the folder and choose Show in Finder, 2:55 to find that folder on your computer. 3:00 Now I can drag an image into the folder. 3:04 And as you can see, it shows up in the file tree. 3:14 I can also drag an image directly to the folder in Adam. 3:18 To open and work on a file, click on the file name and it will open on the right. 3:28 You can have as many files open as you'd like. 3:32 And you can switch back and forth between them using these tabs. 3:35 Here's a great trick that Atom will do for you. 3:39 In an HTML file, type html with no brackets, 3:42 then tab, and you'll get all of the HTML you'll need to start a basic website. 3:45 Notice that when I make a change, 3:52 a blue dot shows up next to the file name on the tab. 3:53 That means that there are changes to this file that need to be saved. 3:57 I can save by typing Ctrl + S on Windows or 4:00 Command + S on the Mac on the active tab. 4:03 Or on a Mac, I can type Command + Option + S to save all open tabs. 4:05 These options are also available on the file menu. 4:10 If I want to view two tabs at the same time, I can click on a tab and 4:15 chose split left or right. 4:20 And that allows me to view two files at the same time. 4:30 Tabs can also be ordered, and moved around, simply by dragging them. 4:34 That's how you can create, open, save, and arrange files in a text editor. 4:41 So what if I have a project, like a simple web page, and 4:47 I want to preview that project like I can in workspaces? 4:49 We'll talk about that in the next video. 4:53