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