1
00:00:08,670 --> 00:00:11,545
Hi, today we're finally going
to write some code, and

2
00:00:11,545 --> 00:00:15,170
I'm gonna walk you through it by
showing you how you can use an editor.

3
00:00:15,170 --> 00:00:18,942
One of the biggest pitfalls I've seen many
of my students make is that they listen

4
00:00:18,942 --> 00:00:22,548
too carefully to what I'm saying,
rather than actually trying to dive in and

5
00:00:22,548 --> 00:00:24,510
start coding, themselves.

6
00:00:24,510 --> 00:00:27,750
So while I encourage you to sit back and
watch what I'm gonna do right now,

7
00:00:27,750 --> 00:00:30,390
in a little bit I'm hoping you'll
sit down and you'll code with me.

8
00:00:31,970 --> 00:00:34,850
The first step is that you need
to create and edit your files.

9
00:00:36,020 --> 00:00:39,170
One of the biggest pitfalls you're
going to encounter is that you'll

10
00:00:39,170 --> 00:00:43,030
be saving your files all over the place,
you're not able to find them later on.

11
00:00:43,030 --> 00:00:45,880
So decide how you'll be
organizing your files.

12
00:00:45,880 --> 00:00:47,170
What are you gonna name your folder?

13
00:00:47,170 --> 00:00:49,040
Where are you gonna put it?

14
00:00:49,040 --> 00:00:52,400
Second, you need to decide
on a naming convention.

15
00:00:52,400 --> 00:00:56,650
This is just a fancy way of saying
decide how you're gonna name your files.

16
00:00:56,650 --> 00:01:00,790
So although many people use a Mac, and
you're allowed to use spaces in your file

17
00:01:00,790 --> 00:01:04,410
names, this is not something you
wanna do when you're writing code.

18
00:01:04,410 --> 00:01:07,000
So decide that if you have two
words you want to put together,

19
00:01:07,000 --> 00:01:11,620
you're going to use underscores to connect
them or use something we call CamelCase,

20
00:01:11,620 --> 00:01:14,430
where you capitalize the first
letter of each word.

21
00:01:14,430 --> 00:01:16,970
Just remember, never use spaces and

22
00:01:16,970 --> 00:01:21,150
be very consistent about your
capitalization if you are going to use it.

23
00:01:21,150 --> 00:01:23,760
Finally, you need to decide on an editor.

24
00:01:23,760 --> 00:01:27,590
If using a Windows machine,
Notepad is already built in.

25
00:01:27,590 --> 00:01:32,560
You can also consider using Notepad++ or
Sublime.

26
00:01:32,560 --> 00:01:36,165
If you're using a Mac,
TextEdit is the default editor,

27
00:01:36,165 --> 00:01:39,065
although many people
also use TextWrangler.

28
00:01:39,065 --> 00:01:42,515
I'll be using Sublime throughout
the rest of the course, but for today

29
00:01:42,515 --> 00:01:46,455
I will be showing you examples of how to
edit in Notepad and TextEdit as well.

30
00:01:47,715 --> 00:01:51,265
So in order to get started, let's quickly
review the five steps that we're going to

31
00:01:51,265 --> 00:01:53,472
do, a few of them repeatedly.

32
00:01:53,472 --> 00:01:57,960
You're gonna start by opening your editor,
and then you're going to save your file,

33
00:01:57,960 --> 00:02:02,520
add some content, save the file again,
and open it in your browser.

34
00:02:02,520 --> 00:02:04,050
I want to walk you through
a quick example, and

35
00:02:04,050 --> 00:02:06,010
I'm going to use Sublime to do it.

36
00:02:06,010 --> 00:02:08,012
But don't worry, I'm going to go ahead and

37
00:02:08,012 --> 00:02:10,130
show you some of the other
ways to do it as well.

38
00:02:10,130 --> 00:02:13,260
So I've brought up my Sublime editor here,
a nice black file.

39
00:02:13,260 --> 00:02:15,090
I'm going to start off by going to file.

40
00:02:18,008 --> 00:02:20,878
And save.

41
00:02:20,878 --> 00:02:26,130
And I'm gonna name it just firstpage.html.

