Managing Project Files4:47 with Treasure Porth
Learn how you can easily create, open, and arrange files with a text editor.
In this video, we'll see how to manage our coding project files using a text editor. 0:00 All of your projects will begin with a single main project folder 0:06 stored on your computer. 0:08 That main project folder will contain all of the files and 0:10 folders your coding project will need to run. 0:13 Let's create one now. 0:16 Remember that there's nothing special or 0:18 magical about the files you create with the text editor. 0:20 They're just files on our computer. 0:23 To get started creating a new coding project, 0:26 I'll create a folder on my computer called My Awesome Website. 0:28 You'll choose where to save this folder in your computer. 0:35 To stay organized, 0:38 you may want to create a special folder to store all of your coding projects. 0:39 I'm saving mine to a folder that I've made called Coding Projects. 0:44 Now that I've created a project folder, 0:48 there are a couple of ways I can open it in a text editor. 0:50 On a Mac, 0:54 I can simply drag the folder I just created to the VS Code icon on my toolbar. 0:54 Close these release notes. 1:02 And as you can see, here is my folder open here on the left side. 1:05 Alternatively, I could open VS Code first and choose File > Open from this top menu. 1:10 When you open a folder in VS Code, 1:18 the folder structure will display here on the left side. 1:20 This area is known as the file explorer, and 1:24 it works in a very similar way to the file explorer on your computer. 1:26 It's a file tree that will allow you to view and 1:30 interact with the structure of your project. 1:32 Now that I've opened my main project folder in VS Code, 1:35 I'm ready to create additional files and folders. 1:38 There are few ways to add new files. 1:40 Here in the file tree, you can see the folder I just created, and 1:43 if I hover over it, you'll see some options pop up here. 1:46 The first one is a button to add a new file, and 1:51 the second one is a button to add a new folder. 1:53 Click on the button to add a new file and 1:55 an input field appears allowing us to name the new file. 1:58 I'll name this file index.html, don't forget your file extension, and 2:01 I'll hit Enter, and my new file is created and I can view it over here. 2:06 We just created it, so of course, it's blank. 2:11 Notice how over here, my file is indented a bit from the top-most folder, 2:14 that indicates that this file is inside of the main folder. 2:19 If I created another file, Let's create a styles.css file, for example, you're 2:23 able to tell by how they're indented that both of these files are on the same level. 2:30 I can also click this arrow to open and close the parent folder. 2:35 Say I want to create a new folder to hold some images that I'll be using for 2:40 my project. 2:44 I can do that by hovering the folder where I want to create the new folder, 2:45 in this case, my main folder, and click on the new folder icon. 2:50 I will call it images, and 2:55 my new folder is created inside of my main project folder. 2:57 Oops, notice that when I made the image folder, I forgot the s at the end. 3:02 To change the name of a file you've created, you can right-click on 3:06 the filename, and here in the menu, we have the option to rename it. 3:09 Notice that right-clicking on a folder will also give me the option of creating 3:15 a new file or a new folder within it. 3:19 What if I wanted to add existing files to this folder? 3:23 Maybe I have images already on my computer that I want to add to my project. 3:26 I could pull up my computer's finder or file explorer to locate my project, 3:31 then put images inside, but I can also right-click on any file or 3:36 folder I have open in VS Code and choose Reveal in Finder. 3:40 Now, I've got my coding project open on my computer, so 3:47 I can simply locate the images on my computer that I wanna put in this folder, 3:50 And move it over. 4:00 I could also drag an image directly into VS Code, and it will move it. 4:04 Now, I have both of those images inside of my project. 4:12 Finally, notice that I can move files and 4:17 folders around in VS Code using the file explorer by clicking and dragging. 4:19 For example, I can move an image out of the image folder simply by dragging it, 4:24 and VS Code will ask me to confirm that move, and now, 4:29 you can see it's no longer in the images folder. 4:33 Then I can move it back by clicking and dragging. 4:37 Great, so I've got a basic file structure setup for my project. 4:41 How can I edit and save these files? 4:45
You need to sign up for Treehouse in order to download course files.Sign up