1
00:00:00,890 --> 00:00:05,820
Many aspects of Treehouse's video
learning such as Teacher's Notes,

2
00:00:05,820 --> 00:00:11,950
Questions, or the Video Transcript
are universal to all Treehouse videos.

3
00:00:11,950 --> 00:00:17,880
However, Workspaces are only used in
videos featuring coding exercises.

4
00:00:17,880 --> 00:00:23,850
So you won't encounter Workspaces
in UX design courses, for example.

5
00:00:23,850 --> 00:00:27,783
Since Introduction to HTML and
CSS is a coding course,

6
00:00:27,783 --> 00:00:31,802
the instructor will be working
on a small web project and

7
00:00:31,802 --> 00:00:37,040
students use a Workspace to practice
coding alongside the instructor.

8
00:00:38,270 --> 00:00:41,537
The first video in the 
Introduction to HTML and

9
00:00:41,537 --> 00:00:45,910
CSS course looks like it contains
a Launch Workspace button.

10
00:00:47,110 --> 00:00:52,500
So let's press it and a Workspace
pops open in a new browser window.

11
00:00:52,500 --> 00:00:56,448
Treehouse Workspaces are built
to resemble an IDE or

12
00:00:56,448 --> 00:00:59,509
Integrated Development Environment.

13
00:01:00,560 --> 00:01:04,370
That's what we call the software
developers use to write code.

14
00:01:05,590 --> 00:01:10,130
You don't have to have any special
software on your computer to run

15
00:01:10,130 --> 00:01:12,576
a Treehouse Workspace, however.

16
00:01:12,576 --> 00:01:16,710
On the left side of my Workspace,
I see files and folders.

17
00:01:17,750 --> 00:01:22,507
You'll notice that the file names are 
all in lowercase and contain no spaces,

18
00:01:22,507 --> 00:01:24,790
and that's no accident.

19
00:01:24,790 --> 00:01:30,737
Web file names tend to be limited
in most cases to lowercase letters,

20
00:01:30,737 --> 00:01:34,461
to use hyphens rather than 
spaces to separate words,

21
00:01:34,461 --> 00:01:38,351
and to contain a dot before
the filename extension,

22
00:01:38,351 --> 00:01:46,486
such as .css for a CSS file,
or .jpg for a JPEG image.

23
00:01:46,486 --> 00:01:48,840
The window on the right 
looks blank, but

24
00:01:48,840 --> 00:01:52,280
that's because I don't
have a file selected.

25
00:01:52,280 --> 00:01:58,400
If I click on portland.jpg, I can see
the image load on the right side.

26
00:01:59,690 --> 00:02:06,390
I can't edit this image, but I'll 
try instead clicking on index.html.

27
00:02:06,390 --> 00:02:09,794
Here's some code that I can 
read, highlight, and edit.

28
00:02:11,604 --> 00:02:16,860
The Workspace text might look too 
large or too small for your tastes.

29
00:02:16,860 --> 00:02:21,489
So a handy keyboard shortcut to
know here is Command plus to

30
00:02:21,489 --> 00:02:26,600
increase the text size, or Command 
minus to decrease the size.

31
00:02:28,500 --> 00:02:31,925
If that key command
seems hard to remember,

32
00:02:31,925 --> 00:02:35,175
you can find it up top
under the View menu.

33
00:02:35,175 --> 00:02:37,972
I'm not going to cover all
of these menu options,

34
00:02:37,972 --> 00:02:42,160
as you'll encounter most of
them during Treehouse videos.

35
00:02:42,160 --> 00:02:47,210
But note that many of these
keyboard shortcuts are common to

36
00:02:47,210 --> 00:02:52,290
other software like Command F 
for find, Command S for save, or 

36b
00:02:52,290 --> 00:02:57,590
Command Z for undo. If you're
not a Mac user like I am,

37
00:02:57,590 --> 00:02:59,943
these shortcuts are 
the same on a PC.

38
00:02:59,943 --> 00:03:02,860
You'll just hold Control
instead of Command.

39
00:03:05,030 --> 00:03:09,290
You might also want to close
the console if you're not using it.