42
00:02:26,130 --> 00:02:28,697
Now one of the things you need
to decide right away is where

43
00:02:28,697 --> 00:02:30,270
you're going to save this.

44
00:02:30,270 --> 00:02:33,710
Hopefully you've decided on this
before you even started working.

45
00:02:33,710 --> 00:02:37,570
I'm gonna keep mine in a folder called
webpages that I've put on my desktop.

46
00:02:37,570 --> 00:02:39,940
But you can pick anything here,
or even if you want to,

47
00:02:39,940 --> 00:02:43,830
if you click off to the side here,
you can create a brand new folder.

48
00:02:43,830 --> 00:02:47,080
What you don't want to do is save
all of your code on your desktop.

49
00:02:48,150 --> 00:02:49,030
Let's go Save.

50
00:02:50,750 --> 00:02:53,690
And now, while there are many times that
I'm gonna force you to sit through and

51
00:02:53,690 --> 00:02:57,520
watch me type horribly on the screen,
this one, just to save some time,

52
00:02:57,520 --> 00:03:02,260
I'm gonna go ahead and cheat and paste
in some code that I've already written.

53
00:03:02,260 --> 00:03:07,470
As you can see, I have my doc type,
the head section and the body.

54
00:03:07,470 --> 00:03:10,310
In the head,
I've included my encoding and my title.

55
00:03:10,310 --> 00:03:11,790
In the body,
we're just going to say hello.

56
00:03:14,180 --> 00:03:16,760
I went in and I saved it using Ctrl+S.

57
00:03:16,760 --> 00:03:20,620
You can always do File > Save, but
I find Ctrl+S is much quicker.

58
00:03:20,620 --> 00:03:23,740
And for every editor you use
there's these little helpful

59
00:03:23,740 --> 00:03:26,210
keys to help you know wether or
not you've changed anything.

60
00:03:26,210 --> 00:03:29,831
So if you look right now at
firstpage.html, which might be hard for

61
00:03:29,831 --> 00:03:32,510
you to see, if I were to go in and
change anything.

62
00:03:34,970 --> 00:03:39,057
You actually get a little circle to
let you know that you haven't saved in

63
00:03:39,057 --> 00:03:40,000
a little while.

64
00:03:40,000 --> 00:03:44,420
So I've gone ahead, I've created content
and now it's time for me to open my page.

65
00:03:44,420 --> 00:03:47,800
One way to do it is to head
over here to my folder.

66
00:03:47,800 --> 00:03:50,920
And oh, here's firstpage.HTML.

67
00:03:50,920 --> 00:03:54,380
For me, there's a little icon
of Chrome off to the side.

68
00:03:54,380 --> 00:03:56,670
For you, it might be a different browser.

69
00:03:56,670 --> 00:04:01,300
I'm going to go ahead and click on it and
bring up my FirstPage, and I have success.

70
00:04:03,720 --> 00:04:07,340
I cannot stress enough that most of
the time when you type something at first,

71
00:04:07,340 --> 00:04:09,690
it's actually not going to work for you.

72
00:04:09,690 --> 00:04:11,960
For me luckily,
I have the power of editing.

73
00:04:11,960 --> 00:04:15,730
You have no idea that it actually took me
a few attempts to get that file to work,

74
00:04:15,730 --> 00:04:17,830
because I was messing
around with some things.

75
00:04:17,830 --> 00:04:19,310
Throughout the entire course,

76
00:04:19,310 --> 00:04:22,270
I'm going to try to show you areas
where you might have a problem.

77
00:04:22,270 --> 00:04:26,110
Hopefully you won't,but if you do,
they're all very simple to fix.

78
00:04:26,110 --> 00:04:29,370
One of the most common problems is
that when you right-click on the file,

79
00:04:29,370 --> 00:04:33,320
instead of opening up nicely in the
browser, it opens up your editor instead.

80
00:04:33,320 --> 00:04:38,040
If you'd like to fix that, all you need
to do is right-click on the file and

81
00:04:38,040 --> 00:04:39,420
select Open With.

82
00:04:40,560 --> 00:04:44,580
Another issue that happens quite a bit is
that when you open up your file, instead

