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
Many aspects of Treehouse’s video learning, such as Teacher’s Notes, Questions, or the Video Transcript, are universal to all Treehouse videos. However, Workspaces are only used in videos featuring coding exercises. So you won’t encounter Workspaces in UX design courses, for example. Treehouse Workspaces are built to resemble an IDE, or Integrated Development Environment. That’s what we call the software developers use to write code. You don’t have to have any special software on your computer to run a Treehouse Workspace, however.
Vocabulary
- IDE: Integrated Development Environment. Software developers use to write code.
Popular IDEs
Resources
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
Many aspects of Treehouse's video
learning such as Teacher's Notes,
0:00
Questions, or the Video Transcript
are universal to all Treehouse videos.
0:05
However, Workspaces are only used in
videos featuring coding exercises.
0:11
So you won't encounter Workspaces
in UX design courses, for example.
0:17
Since Introduction to HTML and
CSS is a coding course,
0:23
the instructor will be working
on a small web project and
0:27
students use a Workspace to practice
coding alongside the instructor.
0:31
The first video in the
Introduction to HTML and
0:38
CSS course looks like it contains
a Launch Workspace button.
0:41
So let's press it and a Workspace
pops open in a new browser window.
0:47
Treehouse Workspaces are built
to resemble an IDE or
0:52
Integrated Development Environment.
0:56
That's what we call the software
developers use to write code.
1:00
You don't have to have any special
software on your computer to run
1:05
a Treehouse Workspace, however.
1:10
On the left side of my Workspace,
I see files and folders.
1:12
You'll notice that the file names are
all in lowercase and contain no spaces,
1:17
and that's no accident.
1:22
Web file names tend to be limited
in most cases to lowercase letters,
1:24
to use hyphens rather than
spaces to separate words,
1:30
and to contain a dot before
the filename extension,
1:34
such as .css for a CSS file,
or .jpg for a JPEG image.
1:38
The window on the right
looks blank, but
1:46
that's because I don't
have a file selected.
1:48
If I click on portland.jpg, I can see
the image load on the right side.
1:52
I can't edit this image, but I'll
try instead clicking on index.html.
1:59
Here's some code that I can
read, highlight, and edit.
2:06
The Workspace text might look too
large or too small for your tastes.
2:11
So a handy keyboard shortcut to
know here is Command plus to
2:16
increase the text size, or Command
minus to decrease the size.
2:21
If that key command
seems hard to remember,
2:28
you can find it up top
under the View menu.
2:31
I'm not going to cover all
of these menu options,
2:35
as you'll encounter most of
them during Treehouse videos.
2:37
But note that many of these
keyboard shortcuts are common to
2:42
other software like Command F
for find, Command S for save, or
2:47
Command Z for undo. If you're
not a Mac user like I am,
2:52
these shortcuts are
the same on a PC.
2:57
You'll just hold Control
instead of Command.
2:59
You might also want to close
the console if you're not using it.
3:05
Developers often write JavaScript
directly in the console.
3:09
But we won't encounter JavaScript
in a course called Introduction to
3:13
HTML and CSS, so I'll click the X.
3:18
And now I can see more
of my HTML code. Finally,
3:21
how about these icons in the upper
right corner of the Workspace?
3:26
The eyeball means preview.
3:31
And it will load a working version
of your web page based on the files
3:34
in your Workspace in
a new browser tab.
3:38
The preview looks like it's found
on the web at treehouseapp.com,
3:42
but that's a temporary address.
3:46
Once you quit your Workspace,
the preview stops working.
3:49
The icon with a small arrow means Fork.
3:54
And that's a great term for
developers to understand.
3:57
To fork a project means to make
a copy of a project that you can edit
4:01
without affecting the original.
4:05
So if you're wanting to make some
changes to your Workspace project,
4:08
but maybe aren't feeling so confident
about how they'll go, fork it so
4:12
you can return to the original later.
4:17
I'll add v2 to the end of
my forked Workspace name.
4:20
Now, both versions will be
available under My Workspaces.
4:26
I'll show you where that is in just a bit.
4:31
Finally, creating a snapshot
allows you to create a shareable
4:36
version of your workspace.
4:41
I'm going to create an error in my
code by deleting the end of line 17,
4:43
the closing </a> and </li> tags.
4:49
Now, several closing tags have
turned red in my workspace,
4:53
indicating an error, but
I might not understand why.
4:58
I could try copying my code and
pasting into an HTML validator,
5:02
such as the one linked in the
Teacher's Notes below this video.
5:07
However, as a beginner,
5:13
I might not understand the error
messages I'm seeing here. If you're
5:15
thinking, "hmm, I don't understand
what's happening in line 17 and 18
5:19
of my code. I better ask someone,"
you might take a snapshot of your
5:25
code so you can share that version
with the Treehouse community.
5:29
Sharing a snapshot of your code isn't
required to get help, but it might be
5:34
useful on a large project such as the
ones found in the later units of the
5:39
Full Stack JavaScript Techdegree,
where you're working with a large
5:44
number of files. I'll demo sharing
new snapshot in a bit when we
5:48
take a look at posting questions
to the Treehouse community.
5:54
Note that you're limited to
a maximum of five snapshots.
5:58
So once you get a problem solved, you'll
probably want to delete that snapshot.
6:02
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