40
00:03:09,290 --> 00:03:13,920
Developers often write JavaScript
directly in the console.

41
00:03:13,920 --> 00:03:18,186
But we won't encounter JavaScript 
in a course called Introduction to 

42
00:03:18,186 --> 00:03:20,760
HTML and CSS, so I'll click the X.

43
00:03:21,860 --> 00:03:26,617 
And now I can see more 
of my HTML code. Finally,

44
00:03:26,617 --> 00:03:31,970
how about these icons in the upper 
right corner of the Workspace?

45
00:03:31,970 --> 00:03:34,340
The eyeball means preview.

46
00:03:34,340 --> 00:03:38,808
And it will load a working version 
of your web page based on the files 

47
00:03:38,808 --> 00:03:40,770
in your Workspace in 
a new browser tab.

48
00:03:42,000 --> 00:03:46,734
The preview looks like it's found
on the web at treehouseapp.com, 

49
00:03:46,734 --> 00:03:49,260
but that's a temporary address.

50
00:03:49,260 --> 00:03:52,653
Once you quit your Workspace,
the preview stops working.

51
00:03:54,419 --> 00:03:57,830
The icon with a small arrow means Fork.

52
00:03:57,830 --> 00:04:01,270
And that's a great term for
developers to understand.

53
00:04:01,270 --> 00:04:05,871
To fork a project means to make 
a copy of a project that you can edit 

54
00:04:05,871 --> 00:04:08,460
without affecting the original.

55
00:04:08,460 --> 00:04:12,875
So if you're wanting to make some
changes to your Workspace project, 

56
00:04:12,875 --> 00:04:17,004
but maybe aren't feeling so confident 
about how they'll go, fork it so

57
00:04:17,004 --> 00:04:19,300
you can return to the original later.

58
00:04:20,400 --> 00:04:25,060
I'll add v2 to the end of
my forked Workspace name.

59
00:04:26,440 --> 00:04:31,180
Now, both versions will be
available under My Workspaces.

60
00:04:31,180 --> 00:04:33,737
I'll show you where that is in just a bit.

61
00:04:36,995 --> 00:04:41,102
Finally, creating a snapshot
allows you to create a shareable

62
00:04:41,102 --> 00:04:43,900
version of your workspace.

63
00:04:43,900 --> 00:04:49,928
I'm going to create an error in my
code by deleting the end of line 17,

64
00:04:49,928 --> 00:04:53,148
the closing </a> and </li> tags.

65
00:04:53,148 --> 00:04:58,210
Now, several closing tags have
turned red in my workspace,

66
00:04:58,210 --> 00:05:02,792
indicating an error, but
I might not understand why.

67
00:05:02,792 --> 00:05:07,744
I could try copying my code and
pasting into an HTML validator,

68
00:05:07,744 --> 00:05:12,800
such as the one linked in the
Teacher's Notes below this video.

69
00:05:13,940 --> 00:05:15,440
However, as a beginner,

70
00:05:15,440 --> 00:05:19,960
I might not understand the error
messages I'm seeing here. If you're

71
00:05:19,960 --> 00:05:25,072
thinking, "hmm, I don't understand
what's happening in line 17 and 18

72
00:05:25,072 --> 00:05:29,959
of my code. I better ask someone,"
you might take a snapshot of your 

73
00:05:29,959 --> 00:05:34,580
code so you can share that version
with the Treehouse community.

74
00:05:34,580 --> 00:05:39,368
Sharing a snapshot of your code isn't
required to get help, but it might be

75
00:05:39,368 --> 00:05:44,536
useful on a large project such as the 
ones found in the later units of the 

76
00:05:44,536 --> 00:05:48,530
Full Stack JavaScript Techdegree, 
where you're working with a large 

77
00:05:48,530 --> 00:05:54,229
number of files. I'll demo sharing 
new snapshot in a bit when we 

78
00:05:54,229 --> 00:05:57,020
take a look at posting questions
to the Treehouse community.

79
00:05:58,510 --> 00:06:02,160
Note that you're limited to
a maximum of five snapshots.

80
00:06:02,160 --> 00:06:06,420
So once you get a problem solved, you'll
probably want to delete that snapshot.