83
00:04:44,580 --> 00:04:49,750
of seeing a nicely formatted web page,
instead you actually see all of your tags.

84
00:04:49,750 --> 00:04:53,100
When that happens,
you need to check your file extension and

85
00:04:53,100 --> 00:04:57,988
make sure that it says .html, and
not something like .text or .rtf.

86
00:04:57,988 --> 00:05:02,400
Another issue that happens quite a bit
is that you change your code, but

87
00:05:02,400 --> 00:05:04,840
your page looks exactly the same.

88
00:05:04,840 --> 00:05:07,750
There are two reasons that
this tends to happen.

89
00:05:07,750 --> 00:05:10,950
One is that you have to do something
called refresh your browser.

90
00:05:10,950 --> 00:05:13,050
This just means you upload the contents.

91
00:05:13,050 --> 00:05:17,090
The second thing that happens quite
often is that you forgot to verify your

92
00:05:17,090 --> 00:05:17,750
file name.

93
00:05:17,750 --> 00:05:19,770
Let me show you an example of this one.

94
00:05:19,770 --> 00:05:21,800
So let's go back to our original file.

95
00:05:21,800 --> 00:05:24,750
As you can see,
I have Hello World written here.

96
00:05:24,750 --> 00:05:28,166
This is a very computer
science-y type thing to say and

97
00:05:28,166 --> 00:05:33,380
since I'm trying to seem more normal,
I'm gonna change this to Hello Everybody.

98
00:05:33,380 --> 00:05:35,710
I go in and I'm gonna Save my file.

99
00:05:35,710 --> 00:05:36,630
Done.

100
00:05:36,630 --> 00:05:41,000
Well, when I go back over to my web page,
it still says Hello World.

101
00:05:41,000 --> 00:05:44,430
It didn't change and
I'm kind of upset about that.

102
00:05:44,430 --> 00:05:48,740
So, now I remember it's often
necessary to refresh your page.

103
00:05:48,740 --> 00:05:50,680
There number ways you can do that,

104
00:05:50,680 --> 00:05:55,130
you can typically go to the little
circular area up here and click refresh.

105
00:05:56,166 --> 00:06:01,530
You can right-click and click on Reload or
you can also go to View, sorry.

106
00:06:01,530 --> 00:06:03,830
You can also do it through
the tool bar on top.

107
00:06:03,830 --> 00:06:06,330
So, I'm gonna go ahead and
refresh right here.

108
00:06:06,330 --> 00:06:08,250
And you can see now I
have the Hello Everybody.

109
00:06:09,340 --> 00:06:14,280
The other problem I mentioned is that
sometimes people change their file name.

110
00:06:14,280 --> 00:06:16,820
So maybe you aren't working
on your FirstPage any more.

111
00:06:16,820 --> 00:06:25,340
So you decided I'm going to save
this as File > Save As second page.

112
00:06:27,550 --> 00:06:29,590
Save it.

113
00:06:29,590 --> 00:06:34,970
I'm gonna go back over here and
I'm gonna refresh the file.

114
00:06:34,970 --> 00:06:35,795
Hello everybody.

115
00:06:39,137 --> 00:06:40,637
Well, nothing happened.

116
00:06:40,637 --> 00:06:44,930
You are gonna find this happening over and
over and over again.

117
00:06:44,930 --> 00:06:48,107
When you're dealing with a lot
of files all at the same time,

118
00:06:48,107 --> 00:06:52,345
you have to make sure that the one you're
looking at on the browser matches the one

119
00:06:52,345 --> 00:06:53,800
that you've been typing.

120
00:06:53,800 --> 00:06:56,234
Because I changed the name of my file,

121
00:06:56,234 --> 00:07:00,045
I need to remember to change it
up here in the URL bar as well.

122
00:07:07,220 --> 00:07:09,880
Boom.

123
00:07:09,880 --> 00:07:13,074
Another issue that comes up quite
frequently is this idea that you get,

124
00:07:13,074 --> 00:07:15,790
what we'll call, weird characters.

125
00:07:15,790 --> 00:07:17,160
One of the number one reasons for

126
00:07:17,160 --> 00:07:20,710
this happening is my old favorite,
copy and paste.

