1
00:00:00,330 --> 00:00:03,300
Now that we've learned how to
work with files in Workspaces,

2
00:00:03,300 --> 00:00:06,220
let's take a look at the text editor.

3
00:00:06,220 --> 00:00:11,770
A text editor is a special application
that allows you to edit text.

4
00:00:11,770 --> 00:00:16,550
This is different than a program like
Microsoft Word, or Google Docs, or

5
00:00:16,550 --> 00:00:21,670
Apple Pages that adds lots of
special formatting like bolding or

6
00:00:21,670 --> 00:00:23,500
italicized text.

7
00:00:23,500 --> 00:00:28,210
A text editor allows you to edit plain
text, which is what you want for

8
00:00:28,210 --> 00:00:29,320
editing code.

9
00:00:29,320 --> 00:00:30,930
Let's take a closer look.

10
00:00:30,930 --> 00:00:35,490
The most prominent feature of
Workspaces is the text editing area

11
00:00:35,490 --> 00:00:37,600
in the middle of the screen.

12
00:00:37,600 --> 00:00:43,830
Here I have a file open called index.html,
but this could really be any file.

13
00:00:43,830 --> 00:00:47,890
And you'll notice that when you
have a file open in Workspaces

14
00:00:47,890 --> 00:00:50,670
you get what's called syntax highlighting.

15
00:00:50,670 --> 00:00:54,280
In other words,
Workspaces will color the text

16
00:00:54,280 --> 00:00:59,790
in different colors depending on what
sort of language tokens it encounters.

17
00:00:59,790 --> 00:01:06,240
For example, in HTML,
the HTML tags are highlighted in blue,

18
00:01:06,240 --> 00:01:11,290
while the HTML attributes
are highlighted in red, and

19
00:01:11,290 --> 00:01:16,990
the HTML values for
those attributes are in this green color.

20
00:01:16,990 --> 00:01:22,080
Syntax highlighting like this makes
it much easier to read your code.

21
00:01:22,080 --> 00:01:26,110
In addition,
if you make an error in your code,

22
00:01:26,110 --> 00:01:31,410
such as leaving off the closing
angle bracket for this body tag,

23
00:01:31,410 --> 00:01:37,225
Workspaces will start to highlight
various errors that it's encountering.

24
00:01:37,225 --> 00:01:40,047
So, you'll notice when there's
a problem with this tag,

25
00:01:40,047 --> 00:01:45,107
it's encountering the next language token
and finding this closing tag here, but

26
00:01:45,107 --> 00:01:49,317
it says, wait a minute,
this code doesn't make any sense.

27
00:01:49,317 --> 00:01:52,767
You shouldn't have this kind
of an attribute here, and so

28
00:01:52,767 --> 00:01:55,997
there must be some kind of
a problem with this code.

29
00:01:55,997 --> 00:01:58,727
When you see errors like
that highlighted in red,

30
00:01:58,727 --> 00:02:03,500
it's much easier to fix
the problem when you encounter it.

31
00:02:03,500 --> 00:02:06,850
Workspaces also has code completion.

32
00:02:06,850 --> 00:02:13,100
So when I start to type something like a
div tag, it will suggest things as I type.

33
00:02:13,100 --> 00:02:20,010
And when I find the tag that I want, I can
close a tag with a closing angle bracket.

34
00:02:20,010 --> 00:02:25,890
And Workspaces will automatically create
the closing tag to complete the element.

35
00:02:26,930 --> 00:02:30,210
This makes it easy to type much faster.

36
00:02:31,780 --> 00:02:37,060
Another important feature of any
text editor is the tabs and spaces.

37
00:02:37,060 --> 00:02:39,210
So, down here at the bottom,

38
00:02:39,210 --> 00:02:44,760
you can see that right now we're set
to spaces, but you can switch to tabs.

39
00:02:44,760 --> 00:02:51,293
And what that is is when you indent your
code, Workspaces, when it's set to spaces,

40
00:02:51,293 --> 00:02:56,820
will put in spaces just like
I'm highlighting right here.

