Heads up! To view this whole video, sign in with your Treehouse 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.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up