127
00:07:20,710 --> 00:07:24,030
Whenever I give you code and
you're looking at it through PowerPoint,

128
00:07:24,030 --> 00:07:28,090
the problem is when you copy and paste it,
a lot of the characters don't translate

129
00:07:28,090 --> 00:07:32,070
exactly the way you hoped them to, and
you get what we call weird characters.

130
00:07:32,070 --> 00:07:34,570
The number one culprit is the quotes.

131
00:07:34,570 --> 00:07:37,230
So whenever you're typing and you have
some sort of weird thing you're not

132
00:07:37,230 --> 00:07:40,830
expecting, go back in and
try typing the code in by hand.

133
00:07:42,330 --> 00:07:45,450
So I've shown you how to create and
edit a file in Sublime.

134
00:07:45,450 --> 00:07:48,800
But I wanna make sure that
everyone has a chance to see

135
00:07:48,800 --> 00:07:52,450
how I can create files using the editors
that they have on their own computer.

136
00:07:52,450 --> 00:07:56,940
So I'm also going to show you an example
in TextEdit and also in Notepad.

137
00:07:56,940 --> 00:08:00,108
I really hope when you watch these
examples, you'll have your computer out,

138
00:08:00,108 --> 00:08:01,810
and you'll type along with me.

139
00:08:01,810 --> 00:08:06,490
Go ahead and pause, stop things,
don't go ahead in the video until you feel

140
00:08:06,490 --> 00:08:08,790
confident that you're at the point
that I've reached myself.

141
00:08:11,510 --> 00:08:12,160
Hi everyone!

142
00:08:12,160 --> 00:08:15,160
Now we're gonna go ahead and
make a file with TextEdit.

143
00:08:15,160 --> 00:08:17,610
And if I wanted to be evil,
I would go through and

144
00:08:17,610 --> 00:08:21,810
show you a very quick, simple example
of making a file in TextEdit.

145
00:08:21,810 --> 00:08:26,360
But instead, I'm gonna be very honest with
you and admit that it just took me about

146
00:08:26,360 --> 00:08:30,720
15 or 20 minutes to figure out how to
make a really simple file in TextEdit.

147
00:08:30,720 --> 00:08:33,990
So first,
let me show you what I did wrong.

148
00:08:33,990 --> 00:08:34,850
All right?

149
00:08:34,850 --> 00:08:39,250
I'm gonna go ahead and
paste in my code for my very simple page.

150
00:08:39,250 --> 00:08:40,080
Okay, let's get rid of this.

151
00:08:41,450 --> 00:08:45,150
There we go.
We've just got our header and our content.

152
00:08:45,150 --> 00:08:48,620
So, you can type this in as we go along,
or you can wait.

153
00:08:48,620 --> 00:08:51,330
So it's time for me to save the file.

154
00:08:51,330 --> 00:08:55,920
And what I need to do is I need to make
sure I'm saving in the proper folder

155
00:08:55,920 --> 00:08:56,620
with the file name.

156
00:08:56,620 --> 00:09:02,010
So I am going to go ahead and
call this FirstPage and

157
00:09:02,010 --> 00:09:07,410
I am going to go down here and I want to
make sure that I save this as a web page.

158
00:09:07,410 --> 00:09:11,910
So one of the options is .html,
so I am going to click on this.

159
00:09:11,910 --> 00:09:14,397
I know have my firstpage.html,

160
00:09:14,397 --> 00:09:18,560
it's in the folder that I want and I
really feel like we should be good to go.

161
00:09:18,560 --> 00:09:20,380
So I am going to go ahead and save it.

162
00:09:20,380 --> 00:09:25,670
Now, I'm going to go over here to
my web pages folder, open it up.

163
00:09:25,670 --> 00:09:27,680
And it's going to open up in Chrome.

164
00:09:27,680 --> 00:09:28,750
So, let's see how it goes.

165
00:09:30,520 --> 00:09:34,224
That is not what I was hoping for
when we were first taping this segment,

166
00:09:34,224 --> 00:09:37,510
and it took me a really long time
to figure out what was going on.

167
00:09:37,510 --> 00:09:41,321
The first thing I went to check,
let me close this up,

168
00:09:41,321 --> 00:09:46,170
is I want to make sure that my file
extension really had been .html.