41
00:02:56,820 --> 00:03:02,410
So all of this code that's indented is
just using a simple space character.

42
00:03:02,410 --> 00:03:07,225
However you can also switch
to tabs simply by clicking

43
00:03:07,225 --> 00:03:10,756
on the button down in the bottom right.

44
00:03:10,756 --> 00:03:14,949
So right now it's set to tabs,
but I'll keep it on spaces.

45
00:03:14,949 --> 00:03:17,800
You can also set the number of spaces or

46
00:03:17,800 --> 00:03:22,710
tabs to indent by clicking on
this number and changing it.

47
00:03:22,710 --> 00:03:27,780
So, for example, if you prefer more space
when you indent your code, you could

48
00:03:27,780 --> 00:03:33,520
set it to something like four, and
now when you start at a line and

49
00:03:33,520 --> 00:03:40,010
hit the tab key Workspaces will
indent much further by four spaces.

50
00:03:41,050 --> 00:03:45,700
Another important feature of any
text editor is the shortcut keys.

51
00:03:45,700 --> 00:03:50,280
Using shortcut keys allows you to
work with your text much faster.

52
00:03:50,280 --> 00:03:54,170
Workspaces has all the traditional
shortcut keys that you might expect in

53
00:03:54,170 --> 00:03:55,480
any text editor.

54
00:03:55,480 --> 00:03:58,870
For example when I hit command S on a Mac,
or

55
00:03:58,870 --> 00:04:03,420
control S on a PC,
I can save my current file.

56
00:04:03,420 --> 00:04:06,570
At the top of a tab in Workspaces

57
00:04:06,570 --> 00:04:09,710
where the X button appears
when you're hovered over.

58
00:04:09,710 --> 00:04:13,470
You'll notice that right
now I have an orange dot,

59
00:04:13,470 --> 00:04:17,830
that means that I have
unsaved changes in this file.

60
00:04:17,830 --> 00:04:22,140
But, if I hit command S on a Mac,
or control S on a PC,

61
00:04:22,140 --> 00:04:25,430
it will save the current file.

62
00:04:25,430 --> 00:04:28,600
And that orange dot will disappear.

63
00:04:28,600 --> 00:04:34,250
I can also highlight text and
then hit the tab key to indent it.

64
00:04:34,250 --> 00:04:40,090
Or shift tab, to indent backwards and
remove some of that spacing.

65
00:04:41,480 --> 00:04:46,800
If I open a CSS file, I can highlight

66
00:04:46,800 --> 00:04:51,390
parts of the file and
then use command slash on my Mac

67
00:04:52,740 --> 00:04:58,890
to do block commenting so
I can comment out all of that code,

68
00:04:58,890 --> 00:05:02,530
or I can hit it again
to uncomment that code.

69
00:05:03,930 --> 00:05:07,680
Workspaces also has a find and
replace feature.

70
00:05:07,680 --> 00:05:14,841
So for example, I can hit Cmd+F to
find different parts of my text.

71
00:05:14,841 --> 00:05:17,810
So for example maybe I was looking for
all of the div tags.

72
00:05:17,810 --> 00:05:24,850
So I could just type in div and now I
have all of the div tags highlighted.

73
00:05:24,850 --> 00:05:27,510
There are many shortcuts in Workspaces.

74
00:05:27,510 --> 00:05:32,060
And to learn more about them,
you can use the menu bar at the top.

75
00:05:32,060 --> 00:05:37,570
So, when I click on the menu bar,
you can see that you can open a file

76
00:05:37,570 --> 00:05:42,900
using this shortcut, or save a file,
using these short cuts.

77
00:05:44,090 --> 00:05:47,660
There are lots of editing
commands as well, and

78
00:05:47,660 --> 00:05:49,330
all of the short cuts are listed there.

79
00:05:51,130 --> 00:05:54,200
And the view menu has
several short cuts as well.

80
00:05:55,870 --> 00:06:00,091
Learning these short cut keys will help
you work with Workspaces much faster.