Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses 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.
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
You need to sign up for Treehouse in order to download course files.
Sign up