169
00:09:46,170 --> 00:09:50,650
And it was, there wasn't a .txt or
a .rtf after it.

170
00:09:50,650 --> 00:09:51,690
The next thing I went in and

171
00:09:51,690 --> 00:09:55,750
checked is that all of my quotes
were going the right way.

172
00:09:55,750 --> 00:09:58,940
So let's go ahead and put these in,
because if you remember,

173
00:09:58,940 --> 00:10:04,640
I'm always telling you that copy and
paste can sometimes give you bad quotes.

174
00:10:04,640 --> 00:10:06,160
So we can go back again.

175
00:10:07,430 --> 00:10:08,310
Still no luck.

176
00:10:09,510 --> 00:10:14,010
If you're going to be using TextEdit,
you actually need to go in and

177
00:10:14,010 --> 00:10:16,780
make some changes to the TextEdit Program.

178
00:10:16,780 --> 00:10:19,160
It has nothing to do
with what you're typing.

179
00:10:19,160 --> 00:10:21,420
It has to do with the TextEdit Program.

180
00:10:21,420 --> 00:10:27,050
So I'm gonna go ahead, copy this just
in case I lose it, and clear it out.

181
00:10:27,050 --> 00:10:31,414
And I'm gonna go up to TextEdit,
select Preferences, and

182
00:10:31,414 --> 00:10:34,260
you can see that we have two options.

183
00:10:34,260 --> 00:10:37,110
New Documents, and Open and Save.

184
00:10:37,110 --> 00:10:40,120
So one of the first things
I'm gonna say is hey,

185
00:10:40,120 --> 00:10:44,790
whenever I have a new document,
I would like it to be in plain text.

186
00:10:44,790 --> 00:10:48,050
Not rtf, or rich text, but plain text.

187
00:10:48,050 --> 00:10:52,270
The second thing that you want to
do is go over here to opening.

188
00:10:53,370 --> 00:10:56,160
See the display HTML files is HTML code?

189
00:10:56,160 --> 00:10:58,860
We're going to go ahead and click on that.

190
00:10:58,860 --> 00:11:03,470
And then lastly the most important
thing is when you save your files,

191
00:11:03,470 --> 00:11:05,740
we want to save it as utf8.

192
00:11:07,920 --> 00:11:09,530
So I am going to pause here for a second,

193
00:11:09,530 --> 00:11:12,820
just a second,
while you look at your own TextEdit menu.

194
00:11:12,820 --> 00:11:16,910
You want to make sure that you
have these boxes checked and

195
00:11:16,910 --> 00:11:19,170
you've changed it to unicode, utf8.

196
00:11:20,500 --> 00:11:21,270
Okay?

197
00:11:21,270 --> 00:11:24,920
If you've messed things up, go down to
restore all defaults and try it again.

198
00:11:24,920 --> 00:11:27,260
I'm gonna close this up.

199
00:11:27,260 --> 00:11:32,340
I'm gonna go ahead and
do New, paste my code in.

200
00:11:32,340 --> 00:11:34,436
Ooh, that's very small for
you, but that's okay.

201
00:11:34,436 --> 00:11:39,180
Do File > Save.

202
00:11:39,180 --> 00:11:45,249
And let's call it FirstPage2.html.

203
00:11:45,249 --> 00:11:49,920
You can see right away it says,
do you want to use HTML extension or

204
00:11:49,920 --> 00:11:50,720
the dot text?

205
00:11:50,720 --> 00:11:53,410
And I'm gonna tell it, use HTML.

206
00:11:53,410 --> 00:11:57,652
Before I click this though I'm
wanna point out that down here,

207
00:11:57,652 --> 00:12:01,670
it's showing that it's going
to save as unicode utf.8.

208
00:12:01,670 --> 00:12:05,420
I can get rid of this warning,
if I want to, by unclicking this,

209
00:12:05,420 --> 00:12:07,720
if no extension provided, use .txt.

210
00:12:07,720 --> 00:12:09,970
So we're gonna use html.

211
00:12:09,970 --> 00:12:13,220
Let's go over here, let's cross our
fingers, let's hope for the best.

