Working with Files

Let's take a closer look at the workspace's interface and 0:00 learn how to work with files. 0:04 Here I have a workspace already open with a simple HTML and 0:06 CSS website and on the left side we have what's called the file tree. 0:11 And in the file tree we have a list of files like this HTML file or 0:17 this text file, and we also have folders. 0:23 So we can click the triangle on the left side of any of these folders 0:28 to open a folder and see its contents. 0:32 And in fact, you can even have folders nested inside of folders just 0:36 like in the macro S10 finder or in the Windows file explorer. 0:41 When you click on one of the files like this HTML file 0:48 it will open it on the right side, which is the text editing area. 0:53 At the top you can see the name of the file and 0:59 by clicking the x you can close the file when you're done working with it. 1:02 You can also have multiple files open at once. 1:07 So here you can switch between these two tabs and have multiple files open. 1:14 At the top of the workspace, is what's called the menu bar. 1:21 Here, you'll find the familiar File, Edit, View, and 1:26 Help menus, as you might see in other applications. 1:30 Where you can do things like create new files, close all of the open files, 1:34 save the currently open file, and so forth. 1:39 On the right side, we have a few additional tools where you can create 1:43 a workspace snapshot, fork a workspace, or preview a workspace. 1:48 We'll talk more about these features in upcoming videos. 1:53 Next let's learn how to create a new file. 1:57 You could go to the File menu and choose New File. 2:01 And then you'll have the opportunity to name the file, 2:05 such as about.html if you wanted to create a new HTML page. 2:09 But if you wanted to create something like a CSS file, 2:15 you could simply change the file extension. 2:19 So I could call this something like style.css, so that it's a CSS file. 2:22 And then, when I hit Enter, workspaces will automatically open the new file, and 2:28 down at the bottom you'll notice that it recognizes that it is indeed a CSS file. 2:35 This is important because in the text editing area you have syntax highlighting. 2:40 So if we go back to this index.html file you can see that 2:46 the syntax is all different colors to highlight different parts of the code. 2:50 In addition to creating files, you can also create folders. 2:58 Another way to create files and folders besides using the File menu 3:02 is to right click, or alternate click, on the file tree 3:06 in any blank area and then choose New File or New folder. 3:11 So let's say we wanted to create a folder to store some iconography. 3:17 I could type icons. 3:22 And now, my new folder is created. 3:26 Even though it's expanded, there's nothing inside of it. 3:29 But we can move files by simply dragging and 3:33 dropping them, and then they'll appear inside of the folders. 3:37 This is a convenient way to not only organize your projects, but also make sure 3:42 you have the appropriate file paths in your HTML files, as well as other files. 3:47 In addition to creating files inside of workspaces, 3:52 you can also upload your own files. 3:56 There are two ways to do this. 3:59 I could right click and choose Upload File, and 4:01 then I could choose one of the files I have on my computer. 4:06 Perhaps this normalize.css file and choose Open. 4:12 And now it's appeared in the file tree and it's been uploaded to this workspace. 4:16 In addition to right clicking and choosing Upload File, you can also drag and 4:24 drop files from the Finder on Mac OS X or 4:30 the File Explorer on Windows, directly into the file tree. 4:34 So I'm gonna come out of full screen mode, and 4:39 then I have a Finder window here, and let me try to upload a different file, 4:43 such as the minimized version of normalize.css. 4:49 And when I drag and drop this into the file tree, 4:53 a box appears at the bottom that says, Drop Files to Upload. 4:57 So when I drop this file, you can see that it's now been uploaded to my workspace. 5:04 If you want to rename a file or a folder, you can right-click on the file or 5:10 folder and then choose Rename. 5:16 Perhaps instead of icons, I just wanted to call this icon. 5:20 And now it's been renamed. 5:25 And finally, you can right click to delete files and 5:27 folders by right clicking and choosing Delete. 5:31