212
00:12:14,500 --> 00:12:16,670
And now I have a successful page.

213
00:12:16,670 --> 00:12:19,950
So if you are gonna be using TextEdit,
there's not really much you need to do,

214
00:12:19,950 --> 00:12:22,340
except for the first time you set it up.

215
00:12:22,340 --> 00:12:24,380
Make sure you go into the preferences.

216
00:12:24,380 --> 00:12:31,670
From there I can now go in,
make changes, we did it.

217
00:12:33,400 --> 00:12:36,190
Save, and refresh.

218
00:12:37,270 --> 00:12:40,860
So hopefully now you can
successfully save and edit a file.

219
00:12:43,610 --> 00:12:48,280
Okay, so let's say that you
are using a PC to create your files.

220
00:12:48,280 --> 00:12:51,850
What you wanna do is you probably
want to use Notepad at first since

221
00:12:51,850 --> 00:12:55,600
it's the free version of the editor
that's already on your machine.

222
00:12:55,600 --> 00:12:56,780
The first thing I did,

223
00:12:56,780 --> 00:13:00,160
was that I made a folder right on
the desktop where I can keep my files.

224
00:13:00,160 --> 00:13:03,980
I know it's small, you probably can't
see it, but it's called web pages.

225
00:13:03,980 --> 00:13:06,360
If you don't know how to make a folder,
just so

226
00:13:06,360 --> 00:13:10,960
you know, you can right-click on the desk
top, go to New and Create a folder.

227
00:13:12,230 --> 00:13:15,370
Once you've created the folder where
you want to save your files, I'm,

228
00:13:15,370 --> 00:13:19,810
right off the bat,
going to go ahead and say File > Save,

229
00:13:20,890 --> 00:13:25,990
and I'm going to name this firstpage.html.

230
00:13:25,990 --> 00:13:29,960
It's very,
very important that you include the .html.

231
00:13:29,960 --> 00:13:31,460
If you don't include that,

232
00:13:31,460 --> 00:13:35,210
the computer's going to think you're just
working on any other old type of file.

233
00:13:35,210 --> 00:13:41,380
So I'm gonna go down here and change
it from text documents to all files.

234
00:13:41,380 --> 00:13:43,300
Go ahead and save.

235
00:13:43,300 --> 00:13:46,920
Oops, it already exists,
but I'm gonna say okay.

236
00:13:46,920 --> 00:13:50,170
Now, it's time for
me to put in some content.

237
00:13:50,170 --> 00:13:53,728
I'm gonna cheat a little bit here and
just copy and paste in my content,

238
00:13:53,728 --> 00:13:57,000
even though you're gonna have
to type it in bit by bit.

239
00:13:57,000 --> 00:14:01,730
So again, I have my doctype,
my HTML language equals English,

240
00:14:01,730 --> 00:14:06,010
meta charset equals UTF-8,
my title and my content.

241
00:14:06,010 --> 00:14:11,260
Just to be safe, I'm gonna go ahead
in here and put my quotes back in.

242
00:14:11,260 --> 00:14:15,100
Because quotes always make me nervous when
I do copy and paste, that maybe I've put

243
00:14:15,100 --> 00:14:18,330
in some sort of character that my
editor isn't going to recognize.

244
00:14:19,460 --> 00:14:22,170
Now that I'm pretty happy and sure that
I've got the things that I want in my

245
00:14:22,170 --> 00:14:24,200
file, I'm going to go ahead save it again,

246
00:14:25,870 --> 00:14:30,175
go into my folder, and
click on the FirstPage.

247
00:14:32,680 --> 00:14:33,710
And there we go.

248
00:14:33,710 --> 00:14:37,565
So now, every time that you're going
to change your file you can just keep

249
00:14:37,565 --> 00:14:39,630
both windows open if you have the room.

250
00:14:39,630 --> 00:14:40,470
Make your changes.

251
00:14:45,380 --> 00:14:49,840
Job, I have a file.

252
00:14:49,840 --> 00:14:52,630
Save.

253
00:14:52,630 --> 00:14:53,940
And reload.

254
00:14:53,940 --> 00:14:54,710
Nice job.

255
00:14:54,710 --> 00:14:56,150
You've made a file using Notepad.