1
00:00:00,000 --> 00:00:00,998


2
00:00:00,998 --> 00:00:04,491
[MUSIC PLAYING]

3
00:00:04,491 --> 00:00:11,527


4
00:00:11,527 --> 00:00:12,360
BRIAN YU: All right.

5
00:00:12,360 --> 00:00:13,790
So welcome everyone to CS50 Beyond.

6
00:00:13,790 --> 00:00:15,415
Thank you, David, for the introduction.

7
00:00:15,415 --> 00:00:16,020
I'm Brian.

8
00:00:16,020 --> 00:00:18,770
I'm a senior here studying
computer science and linguistics.

9
00:00:18,770 --> 00:00:23,370
And so goal of this whole week is going
to be to pick up where CS50 leaves off,

10
00:00:23,370 --> 00:00:26,060
and in particular dive into what
was the latter half of CS50--

11
00:00:26,060 --> 00:00:28,169
the design and implementation
of web applications,

12
00:00:28,169 --> 00:00:30,710
learning a little bit more about
web application development,

13
00:00:30,710 --> 00:00:34,670
getting some opportunity to see
some of the latest features, latest

14
00:00:34,670 --> 00:00:36,770
libraries with regards
to web application design

15
00:00:36,770 --> 00:00:39,230
and how to build them, and also to
get some hands-on practice with that

16
00:00:39,230 --> 00:00:39,950
as well.

17
00:00:39,950 --> 00:00:42,420
So before we dive into
the actual course material

18
00:00:42,420 --> 00:00:45,020
I thought I'd give you a brief overview
of the course-- where we're going,

19
00:00:45,020 --> 00:00:46,400
the things we're going
to be talking about,

20
00:00:46,400 --> 00:00:49,470
and also some of the logistics for how
this upcoming week is going to work.

21
00:00:49,470 --> 00:00:51,910
And so the topic list in brief
of the main things we're going

22
00:00:51,910 --> 00:00:53,450
to be talking about are shown here.

23
00:00:53,450 --> 00:00:56,660
We'll spend today talking about
HTML and CSS, which you might

24
00:00:56,660 --> 00:00:58,447
remember from the latter half of CS50.

25
00:00:58,447 --> 00:01:00,530
Today we'll review a little
bit of that for if you

26
00:01:00,530 --> 00:01:04,702
might be a little rusty on HTML and
CSS from when you took CS50 originally.

27
00:01:04,702 --> 00:01:06,410
But we'll also go
beyond it a little bit,

28
00:01:06,410 --> 00:01:10,790
looking at how we can take advantage of
some of the latest features of HTML 5,

29
00:01:10,790 --> 00:01:13,130
which was released in
2014, and also taking

30
00:01:13,130 --> 00:01:15,140
a look at some more
advanced features of CSS,

31
00:01:15,140 --> 00:01:17,760
figuring out how to style
our pages not only once,

32
00:01:17,760 --> 00:01:20,510
but also thinking about how do you
style our pages so that they're

33
00:01:20,510 --> 00:01:23,892
mobile responsive and look good on
phones and tablets and other devices.

34
00:01:23,892 --> 00:01:26,600
How do you style pages so they
look good when you print them out.

35
00:01:26,600 --> 00:01:28,475
How do you style pages
in such a way that you

36
00:01:28,475 --> 00:01:32,720
can have animations and change the
sizes of pages and they still look good.

37
00:01:32,720 --> 00:01:35,304
So all sorts of things with
regards to the style of our pages.

38
00:01:35,304 --> 00:01:37,261
Later this afternoon
we're going to take a look

39
00:01:37,261 --> 00:01:39,830
at Git, which is a piece of
version control software, which

40
00:01:39,830 --> 00:01:41,360
if you choose to continue
in computer science,

41
00:01:41,360 --> 00:01:44,000
you'll definitely use at some point
if you haven't used it already.

42
00:01:44,000 --> 00:01:45,958
And that can be a very
useful tool for managing

43
00:01:45,958 --> 00:01:48,590
different versions of our projects
and keeping track of changes

44
00:01:48,590 --> 00:01:51,282
and collaborating with other
people, as we'll soon see.

45
00:01:51,282 --> 00:01:53,990
Tomorrow we're going to-- and the
day after-- we're going to dive

46
00:01:53,990 --> 00:01:57,260
into writing web applications
with Python and Flask, again,

47
00:01:57,260 --> 00:02:00,020
something that you saw a little
bit of and got a teaser up CS50.

48
00:02:00,020 --> 00:02:02,720
But we'll dive beyond, looking at other
things that you can do with Flask,

49
00:02:02,720 --> 00:02:05,469
more advanced features, how to
build larger and more sophisticated

50
00:02:05,469 --> 00:02:06,365
web applications.

51
00:02:06,365 --> 00:02:08,240
And then in particular
looking at JavaScript,

52
00:02:08,240 --> 00:02:10,259
which has undergone
a number of revisions

53
00:02:10,259 --> 00:02:12,050
over the course of
recent years and looking

54
00:02:12,050 --> 00:02:14,150
at how you can really take
advantage of JavaScript

55
00:02:14,150 --> 00:02:15,858
and writing code on
the client side to be

56
00:02:15,858 --> 00:02:20,180
able to build really effective and
powerful and dynamic web applications

57
00:02:20,180 --> 00:02:22,610
when you're working on
trying to design an app.

58
00:02:22,610 --> 00:02:25,400
After that we'll take a look at
database design talking about SQL,

59
00:02:25,400 --> 00:02:27,740
but also looking at some
other SQL-related features

60
00:02:27,740 --> 00:02:30,356
looking at how to build APIs
and take advantage of APIs

61
00:02:30,356 --> 00:02:33,230
that others have built in order to
enhance your web applications even

62
00:02:33,230 --> 00:02:33,920
more.

63
00:02:33,920 --> 00:02:35,795
And then in the latter
half of the week we'll

64
00:02:35,795 --> 00:02:38,510
begin to look at React, which
is a library for building user

65
00:02:38,510 --> 00:02:39,740
interfaces made by Facebook.

66
00:02:39,740 --> 00:02:40,979
It's quite popular nowadays.

67
00:02:40,979 --> 00:02:42,770
A lot of companies and
industry, if they're

68
00:02:42,770 --> 00:02:44,990
looking to build a web
application quickly,

69
00:02:44,990 --> 00:02:47,120
will use React as their
method of doing so.

70
00:02:47,120 --> 00:02:49,580
And learning that will
therefore empower you

71
00:02:49,580 --> 00:02:52,130
to be able to work in
these sorts of fields

72
00:02:52,130 --> 00:02:54,470
in order to be able to build
applications in this style.

73
00:02:54,470 --> 00:02:57,140
It Involves a slightly different way
of thinking about web applications.

74
00:02:57,140 --> 00:02:59,848
But we'll learn about that-- how
to think about application state

75
00:02:59,848 --> 00:03:02,922
and how to think about how to flow
data throughout a web application.

76
00:03:02,922 --> 00:03:04,880
And those are topics that
we're going to cover.

77
00:03:04,880 --> 00:03:07,880
And then finally at the end we'll
touch on security and scalability,

78
00:03:07,880 --> 00:03:09,330
which we'll be discussing
throughout the course,

79
00:03:09,330 --> 00:03:12,290
but in particular thinking about how do
you make sure your web applications are

80
00:03:12,290 --> 00:03:14,970
secure, what are the security
threats and vulnerabilities that

81
00:03:14,970 --> 00:03:16,220
might come up on the internet.

82
00:03:16,220 --> 00:03:19,053
And in particular also looking at
how to scale our web applications.

83
00:03:19,053 --> 00:03:21,907
As you go from just 10 users
to 100, 1,000, 10,000 users,

84
00:03:21,907 --> 00:03:24,740
how do you figure out how to make
sure your web application is going

85
00:03:24,740 --> 00:03:28,073
to be able to handle that load, and what
are the considerations you have to make

86
00:03:28,073 --> 00:03:31,590
and the changes that you have to make
in order to support that kind of thing.

87
00:03:31,590 --> 00:03:32,855
So those are the main topics.

88
00:03:32,855 --> 00:03:34,730
And in terms of how the
week's going to work,

89
00:03:34,730 --> 00:03:36,920
we're going to follow a schedule
that looks something like this.

90
00:03:36,920 --> 00:03:39,253
We'll run from seven days
starting from today, Saturday,

91
00:03:39,253 --> 00:03:40,630
everyday up through next Friday.

92
00:03:40,630 --> 00:03:43,130
So you still have the weekend
before classes start up again.

93
00:03:43,130 --> 00:03:45,950
And we'll go from 10:00 AM to
5:00 PM approximately every day.

94
00:03:45,950 --> 00:03:47,780
And the general structure is
going to look something like this.

95
00:03:47,780 --> 00:03:50,577
Every morning we'll meet here in
Yenching Auditorium at 10:00 AM.

96
00:03:50,577 --> 00:03:52,660
And we'll have a morning
session till about 12:30.

97
00:03:52,660 --> 00:03:54,493
And I'll do some lecturing
for a little bit.

98
00:03:54,493 --> 00:03:57,470
And then we'll get some hands-on time
to do a bit of a morning project.

99
00:03:57,470 --> 00:04:00,334
After that we'll break for
lunch at around 12:30 each day.

100
00:04:00,334 --> 00:04:03,500
And we'll reconvene in this room at
2:00 PM for our afternoon session, which

101
00:04:03,500 --> 00:04:06,170
will consist of probably a
shorter lecture followed by even

102
00:04:06,170 --> 00:04:08,126
more hands-on time to work on projects.

103
00:04:08,126 --> 00:04:11,000
We'll suggest some projects that
you might want to consider tackling.

104
00:04:11,000 --> 00:04:12,710
But you're also, of course,
more than welcome to take

105
00:04:12,710 --> 00:04:14,780
the skills you've learned to build
something of interest to yourself

106
00:04:14,780 --> 00:04:15,431
as well.

107
00:04:15,431 --> 00:04:17,930
And there will be teaching
fellows working with you in order

108
00:04:17,930 --> 00:04:20,300
to help you out, help you debug
things, help you better understand

109
00:04:20,300 --> 00:04:20,841
the concepts.

110
00:04:20,841 --> 00:04:24,650
Because really the best way to learn a
lot of these concepts is to just try it

111
00:04:24,650 --> 00:04:27,470
hands-on to get an opportunity
to apply these skills

112
00:04:27,470 --> 00:04:29,760
and try to use them in practice.

113
00:04:29,760 --> 00:04:31,070
That's the general schedule.

114
00:04:31,070 --> 00:04:33,653
Questions about the schedule or
what the logistics of the week

115
00:04:33,653 --> 00:04:36,520
are going to look like?

116
00:04:36,520 --> 00:04:37,872
All right.

117
00:04:37,872 --> 00:04:40,580
Over the course of the week you'll
get to meet some of the staff.

118
00:04:40,580 --> 00:04:42,913
So you already met David,
who's not listed on the slide,

119
00:04:42,913 --> 00:04:44,360
but he introduced himself before.

120
00:04:44,360 --> 00:04:45,980
I'll be teaching the class
leading these lectures.

121
00:04:45,980 --> 00:04:47,660
And there are also going to
be four teaching fellows--

122
00:04:47,660 --> 00:04:50,152
Athena, Josh, Krishna, and
Julia will be helping out

123
00:04:50,152 --> 00:04:53,360
as we go into different breakout rooms
in order to work on hands-on projects.

124
00:04:53,360 --> 00:04:56,030
You will get an opportunity to interact
with and get to know and ask questions

125
00:04:56,030 --> 00:04:56,617
as well.

126
00:04:56,617 --> 00:04:58,450
And of course, one of
the goals of this week

127
00:04:58,450 --> 00:05:01,100
as well is to give you an opportunity
to get to know each other.

128
00:05:01,100 --> 00:05:02,360
There are a lot of
people here that are all

129
00:05:02,360 --> 00:05:05,310
interested in computer science, all
interested in software development.

130
00:05:05,310 --> 00:05:07,430
And one of the goals is that
as you work on these projects,

131
00:05:07,430 --> 00:05:10,070
you'll have an opportunity to work
with each other, get to know each other

132
00:05:10,070 --> 00:05:13,280
and form some friendships and work on
collaborating together on projects,

133
00:05:13,280 --> 00:05:15,738
because if you go on to take
other classes here at Harvard,

134
00:05:15,738 --> 00:05:18,140
you'll likely see each other
in future classes as well.

135
00:05:18,140 --> 00:05:20,931
So it's an opportunity to get to
know other people that are sitting

136
00:05:20,931 --> 00:05:23,550
with you in this room today as well.

137
00:05:23,550 --> 00:05:26,240
In addition to that, we also
have the course website.

138
00:05:26,240 --> 00:05:29,492
You can access it by
going to cs50.ly/beyond.

139
00:05:29,492 --> 00:05:31,950
There you'll find all of the
materials covered in lectures,

140
00:05:31,950 --> 00:05:35,060
so no need to feel like you need to
write down every example that I write

141
00:05:35,060 --> 00:05:38,491
in code up on the screen, because
all of the source code examples

142
00:05:38,491 --> 00:05:40,490
are going to be published
on the course website.

143
00:05:40,490 --> 00:05:42,140
All the slides are going to
be published there as well.

144
00:05:42,140 --> 00:05:45,290
In fact, this morning's slides and code
examples are already up on the website.

145
00:05:45,290 --> 00:05:47,400
So you can go there now and take
a look at that if you'd like.

146
00:05:47,400 --> 00:05:50,040
So definitely no need to feel like you
need to write down every line of code.

147
00:05:50,040 --> 00:05:52,610
And feel free to reference back
to these source code examples

148
00:05:52,610 --> 00:05:55,680
as you go about creating
your own projects as well.

149
00:05:55,680 --> 00:05:59,180
Another thing you'll find if you go
to cs50.ly/beyond is that if you go

150
00:05:59,180 --> 00:06:02,030
to the menu bar, there's a
little button that says Feedback.

151
00:06:02,030 --> 00:06:04,130
If you click on the
button that says Feedback,

152
00:06:04,130 --> 00:06:07,070
that will take you to
a traffic light screen.

153
00:06:07,070 --> 00:06:09,860
It's got three faces-- a green
smiley face, a red frowny face,

154
00:06:09,860 --> 00:06:11,270
a yellow neutral face.

155
00:06:11,270 --> 00:06:14,496
This is a way for you to provide sort
of live interactive feedback to me

156
00:06:14,496 --> 00:06:16,370
over the course of the
week as I'm lecturing.

157
00:06:16,370 --> 00:06:19,524
So if as I'm talking I'm talking
about a concept, it makes sense,

158
00:06:19,524 --> 00:06:22,190
you understand it, you get it,
just press the green smiley face.

159
00:06:22,190 --> 00:06:24,410
If as I'm talking something
doesn't quite make sense,

160
00:06:24,410 --> 00:06:26,390
you want me to slow down, you
want me to explain something

161
00:06:26,390 --> 00:06:29,120
in a slightly different way, go
ahead and press the red frowny face.

162
00:06:29,120 --> 00:06:31,995
Press the yellow neutral face if
you're feeling somewhere in between.

163
00:06:31,995 --> 00:06:37,320
I up here on my screen have a screen
that looks something like this.

164
00:06:37,320 --> 00:06:37,820
Yes.

165
00:06:37,820 --> 00:06:40,370
And as you press your little
smiley faces, frowny faces,

166
00:06:40,370 --> 00:06:41,510
they show up on my screen.

167
00:06:41,510 --> 00:06:42,950
I'll keep an eye on
that as I'm lecturing.

168
00:06:42,950 --> 00:06:44,840
It's just a way for me
to get a sense for how

169
00:06:44,840 --> 00:06:46,840
you're feeling so I know
whether to speed up, slow down,

170
00:06:46,840 --> 00:06:50,030
if things make sense, or if you want
to pause and take some questions.

171
00:06:50,030 --> 00:06:52,280
But of course, the best way to get
help if you're feeling up to it

172
00:06:52,280 --> 00:06:53,750
is just raise your hand, ask a question.

173
00:06:53,750 --> 00:06:54,780
I want this to be interactive.

174
00:06:54,780 --> 00:06:57,260
I want you to get an opportunity
to ask questions and make

175
00:06:57,260 --> 00:07:00,170
sure you leave each day with a better
understanding of the web application

176
00:07:00,170 --> 00:07:01,980
technologies that we've
been talking about.

177
00:07:01,980 --> 00:07:03,950
And so one of the goals of
this week is making sure

178
00:07:03,950 --> 00:07:06,980
that there is that interactivity,
that you have the opportunity to get

179
00:07:06,980 --> 00:07:08,940
all of your questions answered as well.

180
00:07:08,940 --> 00:07:12,600
There are already way too
many red frowny faces.

181
00:07:12,600 --> 00:07:13,100
All right.

182
00:07:13,100 --> 00:07:14,210
I'll pause here for questions.

183
00:07:14,210 --> 00:07:15,335
What questions do you have?

184
00:07:15,335 --> 00:07:20,230


185
00:07:20,230 --> 00:07:20,730
Yeah.

186
00:07:20,730 --> 00:07:20,820
AUDIENCE: Yeah.

187
00:07:20,820 --> 00:07:21,180
Are the lectures recorded?

188
00:07:21,180 --> 00:07:22,440
BRIAN YU: Yes, the
lectures will be recorded.

189
00:07:22,440 --> 00:07:25,140
So afterwards, probably a
couple hours after each lecture,

190
00:07:25,140 --> 00:07:27,360
they'll be posted online
so you can reference back

191
00:07:27,360 --> 00:07:30,470
to them if you would like to.

192
00:07:30,470 --> 00:07:31,280
Other questions.

193
00:07:31,280 --> 00:07:34,890


194
00:07:34,890 --> 00:07:35,446
All right.

195
00:07:35,446 --> 00:07:38,070
And so one other thing I'll
mention actually before we actually

196
00:07:38,070 --> 00:07:40,410
get into the heart of what today's
lecture is going to be about

197
00:07:40,410 --> 00:07:42,659
is that another one of my
goals here in this week

198
00:07:42,659 --> 00:07:45,450
is to not only give you an exposure
to web application development,

199
00:07:45,450 --> 00:07:48,840
but as we talk about web application
development, that will also lend itself

200
00:07:48,840 --> 00:07:52,220
opportunities to talk about a bunch of
other topics within computer science.

201
00:07:52,220 --> 00:07:55,304
So we'll get an opportunity to talk
about security, as I mentioned before.

202
00:07:55,304 --> 00:07:58,011
We'll get a chance to talk about
public key cryptography and some

203
00:07:58,011 --> 00:07:59,440
of the technologies behind that.

204
00:07:59,440 --> 00:08:03,210
We'll get a chance to talk about
caching in different algorithms

205
00:08:03,210 --> 00:08:04,470
for thinking about caching.

206
00:08:04,470 --> 00:08:07,230
We'll get to talk about regular
expressions and regular languages,

207
00:08:07,230 --> 00:08:09,771
which you might get exposure to
if you take a formal language

208
00:08:09,771 --> 00:08:13,399
theory class or theory of computer
science class like CS121, for instance.

209
00:08:13,399 --> 00:08:15,690
When we talk about JavaScript
we'll have an opportunity

210
00:08:15,690 --> 00:08:18,469
to talk about functional programming,
which is a big idea in CS51,

211
00:08:18,469 --> 00:08:20,760
if that's a class you're
thinking about taking as well.

212
00:08:20,760 --> 00:08:22,530
So throughout the course,
even though the focus

213
00:08:22,530 --> 00:08:24,922
is on web application development,
we'll get some teasers

214
00:08:24,922 --> 00:08:26,130
of a number of other classes.

215
00:08:26,130 --> 00:08:28,140
We'll build some games
in the web application

216
00:08:28,140 --> 00:08:29,850
world, some web-based games.

217
00:08:29,850 --> 00:08:31,933
And in the process we'll
get to learn a little bit

218
00:08:31,933 --> 00:08:35,069
about artificial intelligence and how
to build AIs to play games as well.

219
00:08:35,069 --> 00:08:37,860
So we'll get some exposure to some
other topics in computer science

220
00:08:37,860 --> 00:08:41,250
beyond just web application development
through the lens of trying to design

221
00:08:41,250 --> 00:08:43,740
and build web applications as well.

222
00:08:43,740 --> 00:08:48,449
So goals for today are we're primarily
going to be talking about HTML and CSS

223
00:08:48,449 --> 00:08:48,990
this morning.

224
00:08:48,990 --> 00:08:50,460
This afternoon we'll dive in to Git.

225
00:08:50,460 --> 00:08:52,080
So we'll start with a
little bit of review just

226
00:08:52,080 --> 00:08:54,419
to give you an overview of
the basic HTML features,

227
00:08:54,419 --> 00:08:55,710
which you may have seen before.

228
00:08:55,710 --> 00:08:57,460
We'll introduce some
of the newer features

229
00:08:57,460 --> 00:09:00,101
that you might find an HTML
5, the latest version of HTML.

230
00:09:00,101 --> 00:09:02,100
And then we'll also get
a little bit of a chance

231
00:09:02,100 --> 00:09:03,960
to talk about regular
expression, something

232
00:09:03,960 --> 00:09:07,310
that HTML empowers you to
take advantage of in HTML 5,

233
00:09:07,310 --> 00:09:10,740
and something that you'll find is useful
even beyond just the world of HTML.

234
00:09:10,740 --> 00:09:13,920
Then we'll talk a little bit about CSS,
talking about styling our web pages

235
00:09:13,920 --> 00:09:16,919
and different more advanced ways to
try and style your website in a very

236
00:09:16,919 --> 00:09:19,097
specific and precise way.

237
00:09:19,097 --> 00:09:21,430
And in particular, how to
think about responsive design,

238
00:09:21,430 --> 00:09:23,388
which is one of the most
important developments

239
00:09:23,388 --> 00:09:26,347
in thinking about how to design web
pages in the last decade, where you

240
00:09:26,347 --> 00:09:28,179
really need to begin
to think about the fact

241
00:09:28,179 --> 00:09:30,040
that devices come in
all shapes and sizes.

242
00:09:30,040 --> 00:09:32,890
You need to think about making sure
a website looks good on a big screen,

243
00:09:32,890 --> 00:09:35,890
making sure it looks good on a mobile
device, looks good on a tablet device.

244
00:09:35,890 --> 00:09:37,080
And there are different
considerations you

245
00:09:37,080 --> 00:09:39,330
need to take advantage of
there and different features

246
00:09:39,330 --> 00:09:43,790
that CSS offers that allows you to
take advantage of those sorts of ideas.

247
00:09:43,790 --> 00:09:45,619
So we'll begin by talking about HTML.

248
00:09:45,619 --> 00:09:48,410
And so we'll start with a little
bit of review, which will probably

249
00:09:48,410 --> 00:09:50,480
be familiar to you from CS50.

250
00:09:50,480 --> 00:09:52,570
But in case it's a
little bit rusty again,

251
00:09:52,570 --> 00:09:55,400
we'll give you a chance to
take a look at it again.

252
00:09:55,400 --> 00:09:58,520
So the basic HTML web
page that we saw in CS50

253
00:09:58,520 --> 00:10:00,020
looked a little something like this.

254
00:10:00,020 --> 00:10:02,360
This was the simplest web
page that we could design.

255
00:10:02,360 --> 00:10:05,240
And we noticed that
all the HTML pages are

256
00:10:05,240 --> 00:10:08,750
divided into these nested tags where
we've got a starting tag and an ending

257
00:10:08,750 --> 00:10:11,180
tag that enclose an HTML element.

258
00:10:11,180 --> 00:10:14,660
So this whole document is
enclosed inside of an HTML element

259
00:10:14,660 --> 00:10:16,910
inside of which we had the HTML header.

260
00:10:16,910 --> 00:10:19,520
Inside of our header we had a
title that just said, OK, hello.

261
00:10:19,520 --> 00:10:21,311
And then inside of the
body of the web page

262
00:10:21,311 --> 00:10:23,090
we said something like, hello, world.

263
00:10:23,090 --> 00:10:25,130
And the basic idea of
HTML was just trying

264
00:10:25,130 --> 00:10:29,120
to find the right tags to use in
order to create the elements that we

265
00:10:29,120 --> 00:10:33,470
want you to display the content
that we want to on our web page.

266
00:10:33,470 --> 00:10:37,100
And some of the common HTML
elements that we may have seen

267
00:10:37,100 --> 00:10:38,600
looked a little something like this.

268
00:10:38,600 --> 00:10:42,080
So h1 through h6, those are
used to create headings.

269
00:10:42,080 --> 00:10:45,830
So if you want a big heading at the top
of your page, you might use an h1 tag.

270
00:10:45,830 --> 00:10:49,430
As the numbers get bigger, the
size of the heading gets smaller.

271
00:10:49,430 --> 00:10:51,490
So h2 is a slightly smaller heading.

272
00:10:51,490 --> 00:10:54,950
h3, h4, h5, and then h6
is the smallest heading.

273
00:10:54,950 --> 00:10:59,060
ol and ul are used to create
ordered and unordered lists.

274
00:10:59,060 --> 00:11:01,380
So I'll demonstrate that very quickly.

275
00:11:01,380 --> 00:11:07,550
So I go here and open
up the Code Editor.

276
00:11:07,550 --> 00:11:11,690
And let's call this list.html.

277
00:11:11,690 --> 00:11:14,180
And I'm using VS code as my code editor.

278
00:11:14,180 --> 00:11:16,250
We're not going to be
using CS50 IDE this week,

279
00:11:16,250 --> 00:11:19,585
because increasingly most people when
they're designing web applications

280
00:11:19,585 --> 00:11:21,710
are working on software
development more generally.

281
00:11:21,710 --> 00:11:24,330
We usually just use the text
editor on their own computer.

282
00:11:24,330 --> 00:11:26,413
There are a number of
different options right now.

283
00:11:26,413 --> 00:11:29,242
Some of the more popular currently
are Sublime Text, Atom, VS Code.

284
00:11:29,242 --> 00:11:30,950
But there are a number
of others as well.

285
00:11:30,950 --> 00:11:33,830
I'd recommend that you choose one and
download it and try it out and give it

286
00:11:33,830 --> 00:11:34,340
a shot.

287
00:11:34,340 --> 00:11:36,465
You can try multiple if
you'd like to see which one

288
00:11:36,465 --> 00:11:38,210
fits your personal preference better.

289
00:11:38,210 --> 00:11:41,570
But VS Code is the one that I'll be
using over the course of this week.

290
00:11:41,570 --> 00:11:43,550
So list.html.

291
00:11:43,550 --> 00:11:45,830
We'll say doc type html.

292
00:11:45,830 --> 00:11:47,930
And remember, the doc
type html on line 1, that

293
00:11:47,930 --> 00:11:51,140
just tells the browser that
this is an HTML5 web page--

294
00:11:51,140 --> 00:11:53,270
the latest version of HTML.

295
00:11:53,270 --> 00:11:55,040
We'll add a header.

296
00:11:55,040 --> 00:11:57,110
Title will just be Lists.

297
00:11:57,110 --> 00:12:01,777
And then inside the body of
the web page, a ol stands for--

298
00:12:01,777 --> 00:12:03,110
I'll make this a little bigger--

299
00:12:03,110 --> 00:12:04,520
stands for an ordered list.

300
00:12:04,520 --> 00:12:07,100
So an ordered list or a
numbered list, for instance.

301
00:12:07,100 --> 00:12:08,570
So I might have a list item.

302
00:12:08,570 --> 00:12:10,390
So this is item 1.

303
00:12:10,390 --> 00:12:14,970
And I might have item 2 and item 3.

304
00:12:14,970 --> 00:12:15,470
OK.

305
00:12:15,470 --> 00:12:20,270
So ol stands for "ordered list." li is
each individual list item within it.

306
00:12:20,270 --> 00:12:24,020
And if I open up list.html
inside of Chrome.

307
00:12:24,020 --> 00:12:25,760
You'll see it looks something like this.

308
00:12:25,760 --> 00:12:26,540
1, 2, 3.

309
00:12:26,540 --> 00:12:27,800
Each one is numbered.

310
00:12:27,800 --> 00:12:29,330
Item one, item two, item three.

311
00:12:29,330 --> 00:12:31,476
If I wanted to change
that to an unordered list

312
00:12:31,476 --> 00:12:33,350
where it's just bulleted
instead of numbered,

313
00:12:33,350 --> 00:12:35,000
that's as simple as changing this tag.

314
00:12:35,000 --> 00:12:37,020
Instead of ol for
ordered list, I'm going

315
00:12:37,020 --> 00:12:40,450
to change it to ul for unordered
list and do the same thing down here.

316
00:12:40,450 --> 00:12:42,105
Close the unordered list.

317
00:12:42,105 --> 00:12:43,730
And now it's an unordered list element.

318
00:12:43,730 --> 00:12:47,080
Instead of numbers, it's replaced
by individual bullet points.

319
00:12:47,080 --> 00:12:52,070
And so that's ol and ul for
ordered list, unordered list.

320
00:12:52,070 --> 00:12:54,187
In the client CS50 we
also saw the image tag

321
00:12:54,187 --> 00:12:56,270
for if you want to insert
an image into somewhere.

322
00:12:56,270 --> 00:12:58,160
We also saw the a tag.

323
00:12:58,160 --> 00:12:59,960
The a is the anchor tag.

324
00:12:59,960 --> 00:13:02,840
And it's used in particular to
allow you to link to somewhere else.

325
00:13:02,840 --> 00:13:05,960
You can link to another page
in your same web application

326
00:13:05,960 --> 00:13:08,300
by just typing in like,
some other file.html

327
00:13:08,300 --> 00:13:10,070
to link to some other HTML file.

328
00:13:10,070 --> 00:13:11,960
You can type in some
other URL completely,

329
00:13:11,960 --> 00:13:16,880
like Google.com to link to Google.com
or some other external page.

330
00:13:16,880 --> 00:13:20,440
The a anchor tag also lets you
link to the same page, which

331
00:13:20,440 --> 00:13:23,602
is a feature that you'll often
see in really long web pages

332
00:13:23,602 --> 00:13:25,310
where you might have
a table of contents.

333
00:13:25,310 --> 00:13:29,090
And a table of contents item will link
down to somewhere later in the page,

334
00:13:29,090 --> 00:13:30,470
for instance.

335
00:13:30,470 --> 00:13:34,130
And so I'll show you an example of that.

336
00:13:34,130 --> 00:13:37,040
If we create some paragraphs here.

337
00:13:37,040 --> 00:13:40,610
So this is paragraph one.

338
00:13:40,610 --> 00:13:44,660
And I'm just going to
take this as paragraph one

339
00:13:44,660 --> 00:13:47,780
and repeat it a whole bunch.

340
00:13:47,780 --> 00:13:53,840
And we'll say this is paragraph
2 and repeat that a whole bunch.

341
00:13:53,840 --> 00:13:58,280
And add another paragraph and
say this is paragraph three,

342
00:13:58,280 --> 00:13:59,840
and repeat that a whole bunch.

343
00:13:59,840 --> 00:14:01,340
So I've got three big paragraphs.

344
00:14:01,340 --> 00:14:04,548
And I might like to have some table of
contents that lets me navigate quickly

345
00:14:04,548 --> 00:14:05,840
between all three of these.

346
00:14:05,840 --> 00:14:09,200
One thing that I can do is
I need some way of uniquely

347
00:14:09,200 --> 00:14:11,690
identifying each paragraph.

348
00:14:11,690 --> 00:14:15,290
And this is a place where the
ID attribute will come in handy.

349
00:14:15,290 --> 00:14:18,920
If you recall from CS50, we can add
an ID attribute to any HTML element

350
00:14:18,920 --> 00:14:21,260
to give that HTML element a unique name.

351
00:14:21,260 --> 00:14:25,880
So I might do something like, this
paragraph has ID paragraph one.

352
00:14:25,880 --> 00:14:28,636
So this is some unique name I'm
giving to this paragraph such

353
00:14:28,636 --> 00:14:31,760
that in the future elsewhere on the
page or in my JavaScript code, as we'll

354
00:14:31,760 --> 00:14:35,352
see later in the week, we can
reference this particular paragraph.

355
00:14:35,352 --> 00:14:37,310
So I'll scroll down and
do the same thing here.

356
00:14:37,310 --> 00:14:41,642
This paragraph I'll give
an id of paragraph 2.

357
00:14:41,642 --> 00:14:43,350
And then finally down
here this paragraph

358
00:14:43,350 --> 00:14:46,689
I'll give an id of paragraph three.

359
00:14:46,689 --> 00:14:49,230
And so now I might like to create
a table of contents whereby

360
00:14:49,230 --> 00:14:52,290
I can click on paragraph 1, 2,
3 that will link me directly

361
00:14:52,290 --> 00:14:55,150
to whichever paragraph it
is that I'm interested in.

362
00:14:55,150 --> 00:14:57,150
And so I'll go back to
the top of this page.

363
00:14:57,150 --> 00:15:02,310
And my table of contents is just
going to be an unordered list, a ul.

364
00:15:02,310 --> 00:15:05,310
And I'll have a list item
that goes paragraph one.

365
00:15:05,310 --> 00:15:07,950
And I'll have another one
that takes me to paragraph 2.

366
00:15:07,950 --> 00:15:10,542
And I'll have another one that
takes me to paragraph three.

367
00:15:10,542 --> 00:15:12,750
And so right now I've just
created an unordered list.

368
00:15:12,750 --> 00:15:14,310
I've created the table of contents.

369
00:15:14,310 --> 00:15:15,893
But they don't link anywhere just yet.

370
00:15:15,893 --> 00:15:17,790
So if I were to actually
open up this page,

371
00:15:17,790 --> 00:15:20,010
I see paragraph one, paragraph
two, paragraph three.

372
00:15:20,010 --> 00:15:22,290
And then I see the three
paragraphs, but clicking on these

373
00:15:22,290 --> 00:15:23,415
doesn't really do anything.

374
00:15:23,415 --> 00:15:24,120


375
00:15:24,120 --> 00:15:27,720
And so now what I'd like to do is
actually make these list items link

376
00:15:27,720 --> 00:15:30,900
to whichever section of the
page I'm trying to refer to.

377
00:15:30,900 --> 00:15:34,620
And so as you might guess, we're
going to use an anchor tag, ah ref.

378
00:15:34,620 --> 00:15:40,430
And where normally I might have
inserted something like a link

379
00:15:40,430 --> 00:15:42,960
to another website in
these quotation marks,

380
00:15:42,960 --> 00:15:45,110
I can instead link to a particular ID.

381
00:15:45,110 --> 00:15:49,630
And I use the pound or hashtag sign
to say go to this particular id.

382
00:15:49,630 --> 00:15:52,460
And I want to say when you click
on the paragraph one list item,

383
00:15:52,460 --> 00:15:58,870
I want to link to the paragraph
that has id paragraph one.

384
00:15:58,870 --> 00:16:03,890
And likewise I'll do the
same thing for paragraph 2.

385
00:16:03,890 --> 00:16:07,010
And likewise I'll do the same
thing for paragraph three.

386
00:16:07,010 --> 00:16:07,970
Paragraph 1, 2, 3.

387
00:16:07,970 --> 00:16:11,150
Each one links to a distinct id.

388
00:16:11,150 --> 00:16:12,800
And so now if I refresh this page--

389
00:16:12,800 --> 00:16:16,760
and I also shrink down
the size of the page

390
00:16:16,760 --> 00:16:19,820
so that I can actually see all three
paragraphs not on the same screen--

391
00:16:19,820 --> 00:16:22,640
and I click on paragraph
one, that just takes

392
00:16:22,640 --> 00:16:25,124
me to paragraph one on the same page.

393
00:16:25,124 --> 00:16:26,540
I didn't link to a different page.

394
00:16:26,540 --> 00:16:29,276
It just linked to a different
position on the same page.

395
00:16:29,276 --> 00:16:32,150
And likewise if I scroll back up to
the top and click on paragraph 2,

396
00:16:32,150 --> 00:16:34,970
for instance, that takes me
immediately to paragraph 2.

397
00:16:34,970 --> 00:16:37,670
So as you begin to build
larger websites that

398
00:16:37,670 --> 00:16:39,560
have a lot of content
on the same page, you

399
00:16:39,560 --> 00:16:42,018
might find that linking to
different parts of the same page

400
00:16:42,018 --> 00:16:45,020
is something that you might
actually find useful as you

401
00:16:45,020 --> 00:16:50,205
go about designing web applications.

402
00:16:50,205 --> 00:16:50,705
All right.

403
00:16:50,705 --> 00:16:53,260


404
00:16:53,260 --> 00:16:56,366
In addition to linking, we also
saw that we have tables and forms

405
00:16:56,366 --> 00:16:57,490
that we can create as well.

406
00:16:57,490 --> 00:17:00,541
Then certainly we'll have an opportunity
to do some of that in this class

407
00:17:00,541 --> 00:17:01,040
as well.

408
00:17:01,040 --> 00:17:03,025
But you saw that in CS50 too.

409
00:17:03,025 --> 00:17:05,650
And there's some source code
examples for how to create tables,

410
00:17:05,650 --> 00:17:07,660
how to create forms if
you look at the source

411
00:17:07,660 --> 00:17:12,440
code examples that are on
the course website right now.

412
00:17:12,440 --> 00:17:17,030
So now let's talk about some of
the differences between HTML4--

413
00:17:17,030 --> 00:17:18,599
the older versions of HTML--

414
00:17:18,599 --> 00:17:23,609
and HTML5, the current version of HTML
that introduces a lot of new features.

415
00:17:23,609 --> 00:17:28,232
So in HTML4, if you wanted to
organize your page in different ways,

416
00:17:28,232 --> 00:17:30,190
you would often want to
organize your page in--

417
00:17:30,190 --> 00:17:30,400
OK.

418
00:17:30,400 --> 00:17:31,840
Here's the header of the page.

419
00:17:31,840 --> 00:17:34,920
Here is the navigation bar along
the left-hand side, for instance.

420
00:17:34,920 --> 00:17:36,402
Here is the main body of the page.

421
00:17:36,402 --> 00:17:37,610
Here's a section of the page.

422
00:17:37,610 --> 00:17:39,651
At the bottom you may have
a footer for the page.

423
00:17:39,651 --> 00:17:41,960
And you would want to
distinguish those in some way.

424
00:17:41,960 --> 00:17:46,210
A common way to do that in HTML4 would
have been to give each one a class.

425
00:17:46,210 --> 00:17:47,960
Does anyone remember
what's the difference

426
00:17:47,960 --> 00:17:53,050
between giving an HTML element an id
and giving an HTML element a class?

427
00:17:53,050 --> 00:17:55,738
Difference between those two things?

428
00:17:55,738 --> 00:17:58,070
Yeah.

429
00:17:58,070 --> 00:18:00,440
A-- which one's unique?

430
00:18:00,440 --> 00:18:01,400
Class is not unique.

431
00:18:01,400 --> 00:18:01,900
Great.

432
00:18:01,900 --> 00:18:04,790
So an id is unique on an HTML page.

433
00:18:04,790 --> 00:18:07,000
A single id can only
be used at most once.

434
00:18:07,000 --> 00:18:11,270
If you have an id, it references one
and only one element on the page.

435
00:18:11,270 --> 00:18:13,550
But a class, something
like class equals header,

436
00:18:13,550 --> 00:18:15,740
class equals now, class
equals section, that

437
00:18:15,740 --> 00:18:18,830
is a way of identifying an HTML
element that is not unique.

438
00:18:18,830 --> 00:18:23,240
There might be multiple sections
on a page, for instance.

439
00:18:23,240 --> 00:18:25,610
And so that makes sense
to make that an HTML CSS

440
00:18:25,610 --> 00:18:28,900
class instead of making it an ID.

441
00:18:28,900 --> 00:18:30,500
Means there can be multiple of those.

442
00:18:30,500 --> 00:18:34,310
In HTML5 they found that because
people were using structures like this

443
00:18:34,310 --> 00:18:37,340
so often-- saying header,
nav, section, and footer--

444
00:18:37,340 --> 00:18:39,470
they added a whole bunch
of semantic elements

445
00:18:39,470 --> 00:18:41,660
that would describe
the same exact things.

446
00:18:41,660 --> 00:18:43,529
So HTML5 introduces all these new tags.

447
00:18:43,529 --> 00:18:44,570
You can just say, header.

448
00:18:44,570 --> 00:18:47,210
You can say, nav section
and footer, for instance,

449
00:18:47,210 --> 00:18:51,290
among other different semantic
elements to describe your page in order

450
00:18:51,290 --> 00:18:53,214
to better get at the
structure of the page,

451
00:18:53,214 --> 00:18:55,130
helps to make things a
little more consistent.

452
00:18:55,130 --> 00:19:00,340
So these are tags you might see if you
look at some more modern web pages.

453
00:19:00,340 --> 00:19:03,279
But this doesn't
fundamentally change any

454
00:19:03,279 --> 00:19:06,070
like-- this isn't a new feature of
HTML, for instance, in the sense

455
00:19:06,070 --> 00:19:08,200
that it allows you to do
something you couldn't do before.

456
00:19:08,200 --> 00:19:10,792
There are some new features
that we can take advantage of.

457
00:19:10,792 --> 00:19:13,000
There are a bunch of them,
but a small list are here.

458
00:19:13,000 --> 00:19:16,060
One is contenteditable,
which makes it very easy

459
00:19:16,060 --> 00:19:20,290
to create sections of the HTML
page elements within the HTML page

460
00:19:20,290 --> 00:19:21,460
that you can edit.

461
00:19:21,460 --> 00:19:24,124
You might imagine that this is
great for like a blogging site,

462
00:19:24,124 --> 00:19:26,290
for instance, where you
might make a blog post where

463
00:19:26,290 --> 00:19:29,414
you want to edit the blog posts and
you want to go back and edit something.

464
00:19:29,414 --> 00:19:32,620
It becomes very easy to create
something that is content editable.

465
00:19:32,620 --> 00:19:35,440
So let me go back here.

466
00:19:35,440 --> 00:19:40,390
And let me just delete everything.

467
00:19:40,390 --> 00:19:42,730
And I'll just create a paragraph.

468
00:19:42,730 --> 00:19:45,580
And list is no longer a totally
appropriate name for this page.

469
00:19:45,580 --> 00:19:51,254
But I'll say, this is a
paragraph that is editable.

470
00:19:51,254 --> 00:19:53,170
And so normally if I
just had a paragraph that

471
00:19:53,170 --> 00:19:57,750
looks something like
this, and I opened it up,

472
00:19:57,750 --> 00:19:59,380
it would look something like this.

473
00:19:59,380 --> 00:20:01,740
And it's just a paragraph.

474
00:20:01,740 --> 00:20:04,470
But I can add in HTML5
this new attribute--

475
00:20:04,470 --> 00:20:08,790
this contenteditable attribute--
set it equal to true.

476
00:20:08,790 --> 00:20:10,980
And so if I set a paragraph
to be contenteditable

477
00:20:10,980 --> 00:20:13,680
equals true, then when
I refresh the page, OK.

478
00:20:13,680 --> 00:20:16,290
Nothing seems to have changed just yet.

479
00:20:16,290 --> 00:20:22,604
But if I click on this, now I can
actually, I can edit this paragraph.

480
00:20:22,604 --> 00:20:25,020
And so you can go into the
HTML page, and you can actually

481
00:20:25,020 --> 00:20:27,570
allow the user to take an
element and edit the element--

482
00:20:27,570 --> 00:20:29,250
update text, add text to it.

483
00:20:29,250 --> 00:20:32,230
And of course, all this does right
now is just let me add text to it.

484
00:20:32,230 --> 00:20:33,810
But as we soon-- when
we'll get to JavaScript,

485
00:20:33,810 --> 00:20:35,809
we'll see we have the
ability to say, all right.

486
00:20:35,809 --> 00:20:39,270
When someone does edit a
section of the HTML page, let's

487
00:20:39,270 --> 00:20:40,400
actually run some code.

488
00:20:40,400 --> 00:20:42,210
Let's run some code that
takes what they've changed

489
00:20:42,210 --> 00:20:45,126
and actually make some sort of update
or make some call to some server

490
00:20:45,126 --> 00:20:47,250
somewhere in order to
actually do something when

491
00:20:47,250 --> 00:20:48,990
the user chooses to edit that page.

492
00:20:48,990 --> 00:20:52,265
That's one of the features
that HTML5 offers.

493
00:20:52,265 --> 00:20:52,890
Yeah, question?

494
00:20:52,890 --> 00:20:56,769
AUDIENCE: [INAUDIBLE]

495
00:20:56,769 --> 00:20:57,810
BRIAN YU: Great question.

496
00:20:57,810 --> 00:21:00,240
Question was, is it actually just
changing like, what I see on the page?

497
00:21:00,240 --> 00:21:01,770
Or is it actually changing the file?

498
00:21:01,770 --> 00:21:03,030
The file is unchanged.

499
00:21:03,030 --> 00:21:06,060
It is just changing what I
see when I open this back up.

500
00:21:06,060 --> 00:21:10,050
If I close the file and reopen the
file again, it goes back to the way

501
00:21:10,050 --> 00:21:11,190
that it was originally.

502
00:21:11,190 --> 00:21:12,940
So you imagine that
if you actually wanted

503
00:21:12,940 --> 00:21:15,570
to save the state of what it
is that the user typed in,

504
00:21:15,570 --> 00:21:16,830
you might have to make
some more changes.

505
00:21:16,830 --> 00:21:19,121
And when we get to JavaScript
we'll have an opportunity

506
00:21:19,121 --> 00:21:22,530
to explore how to save inside the
browser information about the state

507
00:21:22,530 --> 00:21:25,004
of the web page that we want to save.

508
00:21:25,004 --> 00:21:25,920
Good question, though.

509
00:21:25,920 --> 00:21:26,490
Other things?

510
00:21:26,490 --> 00:21:29,060


511
00:21:29,060 --> 00:21:29,560
OK.

512
00:21:29,560 --> 00:21:33,680
So contenteditable, that's one of
the new features that HTML5 offers.

513
00:21:33,680 --> 00:21:37,940
Another feature that it offers
is the datalist element.

514
00:21:37,940 --> 00:21:40,200
So the datalist element is
another one you might see.

515
00:21:40,200 --> 00:21:42,908
Just showing you this for the sake
of giving you a sense for what

516
00:21:42,908 --> 00:21:43,970
HTML5 can do.

517
00:21:43,970 --> 00:21:47,810
The datalist is designed to make
it easier to create autocomplete.

518
00:21:47,810 --> 00:21:50,810
So you can implement
autocomplete in your web pages.

519
00:21:50,810 --> 00:21:52,020
And so you might see this--

520
00:21:52,020 --> 00:21:54,620
I have an example in the--

521
00:21:54,620 --> 00:22:00,500
you go to the source code examples
and you go to datalist.html.

522
00:22:00,500 --> 00:22:05,500


523
00:22:05,500 --> 00:22:08,890
In datalist.html, we've created a form.

524
00:22:08,890 --> 00:22:11,860
So we have a form here
where I'm asking for input.

525
00:22:11,860 --> 00:22:13,712
The input name is Name.

526
00:22:13,712 --> 00:22:15,420
So I'm asking them to
type in their name.

527
00:22:15,420 --> 00:22:17,320
I'm asking them to type in a password.

528
00:22:17,320 --> 00:22:20,440
I'm also asking them to type
in their favorite color.

529
00:22:20,440 --> 00:22:23,110
And you'll notice that the input
type here is a radio button.

530
00:22:23,110 --> 00:22:24,820
So we'll see what that looks
like in just a moment, how you

531
00:22:24,820 --> 00:22:26,950
create a radio button inside of a form.

532
00:22:26,950 --> 00:22:31,870
And then I'm also asking them to
input what country they're from.

533
00:22:31,870 --> 00:22:35,200
And there is only a finite list
of the countries of the world.

534
00:22:35,200 --> 00:22:38,086
So it might be nice if I start
to type in letters like UN

535
00:22:38,086 --> 00:22:39,210
that it might autocomplete.

536
00:22:39,210 --> 00:22:42,570
And United States might be one of the
options there in the dropdown list.

537
00:22:42,570 --> 00:22:45,850
And so that's what
datalist is designed to do.

538
00:22:45,850 --> 00:22:50,140
I create a data list with an ID
called countries, inside of which

539
00:22:50,140 --> 00:22:51,440
are a whole bunch of options--

540
00:22:51,440 --> 00:22:53,980
Option Afghanistan, Option
Albania, so on and so forth

541
00:22:53,980 --> 00:22:55,660
for all the countries of the world.

542
00:22:55,660 --> 00:22:57,910
And then in this input
element, what I do

543
00:22:57,910 --> 00:23:02,470
is I specify this additional
attribute new in HTML5 called List.

544
00:23:02,470 --> 00:23:06,400
And I say, OK, what is the list of
possible choices for this input?

545
00:23:06,400 --> 00:23:10,180
It's going to be the thing that has
id countries, which in this case

546
00:23:10,180 --> 00:23:12,370
is this data list.

547
00:23:12,370 --> 00:23:18,760
And so now if I go ahead and open
up datalist.html, what you'll see

548
00:23:18,760 --> 00:23:21,880
is I have a page here that offers
me an opportunity to type in a name,

549
00:23:21,880 --> 00:23:25,390
type in a password, type in a
favorite color as a radio button.

550
00:23:25,390 --> 00:23:27,010
So I can choose red, green, blue.

551
00:23:27,010 --> 00:23:29,380
And it switches between
the possible options.

552
00:23:29,380 --> 00:23:31,429
And then I have this
country dropdown where

553
00:23:31,429 --> 00:23:33,220
immediately if I click
on this input field,

554
00:23:33,220 --> 00:23:36,610
it's just a plain input field that
has a list attribute added to it.

555
00:23:36,610 --> 00:23:39,520
But already I see this whole
list of possible options.

556
00:23:39,520 --> 00:23:40,570
Now I can start typing.

557
00:23:40,570 --> 00:23:42,660
I can type un.

558
00:23:42,660 --> 00:23:44,710
And as soon as I start
typing a couple letters,

559
00:23:44,710 --> 00:23:46,680
I see it automatically
sort of autocomplete

560
00:23:46,680 --> 00:23:50,590
filter down the options to only the ones
that match what it is that I typed in.

561
00:23:50,590 --> 00:23:53,500
And so it becomes very easy to
then choose the one that matches.

562
00:23:53,500 --> 00:23:56,230
So an additional feature
added in HTML5, designed

563
00:23:56,230 --> 00:24:00,510
to give you the ability to make better
user interfaces for your users on HTML

564
00:24:00,510 --> 00:24:03,520
pages just by adding
in a data list to be

565
00:24:03,520 --> 00:24:07,040
able to support autocompletion
or something like that.

566
00:24:07,040 --> 00:24:12,130
And so these input fields for forms
have a lot of capabilities now.

567
00:24:12,130 --> 00:24:14,680
You can do more than just allow
someone to type in a name,

568
00:24:14,680 --> 00:24:16,300
allow someone to type in a password.

569
00:24:16,300 --> 00:24:20,200
We can also allow someone to type in
like a list of countries-- or type

570
00:24:20,200 --> 00:24:23,530
in a country based on some list
of countries using datalist.

571
00:24:23,530 --> 00:24:25,780
And another thing that we
might want to be able to do

572
00:24:25,780 --> 00:24:29,810
is verify that the input
is valid, for instance.

573
00:24:29,810 --> 00:24:33,700
You might imagine that someone's typing
in their email address, for instance.

574
00:24:33,700 --> 00:24:37,280
And we know that not every sequence
of characters is an email address.

575
00:24:37,280 --> 00:24:37,780
Right?

576
00:24:37,780 --> 00:24:40,905
What does an email address need to have
for it to be a valid email address?

577
00:24:40,905 --> 00:24:43,792


578
00:24:43,792 --> 00:24:45,000
It needs to have an @ symbol.

579
00:24:45,000 --> 00:24:45,280
OK.

580
00:24:45,280 --> 00:24:46,571
What else does it need to have?

581
00:24:46,571 --> 00:24:51,440


582
00:24:51,440 --> 00:24:52,750
Other thoughts?

583
00:24:52,750 --> 00:24:55,710
Is just an @ symbol a
valid email address?

584
00:24:55,710 --> 00:24:56,210
No.

585
00:24:56,210 --> 00:24:57,631
It needs to have a dot.

586
00:24:57,631 --> 00:24:58,130
OK.

587
00:24:58,130 --> 00:24:59,900
Maybe it needs to have
a dot somewhere in it.

588
00:24:59,900 --> 00:25:01,191
Anything else it needs to have?

589
00:25:01,191 --> 00:25:04,740


590
00:25:04,740 --> 00:25:06,057
Letters or maybe letters.

591
00:25:06,057 --> 00:25:07,890
So it needs to have
some sort of characters.

592
00:25:07,890 --> 00:25:10,100
There needs to be characters
before the @ sign.

593
00:25:10,100 --> 00:25:12,350
So you might imagine that
there are different ways you

594
00:25:12,350 --> 00:25:14,370
might want to validate
the input to make sure

595
00:25:14,370 --> 00:25:15,960
that it follows a particular format.

596
00:25:15,960 --> 00:25:18,793
Maybe you're asking someone not
just to type in their email address,

597
00:25:18,793 --> 00:25:20,580
but to type in their home address.

598
00:25:20,580 --> 00:25:24,000
And their home address better include
their zip code somewhere, for instance,

599
00:25:24,000 --> 00:25:25,710
or better include a street name.

600
00:25:25,710 --> 00:25:28,470
And so you might imagine that when
someone's inputting something,

601
00:25:28,470 --> 00:25:32,280
you might want some way of verifying
that what it is they're inputting

602
00:25:32,280 --> 00:25:37,200
is actually valid before they're
able to submit a form, for instance,

603
00:25:37,200 --> 00:25:38,660
validating that.

604
00:25:38,660 --> 00:25:42,060
And so in order to do that, what
we're going to take advantage of

605
00:25:42,060 --> 00:25:44,160
are regular expressions.

606
00:25:44,160 --> 00:25:47,160
And so HTML5 adds support
for validating input fields

607
00:25:47,160 --> 00:25:48,750
based on regular expressions.

608
00:25:48,750 --> 00:25:51,052
It's something we'll see
now in HTMLL5, but something

609
00:25:51,052 --> 00:25:53,760
that you'll see all across different
domains of computer science.

610
00:25:53,760 --> 00:25:56,220
And very frequently, if
you want to take a string

611
00:25:56,220 --> 00:25:58,980
and figure out whether that string
matches a particular pattern,

612
00:25:58,980 --> 00:26:01,380
you'll use a regular
expression to do so.

613
00:26:01,380 --> 00:26:03,720
So formally speaking,
and regular expressions

614
00:26:03,720 --> 00:26:07,290
are a big part of thinking about
formal computer science theory.

615
00:26:07,290 --> 00:26:09,249
They define an entire
class of languages called

616
00:26:09,249 --> 00:26:12,498
regular languages, which we're not going
to go into too much detail about here

617
00:26:12,498 --> 00:26:13,020
now.

618
00:26:13,020 --> 00:26:17,160
But the basic idea is that
you can define a pattern that

619
00:26:17,160 --> 00:26:18,710
defines a set of strings--

620
00:26:18,710 --> 00:26:20,250
so sets of strings of text--

621
00:26:20,250 --> 00:26:22,500
that are valid, acceptable inputs.

622
00:26:22,500 --> 00:26:25,690
And in order to create these patterns,
we can do a couple of things.

623
00:26:25,690 --> 00:26:28,500
We can say a pattern might
consist of a character followed

624
00:26:28,500 --> 00:26:31,200
by another character,
like concatenation.

625
00:26:31,200 --> 00:26:33,450
You might also say that
a pattern is a character

626
00:26:33,450 --> 00:26:35,880
or a pattern or some other pattern.

627
00:26:35,880 --> 00:26:36,870
That's alternation.

628
00:26:36,870 --> 00:26:38,820
One thing or another thing.

629
00:26:38,820 --> 00:26:41,520
And | Kleene Star, which
is the idea of maybe you

630
00:26:41,520 --> 00:26:46,680
have one thing or zero or one or two
or multiple of a particular pattern

631
00:26:46,680 --> 00:26:48,510
or a sequence of characters.

632
00:26:48,510 --> 00:26:50,280
So this is all very abstract.

633
00:26:50,280 --> 00:26:53,551
So let's take a look more
formally now at what that actually

634
00:26:53,551 --> 00:26:54,300
means in practice.

635
00:26:54,300 --> 00:26:56,700
We'll take a look at some
sample regular expressions.

636
00:26:56,700 --> 00:27:00,510
And then we'll take a look at how to
actually use those regular expressions

637
00:27:00,510 --> 00:27:02,594
inside of an HTML page in
order to validate input.

638
00:27:02,594 --> 00:27:04,301
And maybe throughout
the rest of the week

639
00:27:04,301 --> 00:27:06,700
we'll see other ways that
we can use these as well.

640
00:27:06,700 --> 00:27:12,265
So if we have a regular expression
on the left that says hi,

641
00:27:12,265 --> 00:27:13,890
what do we think that's going to match?

642
00:27:13,890 --> 00:27:16,880
What is this saying that the
thing that I type in needs to be?

643
00:27:16,880 --> 00:27:19,625


644
00:27:19,625 --> 00:27:20,500
Not a trick question.

645
00:27:20,500 --> 00:27:22,990


646
00:27:22,990 --> 00:27:23,490
A word.

647
00:27:23,490 --> 00:27:25,440
What word specifically?

648
00:27:25,440 --> 00:27:26,340
Hi.

649
00:27:26,340 --> 00:27:29,250
So if I type in, hi, this
regular expression will match.

650
00:27:29,250 --> 00:27:31,650
And if I type in anything
else, it will not match.

651
00:27:31,650 --> 00:27:33,570
And actually I'll show
this to you right now.

652
00:27:33,570 --> 00:27:35,430
Most modern browsers will support this.

653
00:27:35,430 --> 00:27:37,470
So granted, some older
browsers might not.

654
00:27:37,470 --> 00:27:39,220
I'm gonna go and create a new file.

655
00:27:39,220 --> 00:27:40,200
I'll call it--

656
00:27:40,200 --> 00:27:45,720
I'll take the list file and
call this one pattern.html.

657
00:27:45,720 --> 00:27:50,730
And I'll go into
pattern.html, and I'll say--

658
00:27:50,730 --> 00:27:52,622
let me create a form.

659
00:27:52,622 --> 00:27:53,580
And I'll have an input.

660
00:27:53,580 --> 00:27:56,630


661
00:27:56,630 --> 00:28:00,740
And I'll have a button
that will submit it.

662
00:28:00,740 --> 00:28:01,550
And so submit.

663
00:28:01,550 --> 00:28:04,910


664
00:28:04,910 --> 00:28:07,130
The place holder will be
type in something here.

665
00:28:07,130 --> 00:28:09,740
And the pattern, I'll
add a pattern attribute.

666
00:28:09,740 --> 00:28:13,250
And the pattern is going to be, hi.

667
00:28:13,250 --> 00:28:15,680
So I'm saying this input
needs to follow the pattern

668
00:28:15,680 --> 00:28:18,380
of this regular expression, hi.

669
00:28:18,380 --> 00:28:22,880
And so if I open up pattern.html now.

670
00:28:22,880 --> 00:28:24,600
And says type in something here.

671
00:28:24,600 --> 00:28:28,204
If I type in, hi and click
Submit, that will submit the form.

672
00:28:28,204 --> 00:28:31,370
And right now submitting the form does
nothing but take me to the same page.

673
00:28:31,370 --> 00:28:34,970
But if I type in anything else
other than hi-- if I type in hello,

674
00:28:34,970 --> 00:28:38,490
for instance-- and press
Submit, I get an error.

675
00:28:38,490 --> 00:28:40,399
It says, please match
the requested format.

676
00:28:40,399 --> 00:28:43,440
And there are ways you can customize
this error message to show something

677
00:28:43,440 --> 00:28:44,580
a little bit more specific.

678
00:28:44,580 --> 00:28:47,130
But what I've done here
is without any JavaScript,

679
00:28:47,130 --> 00:28:50,520
without any server side code, just
using HTML5 and the features that it

680
00:28:50,520 --> 00:28:54,180
provides, I'm able to validate
that the input-- what I type in--

681
00:28:54,180 --> 00:28:57,642
matches a certain pattern, the
pattern that I want it to match.

682
00:28:57,642 --> 00:28:59,850
And in this case, the pattern
that I want it to match

683
00:28:59,850 --> 00:29:03,650
is literally just the word, hi.

684
00:29:03,650 --> 00:29:06,560
And that's the regular expression.

685
00:29:06,560 --> 00:29:09,200
How do we feel about just that
so far, about that idea of what

686
00:29:09,200 --> 00:29:12,400
a regular expression is, even if we
don't understand the nuances just yet.

687
00:29:12,400 --> 00:29:15,191
But that we can input a pattern
and validate the input to make sure

688
00:29:15,191 --> 00:29:16,160
it matches.

689
00:29:16,160 --> 00:29:16,820
Mostly green.

690
00:29:16,820 --> 00:29:17,390
Some yellow.

691
00:29:17,390 --> 00:29:20,661
Questions about any of this so far?

692
00:29:20,661 --> 00:29:21,160
OK.

693
00:29:21,160 --> 00:29:23,570
Feel free to interrupt with
questions if you have them.

694
00:29:23,570 --> 00:29:27,160
Let's take a look at a more
complicated regular expression.

695
00:29:27,160 --> 00:29:29,410
hi | hello.

696
00:29:29,410 --> 00:29:31,870
So the bar is what we call
the alternation symbol.

697
00:29:31,870 --> 00:29:34,282
It means one thing or the other thing.

698
00:29:34,282 --> 00:29:35,740
And so what is this going to match?

699
00:29:35,740 --> 00:29:37,656
What are the valid things
that I could type in

700
00:29:37,656 --> 00:29:43,516
and my HTML form would accept
based on this regular expression?

701
00:29:43,516 --> 00:29:44,510
AUDIENCE: Hi or hello.

702
00:29:44,510 --> 00:29:45,200
BRIAN YU: Hi or hello.

703
00:29:45,200 --> 00:29:45,430
Right.

704
00:29:45,430 --> 00:29:47,900
I could type in hi, and that
would be a perfectly valid match.

705
00:29:47,900 --> 00:29:50,360
Or I could type in hello, and that
would be a perfectly valid match.

706
00:29:50,360 --> 00:29:51,080
But nothing else.

707
00:29:51,080 --> 00:29:54,330
Had I put anything else other than hi
or hello, and my page will reject it.

708
00:29:54,330 --> 00:29:57,280


709
00:29:57,280 --> 00:30:01,030
So that's alternation.

710
00:30:01,030 --> 00:30:04,930
I also have in regular expressions
the idea of hi question mark.

711
00:30:04,930 --> 00:30:09,750
Question mark means this pattern
or this character-- in this case,

712
00:30:09,750 --> 00:30:12,990
doesn't need to be there, but
it can be there if you want to.

713
00:30:12,990 --> 00:30:14,920
So I type in something
like, hi question mark.

714
00:30:14,920 --> 00:30:18,880
That will allow me to match just
h, meaning the i was optional.

715
00:30:18,880 --> 00:30:19,995
Didn't need to be there.

716
00:30:19,995 --> 00:30:20,870
Or it could be there.

717
00:30:20,870 --> 00:30:23,360
It would also match the word "hi."

718
00:30:23,360 --> 00:30:25,960
So it could match just
h, or it could match hi,

719
00:30:25,960 --> 00:30:27,790
because the i either
is there or it isn't.

720
00:30:27,790 --> 00:30:29,410
And the regular expression
is OK both ways.

721
00:30:29,410 --> 00:30:31,030
So question mark means it's an option.

722
00:30:31,030 --> 00:30:34,630


723
00:30:34,630 --> 00:30:37,940
There is also hi star.

724
00:30:37,940 --> 00:30:41,360
And the star is the Kleene star
that I was referring to earlier.

725
00:30:41,360 --> 00:30:46,330
It means zero or more
of the preceding thing.

726
00:30:46,330 --> 00:30:48,580
And so any thoughts as to
what this is going to match?

727
00:30:48,580 --> 00:30:53,350


728
00:30:53,350 --> 00:30:54,335
Repeat that?

729
00:30:54,335 --> 00:30:55,664
AUDIENCE: [INAUDIBLE]

730
00:30:55,664 --> 00:30:57,080
BRIAN YU: Anything starts with hi.

731
00:30:57,080 --> 00:30:59,640
That's close, but not quite right.

732
00:30:59,640 --> 00:31:00,810
Yeah.

733
00:31:00,810 --> 00:31:02,280
AUDIENCE: [INAUDIBLE]

734
00:31:02,280 --> 00:31:04,420
BRIAN YU: Multiples of
hi is also a good guess.

735
00:31:04,420 --> 00:31:04,920
Very close.

736
00:31:04,920 --> 00:31:06,660
And actually you wouldn't
know unless you've tried it

737
00:31:06,660 --> 00:31:08,670
before what exactly it's going to do.

738
00:31:08,670 --> 00:31:11,130
But if you take those few
ideas and sort of combine it.

739
00:31:11,130 --> 00:31:11,815
Yeah.

740
00:31:11,815 --> 00:31:13,025
AUDIENCE: [INAUDIBLE]

741
00:31:13,025 --> 00:31:14,650
BRIAN YU: H and then any number of i's.

742
00:31:14,650 --> 00:31:15,150
Yeah.

743
00:31:15,150 --> 00:31:18,280
The star only applies to the preceding
character-- the i in this case.

744
00:31:18,280 --> 00:31:21,280
And so this will match h, just
an h, or it will match "hi"

745
00:31:21,280 --> 00:31:23,890
or it will match hi with two
i's, high with three i's, high

746
00:31:23,890 --> 00:31:25,930
with four i's, or on and on and on.

747
00:31:25,930 --> 00:31:27,370
As many eyes as you want.

748
00:31:27,370 --> 00:31:28,975
And it's going to match that sequence.

749
00:31:28,975 --> 00:31:32,550


750
00:31:32,550 --> 00:31:35,990
So i star means zero or more i's.

751
00:31:35,990 --> 00:31:38,610
If you have a plus, that means
one or more of something.

752
00:31:38,610 --> 00:31:40,360
Again, all this is in
the slides, so don't

753
00:31:40,360 --> 00:31:42,070
feel like you need to write
it down or memorize it.

754
00:31:42,070 --> 00:31:43,944
Showing it to you because
regular expressions

755
00:31:43,944 --> 00:31:46,769
come up a lot as you begin working
on building larger applications

756
00:31:46,769 --> 00:31:48,060
and trying to validate strings.

757
00:31:48,060 --> 00:31:51,740
They just tend to be a pretty convenient
way of expressing these ideas.

758
00:31:51,740 --> 00:31:52,810
So hi plus.

759
00:31:52,810 --> 00:31:58,890
That can match hi with one i or two
i's, three i's, four i's or more.

760
00:31:58,890 --> 00:32:02,680
And it's just the idea that
the plus means one or more

761
00:32:02,680 --> 00:32:05,440
of a particular thing.

762
00:32:05,440 --> 00:32:06,644
I see some frowny faces.

763
00:32:06,644 --> 00:32:07,810
Questions about any of that?

764
00:32:07,810 --> 00:32:08,310
Yeah.

765
00:32:08,310 --> 00:32:10,960
AUDIENCE: [INAUDIBLE]

766
00:32:10,960 --> 00:32:12,850
BRIAN YU: The star is zero or more.

767
00:32:12,850 --> 00:32:13,810
So it could be none.

768
00:32:13,810 --> 00:32:15,040
Or it could be more.

769
00:32:15,040 --> 00:32:16,540
The plus is one or more.

770
00:32:16,540 --> 00:32:19,990
So the hi with a plus
requires at least one i,

771
00:32:19,990 --> 00:32:22,251
whereas hi star could be
just each, for instance.

772
00:32:22,251 --> 00:32:22,750
Yeah.

773
00:32:22,750 --> 00:32:24,919


774
00:32:24,919 --> 00:32:30,470
AUDIENCE: [INAUDIBLE]

775
00:32:30,470 --> 00:32:31,240
BRIAN YU: Yes.

776
00:32:31,240 --> 00:32:34,270
Could put the h plus and then i plus.

777
00:32:34,270 --> 00:32:36,270
You can combine all these
in any number of ways.

778
00:32:36,270 --> 00:32:38,010
These are just very simple examples.

779
00:32:38,010 --> 00:32:39,468
But yes, you could do that as well.

780
00:32:39,468 --> 00:32:41,590


781
00:32:41,590 --> 00:32:42,470
All right.

782
00:32:42,470 --> 00:32:44,970
I'll show you a couple more
things that might come in handy.

783
00:32:44,970 --> 00:32:49,520
Hi [? 3 ?],, the i curly brace 3,
means exactly three of those things.

784
00:32:49,520 --> 00:32:54,320
So it will only match this--
h iii, exactly three of those.

785
00:32:54,320 --> 00:32:56,810
The dot matches any character.

786
00:32:56,810 --> 00:32:58,810
So it could match a
letter, a capital letter.

787
00:32:58,810 --> 00:33:00,560
It could match a number
or another number.

788
00:33:00,560 --> 00:33:02,851
It could match a exclamation
point or other punctuation

789
00:33:02,851 --> 00:33:05,330
symbol, or any other
character that you can type.

790
00:33:05,330 --> 00:33:08,180
The dot will match just that character.

791
00:33:08,180 --> 00:33:10,310
If you want to match a
literal dot, like match

792
00:33:10,310 --> 00:33:14,079
the period character on the
keyboard, that will be backslash dot.

793
00:33:14,079 --> 00:33:16,370
You might remember from CS50
that very frequently we'll

794
00:33:16,370 --> 00:33:19,040
use a backslash as an escape
sequence, a way of saying,

795
00:33:19,040 --> 00:33:21,710
I mean to use exactly
this-- exactly the dot.

796
00:33:21,710 --> 00:33:24,176
And that will actually match
the literal period character,

797
00:33:24,176 --> 00:33:25,550
if that's something I want to do.

798
00:33:25,550 --> 00:33:30,500
Because the dot itself
just means any character.

799
00:33:30,500 --> 00:33:33,440
We also have other expressions we
can use that I'll show you briefly.

800
00:33:33,440 --> 00:33:36,650
If I say in square
brackets like, a-z, that

801
00:33:36,650 --> 00:33:41,260
will match any lowercase letter--
a, b, c, all the way up through z.

802
00:33:41,260 --> 00:33:43,820
And so that's lowercase letters.

803
00:33:43,820 --> 00:33:45,104
Question?

804
00:33:45,104 --> 00:33:47,014
AUDIENCE: [INAUDIBLE]

805
00:33:47,014 --> 00:33:49,180
BRIAN YU: The dot will also
match a space character.

806
00:33:49,180 --> 00:33:49,940
Yes.

807
00:33:49,940 --> 00:33:52,160
There is a way to
literally match white space

808
00:33:52,160 --> 00:33:55,370
only with backslash s
to say just white space.

809
00:33:55,370 --> 00:33:58,790
But the dot will match that as well.

810
00:33:58,790 --> 00:34:04,160
So lowercase a-z in the square braces
will match any lowercase letter.

811
00:34:04,160 --> 00:34:06,620
In square brackets,
if I have capital A-Z,

812
00:34:06,620 --> 00:34:09,739
that will match any uppercase letter--
capital A, B, C, all the way up

813
00:34:09,739 --> 00:34:10,650
through Z.

814
00:34:10,650 --> 00:34:12,830
And if I want to match
a digit, how would

815
00:34:12,830 --> 00:34:15,070
I do that based on these patterns?

816
00:34:15,070 --> 00:34:19,639
So square bracket capital A dash
capital Z closed square bracket

817
00:34:19,639 --> 00:34:21,320
matches any capital letter.

818
00:34:21,320 --> 00:34:26,870
If I wanted to match a digit, like
3, or 2, or 8, what would it be?

819
00:34:26,870 --> 00:34:28,010
Yeah.

820
00:34:28,010 --> 00:34:29,440
AUDIENCE: [INAUDIBLE]

821
00:34:29,440 --> 00:34:30,440
BRIAN YU: Yeah, exactly.

822
00:34:30,440 --> 00:34:32,857
Square bracket 0-9 other bracket.

823
00:34:32,857 --> 00:34:34,190
That's going to match any digit.

824
00:34:34,190 --> 00:34:38,940
It's going to match 0, 1,
2, all the way up through 9.

825
00:34:38,940 --> 00:34:39,618
Yeah.

826
00:34:39,618 --> 00:34:42,108
AUDIENCE: [INAUDIBLE]

827
00:34:42,108 --> 00:34:44,624


828
00:34:44,624 --> 00:34:46,540
BRIAN YU: You can put
something in parentheses

829
00:34:46,540 --> 00:34:48,639
and say, parentheses hi star.

830
00:34:48,639 --> 00:34:51,801
And that will match any number
of the literal word "hi."

831
00:34:51,801 --> 00:34:52,300
All right.

832
00:34:52,300 --> 00:34:54,234
So that was a lot of
information all at once.

833
00:34:54,234 --> 00:34:56,650
But let's try and take a look
at a bigger example of this,

834
00:34:56,650 --> 00:34:58,310
see why is this actually practical.

835
00:34:58,310 --> 00:35:03,280
It's a lot of syntax here of trying
to build out our own way of describing

836
00:35:03,280 --> 00:35:05,260
languages, describing strings.

837
00:35:05,260 --> 00:35:07,870
Let's take a look at
this expression here.

838
00:35:07,870 --> 00:35:08,560
Complicated.

839
00:35:08,560 --> 00:35:11,500
So take a minute, look at it,
think about it based on the things

840
00:35:11,500 --> 00:35:12,499
that we've talked about.

841
00:35:12,499 --> 00:35:16,780
And try and figure out why might I want
an HTML page to have this expression?

842
00:35:16,780 --> 00:35:18,580
Like, what pattern is
it trying to match?

843
00:35:18,580 --> 00:35:20,517
What am I trying to validate here?

844
00:35:20,517 --> 00:35:21,850
So think about that on your own.

845
00:35:21,850 --> 00:35:22,750
Take a look at it.

846
00:35:22,750 --> 00:35:25,000
You can look back to the
lecture slides on the website

847
00:35:25,000 --> 00:35:27,780
if you want to remember what
some of the syntax means.

848
00:35:27,780 --> 00:35:29,312
But what is this going to match?

849
00:35:29,312 --> 00:35:30,460
AUDIENCE: [INAUDIBLE]

850
00:35:30,460 --> 00:35:31,180
BRIAN YU: It's a phone number.

851
00:35:31,180 --> 00:35:31,420
Great.

852
00:35:31,420 --> 00:35:32,461
Why is it a phone number?

853
00:35:32,461 --> 00:35:33,840
Someone else explain that to me.

854
00:35:33,840 --> 00:35:35,486
Yeah.

855
00:35:35,486 --> 00:35:38,378
AUDIENCE: [INAUDIBLE]

856
00:35:38,378 --> 00:35:41,950


857
00:35:41,950 --> 00:35:42,700
BRIAN YU: Exactly.

858
00:35:42,700 --> 00:35:44,460
So what I'm doing is
I'm matching digits.

859
00:35:44,460 --> 00:35:48,050
Remember [INAUDIBLE] square bracket 0-9.

860
00:35:48,050 --> 00:35:49,235
That's giving us a digit.

861
00:35:49,235 --> 00:35:51,860
And then in curly braces we're
saying how many of those things.

862
00:35:51,860 --> 00:35:52,340
We're saying, OK.

863
00:35:52,340 --> 00:35:53,090
Three digits.

864
00:35:53,090 --> 00:35:54,560
That'll be our area code.

865
00:35:54,560 --> 00:35:57,830
Then we're matching the hyphen
character, then three more digits, then

866
00:35:57,830 --> 00:35:59,450
another hyphen, and then four digits.

867
00:35:59,450 --> 00:36:01,700
And so that's going to
match for us a phone number.

868
00:36:01,700 --> 00:36:03,200
So it could match any phone number--

869
00:36:03,200 --> 00:36:05,230
any US phone number, I suppose--

870
00:36:05,230 --> 00:36:07,199
that follows that same general format.

871
00:36:07,199 --> 00:36:08,990
Now it's not going to
match it if the phone

872
00:36:08,990 --> 00:36:12,200
number has parentheses around the
area code or doesn't have the dashes,

873
00:36:12,200 --> 00:36:13,070
for instance.

874
00:36:13,070 --> 00:36:15,260
So if you actually wanted
to match a phone number,

875
00:36:15,260 --> 00:36:18,380
you might want to be a little
bit more specific than just this,

876
00:36:18,380 --> 00:36:20,900
or modify your regular
expression slightly.

877
00:36:20,900 --> 00:36:26,050
But this pattern is going
to match a phone number.

878
00:36:26,050 --> 00:36:30,640
Let's take a look at a slightly
more complicated example.

879
00:36:30,640 --> 00:36:33,640
Let's look at this one.

880
00:36:33,640 --> 00:36:34,890
So this looks totally obscure.

881
00:36:34,890 --> 00:36:36,598
But I promise, you've
seen enough already

882
00:36:36,598 --> 00:36:39,130
to be able to figure
out what this means.

883
00:36:39,130 --> 00:36:40,960
What is this trying to
approximately match?

884
00:36:40,960 --> 00:36:42,835
Think about it first
before you say anything.

885
00:36:42,835 --> 00:36:44,977


886
00:36:44,977 --> 00:36:47,560
There's a character here that
might be a little bit of a hint.

887
00:36:47,560 --> 00:36:52,130


888
00:36:52,130 --> 00:36:52,630
All right.

889
00:36:52,630 --> 00:36:54,340
What are we matching?

890
00:36:54,340 --> 00:36:55,150
An email address.

891
00:36:55,150 --> 00:36:55,690
Great.

892
00:36:55,690 --> 00:36:56,920
Why is this an email address?

893
00:36:56,920 --> 00:36:58,836
Or why is this approximating
an email address?

894
00:36:58,836 --> 00:37:01,420


895
00:37:01,420 --> 00:37:03,950
What does this expression actually mean?

896
00:37:03,950 --> 00:37:05,410
Yeah.

897
00:37:05,410 --> 00:37:08,300
AUDIENCE: [INAUDIBLE]

898
00:37:08,300 --> 00:37:17,125


899
00:37:17,125 --> 00:37:17,750
BRIAN YU: Yeah.

900
00:37:17,750 --> 00:37:19,166
So we can sort of break this down.

901
00:37:19,166 --> 00:37:21,540
This dot plus means--

902
00:37:21,540 --> 00:37:23,097
the dot means any character.

903
00:37:23,097 --> 00:37:24,680
And again, the plus means one or more.

904
00:37:24,680 --> 00:37:28,790
So one or more characters, than
an @ symbol, then a plus again.

905
00:37:28,790 --> 00:37:30,770
Remember, dot plus is
one or more characters.

906
00:37:30,770 --> 00:37:35,390
One or more characters, an @ symbol,
one or more characters, s backslash dot.

907
00:37:35,390 --> 00:37:37,370
What's backslash dot?

908
00:37:37,370 --> 00:37:40,627
The literal [INAUDIBLE] followed
by one or more characters.

909
00:37:40,627 --> 00:37:42,710
And of course, there are
actually a few more rules

910
00:37:42,710 --> 00:37:45,140
for actually validating what
a valid email address is.

911
00:37:45,140 --> 00:37:46,550
But this is pretty close.

912
00:37:46,550 --> 00:37:48,540
It'll validate name@example.com.

913
00:37:48,540 --> 00:37:51,830
It'll match, generally speaking, what
an email address would look like.

914
00:37:51,830 --> 00:37:53,010
It might [INAUDIBLE].

915
00:37:53,010 --> 00:37:56,760


916
00:37:56,760 --> 00:37:57,590
All right.

917
00:37:57,590 --> 00:38:02,070
Let's do one last example,
try and validate some input.

918
00:38:02,070 --> 00:38:05,580
Let's take a look at this expression.

919
00:38:05,580 --> 00:38:08,021
What's it going to match?

920
00:38:08,021 --> 00:38:10,022
It's a little bit more complicated.

921
00:38:10,022 --> 00:38:18,878


922
00:38:18,878 --> 00:38:21,030
I'll remind you of what
a couple of symbols mean.

923
00:38:21,030 --> 00:38:22,500
The bar is alternation.

924
00:38:22,500 --> 00:38:26,190
It means one thing or another thing.

925
00:38:26,190 --> 00:38:28,140
The question mark is an option.

926
00:38:28,140 --> 00:38:30,540
It means something is optional.

927
00:38:30,540 --> 00:38:31,170
Good question.

928
00:38:31,170 --> 00:38:36,990
So the question-- the zero on the
left alternating with just minus sign

929
00:38:36,990 --> 00:38:39,510
or with the rest of
the pattern, this has

930
00:38:39,510 --> 00:38:43,650
to do with the precedence of like,
which operators and regular expressions

931
00:38:43,650 --> 00:38:45,450
bind more tightly than others.

932
00:38:45,450 --> 00:38:49,080
And this alternation is pretty
loose in terms of its binding.

933
00:38:49,080 --> 00:38:53,091
This alteration here means zero or
everything else on the other side.

934
00:38:53,091 --> 00:38:54,840
And if you wanted to
bind it more tightly,

935
00:38:54,840 --> 00:38:58,690
you could use parentheses to say,
zero or just something closer to it.

936
00:38:58,690 --> 00:39:02,380
But the alternation means this side
or anything else on the other side.

937
00:39:02,380 --> 00:39:03,400
Good question.

938
00:39:03,400 --> 00:39:05,048
Yeah.

939
00:39:05,048 --> 00:39:08,520
AUDIENCE: [INAUDIBLE]

940
00:39:08,520 --> 00:39:14,570


941
00:39:14,570 --> 00:39:15,570
BRIAN YU: Good question.

942
00:39:15,570 --> 00:39:19,020
Can I change the HTML by going--

943
00:39:19,020 --> 00:39:22,300
like, if I'm the user of the page,
can I change what the pattern is?

944
00:39:22,300 --> 00:39:23,649
We'll find out, actually.

945
00:39:23,649 --> 00:39:25,440
If I wanted to be able
to type in something

946
00:39:25,440 --> 00:39:27,690
like 2.8, which right now
this form isn't letting me

947
00:39:27,690 --> 00:39:31,300
do, because it doesn't
match the requested pattern.

948
00:39:31,300 --> 00:39:33,510
If I go into the inspector.

949
00:39:33,510 --> 00:39:35,670
And so most browsers--

950
00:39:35,670 --> 00:39:38,640
Google Chrome included-- let you
open up the Chrome inspector, which

951
00:39:38,640 --> 00:39:40,760
is something we'll be
using throughout this week.

952
00:39:40,760 --> 00:39:46,239
And I can actually look at the
things that compose this HTML page.

953
00:39:46,239 --> 00:39:48,280
And inside the inspector
as the user of the page,

954
00:39:48,280 --> 00:39:50,970
I can see that over
here there is the input.

955
00:39:50,970 --> 00:39:52,020
And there is the pattern.

956
00:39:52,020 --> 00:39:52,520
Right.

957
00:39:52,520 --> 00:39:54,510
There is the pattern
that this is matching--

958
00:39:54,510 --> 00:39:55,854
this input field is matching.

959
00:39:55,854 --> 00:39:58,020
And I can actually go in
there, and I can change it.

960
00:39:58,020 --> 00:39:59,310
I can say, all right.

961
00:39:59,310 --> 00:40:01,780
Let me change the pattern to--

962
00:40:01,780 --> 00:40:03,460
let's change it to dot star.

963
00:40:03,460 --> 00:40:04,890
Dot means any character.

964
00:40:04,890 --> 00:40:06,330
Star means zero or more.

965
00:40:06,330 --> 00:40:08,802
Dot star is literally
going to match anything.

966
00:40:08,802 --> 00:40:10,740
So I've changed it to dot star.

967
00:40:10,740 --> 00:40:12,150
Now I type in 2.8.

968
00:40:12,150 --> 00:40:12,990
I click Submit.

969
00:40:12,990 --> 00:40:14,100
And it submits just fine.

970
00:40:14,100 --> 00:40:16,890
So yes, you can go in and
actually change the pattern.

971
00:40:16,890 --> 00:40:19,560
And that will allow you
to bypass this validation.

972
00:40:19,560 --> 00:40:20,820
And so there is a lesson
to be learned there,

973
00:40:20,820 --> 00:40:22,945
which is that if you're
building a web application,

974
00:40:22,945 --> 00:40:25,809
and you're relying on
the HTML validation here,

975
00:40:25,809 --> 00:40:27,600
that might not be the
smartest thing to do.

976
00:40:27,600 --> 00:40:30,150
Because someone who is
being super adversarial

977
00:40:30,150 --> 00:40:32,709
could go in and actually change
the pattern in the HTML page.

978
00:40:32,709 --> 00:40:34,500
Or more likely, someone
might be just using

979
00:40:34,500 --> 00:40:37,181
an older browser that doesn't
support this particular feature.

980
00:40:37,181 --> 00:40:38,680
And so it's not quite going to work.

981
00:40:38,680 --> 00:40:41,400
So even if you are doing this
validation to block some invalid

982
00:40:41,400 --> 00:40:45,330
inputs on the client side in the
HTML page, probably also a good idea

983
00:40:45,330 --> 00:40:48,610
to on the server side be
validating those inputs as well.

984
00:40:48,610 --> 00:40:51,741
And when we go to talking about flask
web applications and building APIs,

985
00:40:51,741 --> 00:40:53,490
those are some of the
different ideas that

986
00:40:53,490 --> 00:40:56,520
are going to come up again and again.

987
00:40:56,520 --> 00:41:00,525
Questions about any of that?

988
00:41:00,525 --> 00:41:01,491
Yeah.

989
00:41:01,491 --> 00:41:03,906
AUDIENCE: [INAUDIBLE]

990
00:41:03,906 --> 00:41:05,850


991
00:41:05,850 --> 00:41:09,030
BRIAN YU: The regular expression goes
in the pattern of the input element.

992
00:41:09,030 --> 00:41:11,220
And when we get to Python and
JavaScript, if you remind me,

993
00:41:11,220 --> 00:41:13,440
I can also show you how to take
advantage of regular expressions

994
00:41:13,440 --> 00:41:15,150
in other programming languages as well.

995
00:41:15,150 --> 00:41:16,580
They end up proving quite helpful.

996
00:41:16,580 --> 00:41:18,959
In CS50, for instance, if
you've ever used Help 50,

997
00:41:18,959 --> 00:41:21,000
that tool that takes a
command line error message

998
00:41:21,000 --> 00:41:23,640
and allows you to understand
what it means by presenting it

999
00:41:23,640 --> 00:41:25,350
in a little more human-friendly terms.

1000
00:41:25,350 --> 00:41:30,420
That application is entirely built on
just Python-based regular expressions,

1001
00:41:30,420 --> 00:41:34,187
where the Python code is just looking
for an error message that matches

1002
00:41:34,187 --> 00:41:35,520
a particular regular expression.

1003
00:41:35,520 --> 00:41:38,780
And if it finds it, it produces some
sort of helpful output based on that.

1004
00:41:38,780 --> 00:41:40,722
So other languages-- not just HTML--

1005
00:41:40,722 --> 00:41:42,180
can take advantage of this feature.

1006
00:41:42,180 --> 00:41:44,880
It tends to be a common way of
trying to represent patterns

1007
00:41:44,880 --> 00:41:47,790
of strings, patterns of inputs.

1008
00:41:47,790 --> 00:41:48,570
All right.

1009
00:41:48,570 --> 00:41:51,279
So that's just a brief tour of
some of the new features of HTML5.

1010
00:41:51,279 --> 00:41:54,528
There are a lot more than we're actually
going to be able to talk about today.

1011
00:41:54,528 --> 00:41:57,540
But I do want to transition before
we break for morning projects

1012
00:41:57,540 --> 00:42:01,950
to talk a little bit about CSS
and about how to style our pages.

1013
00:42:01,950 --> 00:42:04,380
And so with CSS, or
cascading style sheets,

1014
00:42:04,380 --> 00:42:07,070
is a way of adding
style to our web pages.

1015
00:42:07,070 --> 00:42:11,220


1016
00:42:11,220 --> 00:42:14,040
And within CSS, as you
might recall, we're

1017
00:42:14,040 --> 00:42:18,674
going to style an HTML element by
using a number of CSS properties.

1018
00:42:18,674 --> 00:42:21,090
And so some common CSS properties
that you might have seen

1019
00:42:21,090 --> 00:42:25,050
are things like color, in order to
change the color of a particular thing.

1020
00:42:25,050 --> 00:42:29,040
Or text align if I want to align
things to be centered or left justified

1021
00:42:29,040 --> 00:42:30,670
or right justified, for instance.

1022
00:42:30,670 --> 00:42:33,150
And so I'll show you very simply
a number of different ways

1023
00:42:33,150 --> 00:42:36,921
that we can try and include
CSS code inside of our page.

1024
00:42:36,921 --> 00:42:38,250
Let me create a new file.

1025
00:42:38,250 --> 00:42:40,095
I'll call it style.html.

1026
00:42:40,095 --> 00:42:44,490


1027
00:42:44,490 --> 00:42:45,610
Style.

1028
00:42:45,610 --> 00:42:46,110
Or nope.

1029
00:42:46,110 --> 00:42:47,981
Not style.

1030
00:42:47,981 --> 00:42:48,480
Header.

1031
00:42:48,480 --> 00:42:51,460


1032
00:42:51,460 --> 00:42:53,440
So let me create an H1--

1033
00:42:53,440 --> 00:42:58,000
a big heading that just
says Welcome to CS50 Beyond.

1034
00:42:58,000 --> 00:43:02,520
And maybe I want to make that
heading red, for instance.

1035
00:43:02,520 --> 00:43:05,650
And so what I might do
is add to this H2 tag.

1036
00:43:05,650 --> 00:43:07,090
Add a style attribute.

1037
00:43:07,090 --> 00:43:11,212
And here I want to say, color colon red.

1038
00:43:11,212 --> 00:43:13,420
The red little square is
just added by my text editor

1039
00:43:13,420 --> 00:43:15,220
to show me what the color's
actually going to look like.

1040
00:43:15,220 --> 00:43:16,760
Some of the more modern
text editors will do this,

1041
00:43:16,760 --> 00:43:18,609
but it's not actually part of the text.

1042
00:43:18,609 --> 00:43:19,900
And here I'm saying, all right.

1043
00:43:19,900 --> 00:43:21,530
I want to style this element.

1044
00:43:21,530 --> 00:43:24,370
The CSS property is the word "color."

1045
00:43:24,370 --> 00:43:27,130
It's the styling property that
I want to add to this element.

1046
00:43:27,130 --> 00:43:32,050
And red is its value such that
if I now open up style.html,

1047
00:43:32,050 --> 00:43:33,810
I see Welcome to CS50 Beyond.

1048
00:43:33,810 --> 00:43:36,320
And it is, in fact, red.

1049
00:43:36,320 --> 00:43:40,190
Now what I've done here is
what's called inline styling.

1050
00:43:40,190 --> 00:43:42,410
I've taken the styling
and put it directly

1051
00:43:42,410 --> 00:43:44,720
on the element that I want to style.

1052
00:43:44,720 --> 00:43:48,020
Generally what you'll see, and what
tends to be a little bit better design,

1053
00:43:48,020 --> 00:43:53,420
is instead of doing that to up here
in the header section of the page

1054
00:43:53,420 --> 00:43:55,020
add a style section.

1055
00:43:55,020 --> 00:43:55,520
Right.

1056
00:43:55,520 --> 00:43:58,400
And inside the style
section of the page I

1057
00:43:58,400 --> 00:44:02,750
might say, all right,
each one color red.

1058
00:44:02,750 --> 00:44:04,410
So I'll do something like this.

1059
00:44:04,410 --> 00:44:08,330
And what you're seeing here is
an example of a CSS selector.

1060
00:44:08,330 --> 00:44:12,470
This H1 here is a CSS
selector that is me saying,

1061
00:44:12,470 --> 00:44:14,630
I would like to style H1 tags.

1062
00:44:14,630 --> 00:44:18,320
Any H1 tags through the page I want
to style in this particular way.

1063
00:44:18,320 --> 00:44:19,670
I want to give them a color.

1064
00:44:19,670 --> 00:44:23,350
And that color should be red.

1065
00:44:23,350 --> 00:44:26,630
So now if I refresh the page,
it looks exactly the same.

1066
00:44:26,630 --> 00:44:30,440
But what's different now is that
if I were to add multiple H1 tags,

1067
00:44:30,440 --> 00:44:34,700
if I wanted to add another H1 tag
that says hello, for instance,

1068
00:44:34,700 --> 00:44:35,750
and refresh the page.

1069
00:44:35,750 --> 00:44:37,820
They're both styled as red.

1070
00:44:37,820 --> 00:44:42,815
Because what this CSS rule is saying
is, I want to style all of the H1 tags.

1071
00:44:42,815 --> 00:44:45,260
And I want to style
all of them to be red,

1072
00:44:45,260 --> 00:44:50,370
not just the one that I was applying
inline styling to in the case before.

1073
00:44:50,370 --> 00:44:52,580
So this is all stuff that
should be familiar to you

1074
00:44:52,580 --> 00:44:57,630
from when we were working on building
web pages in CS50, for instance.

1075
00:44:57,630 --> 00:44:58,899
And so I could add--

1076
00:44:58,899 --> 00:44:59,690
we'll try one more.

1077
00:44:59,690 --> 00:45:00,650
If I added div--

1078
00:45:00,650 --> 00:45:04,250
div is generally just for any sort
of vertical section of your code.

1079
00:45:04,250 --> 00:45:07,190
And I say, hello, world.

1080
00:45:07,190 --> 00:45:08,690
This div is not going to be red.

1081
00:45:08,690 --> 00:45:13,700
This div is going to show up as
black, because it's not in an H1 tag.

1082
00:45:13,700 --> 00:45:19,342
And I was only styling the H1
tags to be red, not the divs.

1083
00:45:19,342 --> 00:45:21,050
Another thing that
you might commonly see

1084
00:45:21,050 --> 00:45:23,466
is you could also take this
style code and separate it out

1085
00:45:23,466 --> 00:45:26,030
into a separate file,
put it in a dot CSS file,

1086
00:45:26,030 --> 00:45:29,155
and then just link to that dot CSS
file from all of your HTML pages.

1087
00:45:29,155 --> 00:45:31,280
There are some examples of
that in the source code.

1088
00:45:31,280 --> 00:45:34,190
I'm going to leave it here for now,
just so it's easier to see visually.

1089
00:45:34,190 --> 00:45:36,106
But know that you'll
commonly see that happen.

1090
00:45:36,106 --> 00:45:38,690
And it's an easy way of
taking the same CSS code

1091
00:45:38,690 --> 00:45:41,570
and using it across multiple
different HTML pages,

1092
00:45:41,570 --> 00:45:45,440
so they can all reference
the [INAUDIBLE]..

1093
00:45:45,440 --> 00:45:46,430
All right.

1094
00:45:46,430 --> 00:45:48,800
Questions about HTML
before we start-- or about

1095
00:45:48,800 --> 00:45:52,010
CSS before we start exploring
some of the more advanced features

1096
00:45:52,010 --> 00:45:55,430
that CSS offers for us?

1097
00:45:55,430 --> 00:45:56,570
All right.

1098
00:45:56,570 --> 00:45:58,970
Seem to be feeling OK about this.

1099
00:45:58,970 --> 00:46:03,620
So each one is how we
style just any general tag.

1100
00:46:03,620 --> 00:46:06,624
If I wanted to style something
with a particular ID, something

1101
00:46:06,624 --> 00:46:07,790
you might see as, all right.

1102
00:46:07,790 --> 00:46:11,030
This H1 has an id of Welcome.

1103
00:46:11,030 --> 00:46:13,190
And so if I only want to style this--

1104
00:46:13,190 --> 00:46:14,870
Welcome to CS50 Beyond--

1105
00:46:14,870 --> 00:46:19,040
but I don't want to style
the other parts of this page,

1106
00:46:19,040 --> 00:46:24,470
rather than styling H1, I could
style pound sign or hashtag welcome.

1107
00:46:24,470 --> 00:46:26,750
Where again, the pound
sign stands for id.

1108
00:46:26,750 --> 00:46:30,290
So I only want to style the
thing that has an id of Welcome.

1109
00:46:30,290 --> 00:46:33,490
And nothing else is going
to be styled as red.

1110
00:46:33,490 --> 00:46:34,480
And I refresh that.

1111
00:46:34,480 --> 00:46:34,980
OK.

1112
00:46:34,980 --> 00:46:36,810
Only the first thing
now is styled as red,

1113
00:46:36,810 --> 00:46:40,350
because that's the only one
that has that particular ID.

1114
00:46:40,350 --> 00:46:43,320
I can also say things
by their class name.

1115
00:46:43,320 --> 00:46:48,090
So if this one's class name is
Welcome, and maybe this div also

1116
00:46:48,090 --> 00:46:50,340
has a class name called Welcome.

1117
00:46:50,340 --> 00:46:53,460
Then up here, rather
than pound sign welcome,

1118
00:46:53,460 --> 00:46:58,370
which means the thing that has an id
of welcome, I can also say dot welcome.

1119
00:46:58,370 --> 00:47:01,600
And the dot means a thing that
has a particular class name.

1120
00:47:01,600 --> 00:47:06,300
This will style anything
whose class is Welcome.

1121
00:47:06,300 --> 00:47:07,740
And so I refresh this.

1122
00:47:07,740 --> 00:47:13,350
And now both the Welcome heading up at
the top and also the Div down below,

1123
00:47:13,350 --> 00:47:16,710
those are both styled as red, because
they both have that particular class

1124
00:47:16,710 --> 00:47:19,240
name.

1125
00:47:19,240 --> 00:47:21,550
What questions do you have so far?

1126
00:47:21,550 --> 00:47:22,606
Yeah.

1127
00:47:22,606 --> 00:47:25,750
AUDIENCE: [INAUDIBLE]

1128
00:47:25,750 --> 00:47:38,500


1129
00:47:38,500 --> 00:47:41,620
BRIAN YU: So the question is, when
would you not want to use class

1130
00:47:41,620 --> 00:47:42,700
instead of id?

1131
00:47:42,700 --> 00:47:45,400
Generally speaking, if there
is something that is unique,

1132
00:47:45,400 --> 00:47:47,440
it makes a little bit
more sense to use the id.

1133
00:47:47,440 --> 00:47:50,290
It just helps to avoid
against potential mistakes.

1134
00:47:50,290 --> 00:47:53,180
That if there is
something that is unique,

1135
00:47:53,180 --> 00:47:56,950
you will want to specify it as unique,
because in case you added another one,

1136
00:47:56,950 --> 00:48:00,227
that probably means that something
is wrong in your HTML page.

1137
00:48:00,227 --> 00:48:03,310
This might not be as much of an issue
if you just have a single HTML page.

1138
00:48:03,310 --> 00:48:05,260
But when you start to
dynamically generate

1139
00:48:05,260 --> 00:48:07,700
web pages, which we'll see
in like Flask, for instance,

1140
00:48:07,700 --> 00:48:09,616
then it could become a
little more applicable.

1141
00:48:09,616 --> 00:48:12,861


1142
00:48:12,861 --> 00:48:13,360
All right.

1143
00:48:13,360 --> 00:48:17,670
So [INAUDIBLE] styling things based
on their tag or based on their id

1144
00:48:17,670 --> 00:48:20,490
or based on their CSS class.

1145
00:48:20,490 --> 00:48:24,510
There are also different
ways of trying to--

1146
00:48:24,510 --> 00:48:28,650
different selectors that we can use to
style things in different ways as well.

1147
00:48:28,650 --> 00:48:31,110
So let me get rid of these class names.

1148
00:48:31,110 --> 00:48:34,590
Let's say I wanted to
style both H1's and divs.

1149
00:48:34,590 --> 00:48:36,690
I wanted to style them both.

1150
00:48:36,690 --> 00:48:37,950
And so I might say H1,div.

1151
00:48:37,950 --> 00:48:40,880


1152
00:48:40,880 --> 00:48:44,280
The comma is what we call the
multiple element selector.

1153
00:48:44,280 --> 00:48:48,390
It's going to select for
multiple different CSS selectors

1154
00:48:48,390 --> 00:48:51,290
and style them both in a particular way.

1155
00:48:51,290 --> 00:48:52,790
So H1,div.

1156
00:48:52,790 --> 00:48:54,120
We'll refresh that.

1157
00:48:54,120 --> 00:48:56,670
Now all the H1's are styled
red, and all the divs

1158
00:48:56,670 --> 00:49:02,010
are styled red, because I'm applying
this styling to multiple things.

1159
00:49:02,010 --> 00:49:06,030
And in fact, I'll show you if
we go here for just a moment,

1160
00:49:06,030 --> 00:49:08,281
there are a whole bunch of
selectors that you can use.

1161
00:49:08,281 --> 00:49:11,405
I won't show you all of them, because
there are some examples in the source

1162
00:49:11,405 --> 00:49:12,120
code example.

1163
00:49:12,120 --> 00:49:14,550
But the idea is you can style
not just multiple elements,

1164
00:49:14,550 --> 00:49:16,410
but you can style descendants.

1165
00:49:16,410 --> 00:49:21,900
If I were to style like div space
H1, that would only style H1's that

1166
00:49:21,900 --> 00:49:26,590
are inside of divs, and not style H1's
that are outside of divs, for instance.

1167
00:49:26,590 --> 00:49:29,640
Their child selector-- if I want
to say, all right, style just

1168
00:49:29,640 --> 00:49:31,140
the immediate children of something.

1169
00:49:31,140 --> 00:49:35,650
So an H1 immediately inside of
a div and not something else.

1170
00:49:35,650 --> 00:49:38,734
[INAUDIBLE] as well for trying to
style things in particular ways.

1171
00:49:38,734 --> 00:49:41,400
The ones that I do want to talk
to you about [INAUDIBLE] they're

1172
00:49:41,400 --> 00:49:45,660
a little more [INAUDIBLE] are the pseudo
class and pseudo element selectors.

1173
00:49:45,660 --> 00:49:48,420
So the pseudo class
is a selector that you

1174
00:49:48,420 --> 00:49:52,620
can use to style a particular
element in a particular way only

1175
00:49:52,620 --> 00:49:54,870
under certain conditions.

1176
00:49:54,870 --> 00:49:56,460
So a common thing for this--

1177
00:49:56,460 --> 00:49:59,850
thinking about mouse position--
that when you hover over a link

1178
00:49:59,850 --> 00:50:02,370
or when you hover over
a button, you can change

1179
00:50:02,370 --> 00:50:05,502
the style of that element based on
the fact that you're hovering over it.

1180
00:50:05,502 --> 00:50:08,460
This is something that you commonly
see in response to more dynamic web

1181
00:50:08,460 --> 00:50:09,570
applications.

1182
00:50:09,570 --> 00:50:16,890
And so let me actually show you
hover.html inside the source code

1183
00:50:16,890 --> 00:50:18,160
examples.

1184
00:50:18,160 --> 00:50:21,430
So if we go into source code.

1185
00:50:21,430 --> 00:50:26,250
And let me open up hove.html.

1186
00:50:26,250 --> 00:50:28,704
What you see is inside the
body of this web application,

1187
00:50:28,704 --> 00:50:29,870
I just have a single button.

1188
00:50:29,870 --> 00:50:33,570
And that button says, click me.

1189
00:50:33,570 --> 00:50:34,380
[INAUDIBLE]

1190
00:50:34,380 --> 00:50:37,050
Up in the style section
of the page I say, OK.

1191
00:50:37,050 --> 00:50:40,560
The button is going to have a width
of 200 pixels, a height of 50 pixels,

1192
00:50:40,560 --> 00:50:43,170
and the font size is 24 point font.

1193
00:50:43,170 --> 00:50:44,970
And the background color is green.

1194
00:50:44,970 --> 00:50:47,940
So a whole bunch of CSS
properties and their values.

1195
00:50:47,940 --> 00:50:51,780
And then I have this pseudo class
selector-- button colon hover.

1196
00:50:51,780 --> 00:50:54,920
Which is to say when I
hover over the button,

1197
00:50:54,920 --> 00:50:57,010
here is they way I want
the styling to change.

1198
00:50:57,010 --> 00:51:00,120
And in particular, I want to change
the background color to orange

1199
00:51:00,120 --> 00:51:01,900
instead of green.

1200
00:51:01,900 --> 00:51:05,734
So if I open up hover.html,
here's my button.

1201
00:51:05,734 --> 00:51:07,400
And as you can see, the button is green.

1202
00:51:07,400 --> 00:51:11,332
But as soon as I hover over it,
the button changes to orange.

1203
00:51:11,332 --> 00:51:13,040
Hover over the button,
the style changes.

1204
00:51:13,040 --> 00:51:15,650
When I'm not hovering over
it, stays its normal green.

1205
00:51:15,650 --> 00:51:20,360
Because the pseudo class CSS selector
is only going to style something

1206
00:51:20,360 --> 00:51:21,980
under certain conditions.

1207
00:51:21,980 --> 00:51:25,220


1208
00:51:25,220 --> 00:51:27,521
Questions about that.

1209
00:51:27,521 --> 00:51:28,495
Yeah.

1210
00:51:28,495 --> 00:51:30,930
AUDIENCE: [INAUDIBLE]

1211
00:51:30,930 --> 00:51:40,815


1212
00:51:40,815 --> 00:51:41,440
BRIAN YU: Yeah.

1213
00:51:41,440 --> 00:51:42,270
Great question.

1214
00:51:42,270 --> 00:51:45,700
Selectors specify-- so the question
is, when I hovered over it in VS code

1215
00:51:45,700 --> 00:51:49,120
specifically, it showed up this little
icon that said, select specificity.

1216
00:51:49,120 --> 00:51:50,470
And so what is "specificity"?

1217
00:51:50,470 --> 00:51:51,490
What does that mean?

1218
00:51:51,490 --> 00:51:55,300
Well, what you might imagine is
that it's possible in an HTML page

1219
00:51:55,300 --> 00:52:02,260
for there to be multiple CSS rules that
would apply to a particular element.

1220
00:52:02,260 --> 00:52:09,040
So for instance, let me go back into the
desktop and open up style.html again.

1221
00:52:09,040 --> 00:52:11,410
Let's imagine, for instance,
that I had a heading--

1222
00:52:11,410 --> 00:52:13,210
Welcome to CS50 Beyond.

1223
00:52:13,210 --> 00:52:20,121
And it had a class name of, we'll
just say Fu, and an id of bar.

1224
00:52:20,121 --> 00:52:20,620
Right.

1225
00:52:20,620 --> 00:52:23,970
It has an id, and it has a class.

1226
00:52:23,970 --> 00:52:27,810
And so what happens now
if I say, all right.

1227
00:52:27,810 --> 00:52:31,930
Anything with ID bar, I
went to style that red.

1228
00:52:31,930 --> 00:52:37,701
And anything with class Fu,
I want to style that as blue.

1229
00:52:37,701 --> 00:52:38,700
So here's the situation.

1230
00:52:38,700 --> 00:52:42,970
We have an H1, the class
is Fu, the id is bar.

1231
00:52:42,970 --> 00:52:46,740
And in my style code, I said anything
with an id of bar should be red.

1232
00:52:46,740 --> 00:52:51,592
But I've also said that anything
with a class of Fu should be blue.

1233
00:52:51,592 --> 00:52:52,300
What do we think?

1234
00:52:52,300 --> 00:52:53,620
Is it going to be red or blue?

1235
00:52:53,620 --> 00:52:56,039


1236
00:52:56,039 --> 00:52:58,830
Any guess is a good guess, because
I don't expect you to know this.

1237
00:52:58,830 --> 00:53:00,180
Propose something and why.

1238
00:53:00,180 --> 00:53:00,857
AUDIENCE: Red.

1239
00:53:00,857 --> 00:53:01,440
BRIAN YU: Red.

1240
00:53:01,440 --> 00:53:01,650
OK.

1241
00:53:01,650 --> 00:53:03,060
So red seems to be the consensus.

1242
00:53:03,060 --> 00:53:05,622
And why is that your gut instinct?

1243
00:53:05,622 --> 00:53:07,010
AUDIENCE: [INAUDIBLE]

1244
00:53:07,010 --> 00:53:08,330
BRIAN YU: Id is more specific.

1245
00:53:08,330 --> 00:53:08,830
All right.

1246
00:53:08,830 --> 00:53:09,910
Let's take a look.

1247
00:53:09,910 --> 00:53:12,070
Let's open up style.html.

1248
00:53:12,070 --> 00:53:16,750
And indeed, Welcome to CS50 Beyond
is styled as red instead of blue.

1249
00:53:16,750 --> 00:53:19,120
And the reason for that
is exactly as I mentioned.

1250
00:53:19,120 --> 00:53:20,620
It's about specificity.

1251
00:53:20,620 --> 00:53:25,430
And so the ID tag tends to be
more specific than the class tag--

1252
00:53:25,430 --> 00:53:26,740
than the class selector.

1253
00:53:26,740 --> 00:53:32,830
And so if there is a competing between
one id selector and one class selector,

1254
00:53:32,830 --> 00:53:37,000
the specificity algorithm of CSS
is always going with the id one.

1255
00:53:37,000 --> 00:53:39,700
In more complex selectors you
might have those situations

1256
00:53:39,700 --> 00:53:46,180
where there are multiple
different ids and classes

1257
00:53:46,180 --> 00:53:47,650
that are in the same selector.

1258
00:53:47,650 --> 00:53:51,969
So you might imagine that the Fu
and bar are nested inside of a div.

1259
00:53:51,969 --> 00:53:54,010
And this is just getting
a little bit convoluted.

1260
00:53:54,010 --> 00:53:55,990
But cases like this actually do come up.

1261
00:53:55,990 --> 00:54:01,930
And we'll say the class name
is Hi and the id name is Hello.

1262
00:54:01,930 --> 00:54:05,190
So you might imagine all right.

1263
00:54:05,190 --> 00:54:08,370
Id of bar is going to
style a particular way.

1264
00:54:08,370 --> 00:54:14,890
But I might also say
that something like this.

1265
00:54:14,890 --> 00:54:17,800
So something space something
is the child selector.

1266
00:54:17,800 --> 00:54:23,710
So what # hello space dot Fu means is,
find something that is an id of Hello.

1267
00:54:23,710 --> 00:54:29,770
And if it has a child whose
class is Fu, then color it blue.

1268
00:54:29,770 --> 00:54:31,341
So again, a lot going on there.

1269
00:54:31,341 --> 00:54:31,840
But OK.

1270
00:54:31,840 --> 00:54:33,410
What has id of Hello?

1271
00:54:33,410 --> 00:54:33,910
All right.

1272
00:54:33,910 --> 00:54:35,200
This div has Id of Hello.

1273
00:54:35,200 --> 00:54:37,908
[INAUDIBLE] helpfully highlights
the same thing for me down here.

1274
00:54:37,908 --> 00:54:39,640
This div has an ID of Hello.

1275
00:54:39,640 --> 00:54:42,741
And does it have a child
with a class name of Fu?

1276
00:54:42,741 --> 00:54:43,240
Well, yeah.

1277
00:54:43,240 --> 00:54:43,740
Sure.

1278
00:54:43,740 --> 00:54:46,020
Here is the H1 with a class name of Fu.

1279
00:54:46,020 --> 00:54:50,650
And so if you run into this competing
situation, both of these have an id.

1280
00:54:50,650 --> 00:54:53,367
But this one also has a class of Fu.

1281
00:54:53,367 --> 00:54:55,450
Then assuming that, remember
the algorithm, right.

1282
00:54:55,450 --> 00:54:55,950
Yeah.

1283
00:54:55,950 --> 00:54:57,970
When I refresh it, the
color changes to blue,

1284
00:54:57,970 --> 00:55:03,040
because having one id in one class is
more specific than just having one id.

1285
00:55:03,040 --> 00:55:05,562
So the specificity
algorithm just determines

1286
00:55:05,562 --> 00:55:08,020
how to determine if there are
multiple rules that conflict,

1287
00:55:08,020 --> 00:55:11,150
which one is actually going
to take precedence there.

1288
00:55:11,150 --> 00:55:12,704
Excellent question.

1289
00:55:12,704 --> 00:55:16,520
[INAUDIBLE] specificity
or other things about CSS?

1290
00:55:16,520 --> 00:55:18,995
AUDIENCE: [INAUDIBLE]

1291
00:55:18,995 --> 00:55:33,870


1292
00:55:33,870 --> 00:55:34,950
BRIAN YU: Good question.

1293
00:55:34,950 --> 00:55:38,630
I think it should apply to--

1294
00:55:38,630 --> 00:55:39,770
I think it applies to both.

1295
00:55:39,770 --> 00:55:40,880
But actually I have to
get back to you on that.

1296
00:55:40,880 --> 00:55:42,170
I'm not 100% sure.

1297
00:55:42,170 --> 00:55:44,150
Good question, though.

1298
00:55:44,150 --> 00:55:44,990
Other things.

1299
00:55:44,990 --> 00:55:45,630
It does?

1300
00:55:45,630 --> 00:55:46,370
Yes, it does.

1301
00:55:46,370 --> 00:55:48,121
It applies to both.

1302
00:55:48,121 --> 00:55:48,620
Yes.

1303
00:55:48,620 --> 00:55:52,277


1304
00:55:52,277 --> 00:55:52,860
Good question.

1305
00:55:52,860 --> 00:55:55,760
Question was what's the difference
between the descendent operator

1306
00:55:55,760 --> 00:55:57,205
and the child operator.

1307
00:55:57,205 --> 00:56:00,080
So again, the descendant, which does
something, space something else,

1308
00:56:00,080 --> 00:56:00,920
like we just saw.

1309
00:56:00,920 --> 00:56:06,890
Like the 1H1 is a
descendant of the parent.

1310
00:56:06,890 --> 00:56:10,666
The child selector is represented
by this greater than symbol.

1311
00:56:10,666 --> 00:56:12,540
The child selector is
a little more specific.

1312
00:56:12,540 --> 00:56:14,540
It only applies to immediate children.

1313
00:56:14,540 --> 00:56:17,870
It's not going to apply to
grandchildren, so to speak.

1314
00:56:17,870 --> 00:56:28,150
So for instance, if I had a let's
say, a div that had an id of Fu and--

1315
00:56:28,150 --> 00:56:30,640
we'll give it a class
of Fu, inside of which

1316
00:56:30,640 --> 00:56:36,790
was a another div inside of
which was an H1 that said, Hello.

1317
00:56:36,790 --> 00:56:43,550
And I said something like let's take
something that has a class of Fu.

1318
00:56:43,550 --> 00:56:47,570
And if it has an H1 descendant,
then color that blue.

1319
00:56:47,570 --> 00:56:51,770
So if it has a class of Fu, and if an H1
is a descendant of that color of blue,

1320
00:56:51,770 --> 00:56:53,690
here's my thing that has a class of Fu.

1321
00:56:53,690 --> 00:56:55,730
Here is the H1 descendant.

1322
00:56:55,730 --> 00:56:59,030
If I refresh that, Hello is blue.

1323
00:56:59,030 --> 00:57:02,780
If instead I change this to a greater
than symbol, this greater than symbol

1324
00:57:02,780 --> 00:57:03,950
is the child operator.

1325
00:57:03,950 --> 00:57:06,560
It only applies to immediate children.

1326
00:57:06,560 --> 00:57:10,130
And this H1 is nested two levels deeper.

1327
00:57:10,130 --> 00:57:13,950
So it's a grandchild as opposed to a
child that's just one level deeper.

1328
00:57:13,950 --> 00:57:16,070
And so if I refresh
this, Hello is black.

1329
00:57:16,070 --> 00:57:18,530
It doesn't get that particular styling.

1330
00:57:18,530 --> 00:57:21,440
But if I get rid of
this intervening div--

1331
00:57:21,440 --> 00:57:25,080
so the H1 is an immediate
child of the div in question.

1332
00:57:25,080 --> 00:57:27,810
Now each one is a child of the Fu.

1333
00:57:27,810 --> 00:57:30,150
And so I refresh that, and
the color changes to blue.

1334
00:57:30,150 --> 00:57:32,540
So there's a lot of different selectors.

1335
00:57:32,540 --> 00:57:34,520
They all follow slightly
different rules.

1336
00:57:34,520 --> 00:57:37,010
One of the best ways to get a grasp
of this is just experiment with it,

1337
00:57:37,010 --> 00:57:39,860
try it out and see what happens
with simple examples like these.

1338
00:57:39,860 --> 00:57:43,190
And that can help inform you as you
begin to build larger and larger web

1339
00:57:43,190 --> 00:57:44,904
programs as well.

1340
00:57:44,904 --> 00:57:46,070
Questions about any of that?

1341
00:57:46,070 --> 00:57:49,130


1342
00:57:49,130 --> 00:57:50,240
All right.

1343
00:57:50,240 --> 00:57:55,550
So now I want to spend a little bit of
time talking about responsive design.

1344
00:57:55,550 --> 00:57:59,480
Or actually, before we get to responsive
design, one thing just worth noting

1345
00:57:59,480 --> 00:58:01,960
is what the CSS box model is.

1346
00:58:01,960 --> 00:58:05,720
That often times you'll see
that a bunch of CSS attributes

1347
00:58:05,720 --> 00:58:09,380
and properties like margin and padding,
what do all those different things

1348
00:58:09,380 --> 00:58:09,920
mean.

1349
00:58:09,920 --> 00:58:12,470
It's just good to have a
visual model for [INAUDIBLE]..

1350
00:58:12,470 --> 00:58:17,390
So [INAUDIBLE] have some content
to add a border around the content.

1351
00:58:17,390 --> 00:58:20,930
All elements have a border, though
oftentimes that border is invisible.

1352
00:58:20,930 --> 00:58:23,030
You can actually specify
that I want the border

1353
00:58:23,030 --> 00:58:26,120
to be a solid black border [INAUDIBLE].

1354
00:58:26,120 --> 00:58:29,720
But every element has a border that
goes around it [INAUDIBLE] tent.

1355
00:58:29,720 --> 00:58:31,880
Border goes around it.

1356
00:58:31,880 --> 00:58:36,570
Outside of that border is called
the margin of the element.

1357
00:58:36,570 --> 00:58:39,230
So if I take an element and
I say margin five pixels,

1358
00:58:39,230 --> 00:58:44,600
that would add 5 pixels around the
border of any particular element.

1359
00:58:44,600 --> 00:58:48,890
But inside the border there
[INAUDIBLE] called the padding.

1360
00:58:48,890 --> 00:58:51,590
And so I can also say I
want two pixels of padding.

1361
00:58:51,590 --> 00:58:53,689
And that's going to be
padding inside the border.

1362
00:58:53,689 --> 00:58:55,730
And so this is important
if your element actually

1363
00:58:55,730 --> 00:58:58,560
has a border like a
button or a table cell,

1364
00:58:58,560 --> 00:59:00,290
for instance, that
actually has a border.

1365
00:59:00,290 --> 00:59:03,470
You can add space outside the
border by updating the margin.

1366
00:59:03,470 --> 00:59:05,721
You can add space inside the
border by adding padding.

1367
00:59:05,721 --> 00:59:07,595
Just wanted to make sure
that that was clear,

1368
00:59:07,595 --> 00:59:10,590
because that can be a common area
of confusion when you're working

1369
00:59:10,590 --> 00:59:13,490
[INAUDIBLE].

1370
00:59:13,490 --> 00:59:17,240
The main thing that I want to talk
about finally when talking about CSS

1371
00:59:17,240 --> 00:59:18,890
is talking about responsive design.

1372
00:59:18,890 --> 00:59:20,750
A big thing about how
to think about when

1373
00:59:20,750 --> 00:59:26,120
we're designing web pages for mobile
devices or for tablet screens,

1374
00:59:26,120 --> 00:59:27,560
how do we think about it?

1375
00:59:27,560 --> 00:59:30,911
And an important concept
here is the viewport.

1376
00:59:30,911 --> 00:59:31,910
So what is the viewport?

1377
00:59:31,910 --> 00:59:36,550
The viewport is just the visible
area of the web page on the screen.

1378
00:59:36,550 --> 00:59:39,804
And so you might imagine on a computer
screen for instance, we have a heading.

1379
00:59:39,804 --> 00:59:40,970
We have an [INAUDIBLE] here.

1380
00:59:40,970 --> 00:59:43,670
We have some text here.

1381
00:59:43,670 --> 00:59:48,791
If I were to just literally translate
this page onto a mobile device,

1382
00:59:48,791 --> 00:59:49,790
what would it look like?

1383
00:59:49,790 --> 00:59:51,575
Well, it might look something like this.

1384
00:59:51,575 --> 00:59:56,210
What I've done is basically just taken
the computer screen that was this wide

1385
00:59:56,210 --> 00:59:59,034
and shrunk it down to the
size of the mobile screen.

1386
00:59:59,034 --> 01:00:01,450
And you end up with a page
that looks something like this.

1387
01:00:01,450 --> 01:00:05,540
Oftentimes you might see pages
where if you open it up on a phone,

1388
01:00:05,540 --> 01:00:07,727
everything is like the
text is very, very small.

1389
01:00:07,727 --> 01:00:10,310
That's generally a sign that the
person wasn't really thinking

1390
01:00:10,310 --> 01:00:13,700
about how best to adapt the
page for mobile responsiveness.

1391
01:00:13,700 --> 01:00:16,010
[INAUDIBLE] does not
look something like this,

1392
01:00:16,010 --> 01:00:19,340
but a page that looks a
little bit different to fill

1393
01:00:19,340 --> 01:00:21,840
the viewport of the mobile device.

1394
01:00:21,840 --> 01:00:25,860
So how do we [INAUDIBLE] some
methods for actually doing this.

1395
01:00:25,860 --> 01:00:31,030
Well, probably the simplest way is
just to take control of the viewport.

1396
01:00:31,030 --> 01:00:32,640
So how do we do that?

1397
01:00:32,640 --> 01:00:35,050
Let me create a new file,
call it viewport.html.

1398
01:00:35,050 --> 01:00:46,130


1399
01:00:46,130 --> 01:00:46,630
All right.

1400
01:00:46,630 --> 01:00:48,340
Basic HTML page.

1401
01:00:48,340 --> 01:00:53,980
And if I were to open up viewport.html,
it says, this is some text.

1402
01:00:53,980 --> 01:00:55,990
And if I were to open up the inspector--

1403
01:00:55,990 --> 01:00:59,080
I'll make the text a little bigger--

1404
01:00:59,080 --> 01:01:01,780
in the Chrome inspector
there's this button over here

1405
01:01:01,780 --> 01:01:04,210
that is the device toolbar.

1406
01:01:04,210 --> 01:01:06,430
And the device toolbar
basically lets me see

1407
01:01:06,430 --> 01:01:08,710
what is it that this page
is going to look like if I

1408
01:01:08,710 --> 01:01:10,210
try to open it on a mobile device.

1409
01:01:10,210 --> 01:01:13,525
[INAUDIBLE] test things out on different
sized screens, different sized devices

1410
01:01:13,525 --> 01:01:15,700
on your computer, you
can actually experiment,

1411
01:01:15,700 --> 01:01:17,980
see how your page would
look on a mobile device.

1412
01:01:17,980 --> 01:01:20,500
If I click on that right
now, this is what the page

1413
01:01:20,500 --> 01:01:23,650
looks like now on an iPhone 6, 7, or 8.

1414
01:01:23,650 --> 01:01:25,540
You can see here is the text.

1415
01:01:25,540 --> 01:01:26,450
And it's just tiny.

1416
01:01:26,450 --> 01:01:26,950
Right?

1417
01:01:26,950 --> 01:01:29,830
This is not a great user experience.

1418
01:01:29,830 --> 01:01:33,550
Because what I've done is I've taken the
entire width of the page on my computer

1419
01:01:33,550 --> 01:01:36,417
and shrunken it down to finish
the viewport to the phone.

1420
01:01:36,417 --> 01:01:39,250
What I'd like to do is to be able
to take [INAUDIBLE] viewport, say,

1421
01:01:39,250 --> 01:01:41,166
I would like the viewport
on the mobile device

1422
01:01:41,166 --> 01:01:45,280
to just fill whatever-- to be whatever
the width of the device actually is.

1423
01:01:45,280 --> 01:01:47,141
And so there's a simple
line you can add.

1424
01:01:47,141 --> 01:01:48,640
It's a little bit [INAUDIBLE] first.

1425
01:01:48,640 --> 01:01:50,473
But it's one that just
adding it into a page

1426
01:01:50,473 --> 01:01:53,230
can often make the
page look a lot better.

1427
01:01:53,230 --> 01:01:56,020
I'm adding some metadata
to the head of my page.

1428
01:01:56,020 --> 01:01:59,410
And I want to take
control of the viewport.

1429
01:01:59,410 --> 01:02:03,230
And what I'd like to do is set the
width of the viewport instead of being

1430
01:02:03,230 --> 01:02:05,230
whatever the width of the
computer's width was--

1431
01:02:05,230 --> 01:02:06,790
the default width of the viewport--

1432
01:02:06,790 --> 01:02:09,430
I would like it to be the device width.

1433
01:02:09,430 --> 01:02:12,970
So whatever the width of the device is,
like the width of the iPhone screen,

1434
01:02:12,970 --> 01:02:15,520
that's how big I want
the viewport to be.

1435
01:02:15,520 --> 01:02:18,640
And you often see this added
with initial scale equals

1436
01:02:18,640 --> 01:02:21,970
1.0, which means by default don't zoom.

1437
01:02:21,970 --> 01:02:25,470
Do a zoom of 1x or no zoom at all.

1438
01:02:25,470 --> 01:02:28,500
And now if I refresh this page,
here's what the page looks

1439
01:02:28,500 --> 01:02:30,490
like right now on a mobile device.

1440
01:02:30,490 --> 01:02:31,802
I refresh the page.

1441
01:02:31,802 --> 01:02:33,260
And now it looks a fair bit better.

1442
01:02:33,260 --> 01:02:36,390
The text at least looks bigger,
because I've adjusted the viewport

1443
01:02:36,390 --> 01:02:38,830
to take up the right size.

1444
01:02:38,830 --> 01:02:39,330
All right.

1445
01:02:39,330 --> 01:02:41,970
But what are other things
that we can do as well?

1446
01:02:41,970 --> 01:02:46,632
Well, one thing we might imagine is that
depending upon the size of the screen,

1447
01:02:46,632 --> 01:02:48,590
I might want to [INAUDIBLE]
things differently.

1448
01:02:48,590 --> 01:02:51,780
If my screen is above a
certain number of pixels wide,

1449
01:02:51,780 --> 01:02:54,600
I might want things to appear
differently with different styles

1450
01:02:54,600 --> 01:02:56,820
than if the page were narrower.

1451
01:02:56,820 --> 01:03:01,350
So in order to do this type of styling
you can take advantage of a CSS feature

1452
01:03:01,350 --> 01:03:03,060
called media queries.

1453
01:03:03,060 --> 01:03:06,270
Media queries basically
let you customize

1454
01:03:06,270 --> 01:03:12,760
the CSS you use based upon the type of
the media of the user viewing the page.

1455
01:03:12,760 --> 01:03:14,550
So let's try this out.

1456
01:03:14,550 --> 01:03:16,600
I'm gonna add some style.

1457
01:03:16,600 --> 01:03:23,950
And what I'm going to say is
@media min width 500 pixels.

1458
01:03:23,950 --> 01:03:26,650
What this has done is
I've given myself a space

1459
01:03:26,650 --> 01:03:30,340
to add CSS code that is
only going to apply when

1460
01:03:30,340 --> 01:03:34,100
my page is at least 500 pixels wide.

1461
01:03:34,100 --> 01:03:39,240
So I can now say, background color red.

1462
01:03:39,240 --> 01:03:46,170
And I can also say @media
max width 499 pixels,

1463
01:03:46,170 --> 01:03:50,410
and say background color is blue.

1464
01:03:50,410 --> 01:03:52,990


1465
01:03:52,990 --> 01:03:55,730
So what I've done now is
I've added some logic here

1466
01:03:55,730 --> 01:03:59,630
to say if the screen is
at least 500 pixels wide,

1467
01:03:59,630 --> 01:04:01,940
I want the background color
of the page to be red.

1468
01:04:01,940 --> 01:04:03,940
If it's smaller than that,
I want the background

1469
01:04:03,940 --> 01:04:07,010
of the page to be blue such that now--

1470
01:04:07,010 --> 01:04:09,530
let me get rid of the mobile view--

1471
01:04:09,530 --> 01:04:12,660
I refresh the page.

1472
01:04:12,660 --> 01:04:14,650
Viewport.

1473
01:04:14,650 --> 01:04:15,580
Oh, sorry.

1474
01:04:15,580 --> 01:04:17,650
This all needs to still be valid CSS.

1475
01:04:17,650 --> 01:04:21,400
So I want to style the body to
have a background color of red.

1476
01:04:21,400 --> 01:04:27,030
And I want to style the body of the
page to have a background color of blue.

1477
01:04:27,030 --> 01:04:29,930
So if the width is at least
500 pixels, the body is red.

1478
01:04:29,930 --> 01:04:33,080
Otherwise, the background color is blue.

1479
01:04:33,080 --> 01:04:38,190
I refresh the page, and it's red,
because it is at least 500 pixels wide.

1480
01:04:38,190 --> 01:04:41,300
But watch what happens as I take this
page and just shrink the size of it.

1481
01:04:41,300 --> 01:04:45,440
As soon as I get to underneath
500 pixels, color of the page

1482
01:04:45,440 --> 01:04:46,660
changes to blue.

1483
01:04:46,660 --> 01:04:50,090
I'm above 500 pixels,
background color is red.

1484
01:04:50,090 --> 01:04:51,980
Fewer than that, and
the background is blue.

1485
01:04:51,980 --> 01:04:54,290
I'm able to change the
way I style something

1486
01:04:54,290 --> 01:04:57,110
based upon the width of the screen.

1487
01:04:57,110 --> 01:04:59,960
And while this is just sort of
cool to see the color changing,

1488
01:04:59,960 --> 01:05:02,156
you might imagine you
want the size to change,

1489
01:05:02,156 --> 01:05:04,030
or the alignment of
things based on if you're

1490
01:05:04,030 --> 01:05:05,850
on a laptop device or a mobile device.

1491
01:05:05,850 --> 01:05:10,164
So these media queries can, in
fact, be very, very powerful.

1492
01:05:10,164 --> 01:05:11,330
Questions about that so far?

1493
01:05:11,330 --> 01:05:12,454
What questions do you have?

1494
01:05:12,454 --> 01:05:13,998
Yeah.

1495
01:05:13,998 --> 01:05:17,477
AUDIENCE: [INAUDIBLE]

1496
01:05:17,477 --> 01:05:20,095


1497
01:05:20,095 --> 01:05:20,720
BRIAN YU: Yeah.

1498
01:05:20,720 --> 01:05:21,300
Great.

1499
01:05:21,300 --> 01:05:22,799
So the question was about Bootstrap.

1500
01:05:22,799 --> 01:05:25,350
And so Bootstrap is a
library that there's

1501
01:05:25,350 --> 01:05:29,580
some source code examples of Bootstrap
code in this week's lecture materials.

1502
01:05:29,580 --> 01:05:32,190
And yeah, Bootstrap has
this idea of a column model

1503
01:05:32,190 --> 01:05:35,610
where you have columns that you can
use that as you shrink things down,

1504
01:05:35,610 --> 01:05:37,440
and they get re-sized
that they change up,

1505
01:05:37,440 --> 01:05:39,440
media queries are likely
how that's implemented.

1506
01:05:39,440 --> 01:05:41,760
This idea of if something
is below a certain width,

1507
01:05:41,760 --> 01:05:44,130
then you can actually modify
the styling of something,

1508
01:05:44,130 --> 01:05:46,671
change the positioning of the
columns, for instance, in order

1509
01:05:46,671 --> 01:05:48,100
to match what you want it to be.

1510
01:05:48,100 --> 01:05:48,900
Good question.

1511
01:05:48,900 --> 01:05:49,534
Yeah.

1512
01:05:49,534 --> 01:05:52,438
AUDIENCE: [INAUDIBLE]

1513
01:05:52,438 --> 01:06:03,359


1514
01:06:03,359 --> 01:06:05,650
BRIAN YU: Older, older browsers
might not support this.

1515
01:06:05,650 --> 01:06:08,140
But almost all major browser
nowadays-- modern browsers--

1516
01:06:08,140 --> 01:06:09,530
will support this feature.

1517
01:06:09,530 --> 01:06:10,030
Yeah.

1518
01:06:10,030 --> 01:06:14,630
AUDIENCE: [INAUDIBLE]

1519
01:06:14,630 --> 01:06:15,700
All right.

1520
01:06:15,700 --> 01:06:18,790
So media queries can be used in order
to change the styling of something

1521
01:06:18,790 --> 01:06:20,440
based on the size of the screen.

1522
01:06:20,440 --> 01:06:25,010
It can also change based on the type
of media that you're actually using.

1523
01:06:25,010 --> 01:06:28,485
So you might imagine that if a user
like prints out a page, for instance,

1524
01:06:28,485 --> 01:06:31,360
you might want the styling of that
page to be a little bit different.

1525
01:06:31,360 --> 01:06:34,210
And so I'll give you a
simple example of that.

1526
01:06:34,210 --> 01:06:35,920
We'll get rid of these queries for now.

1527
01:06:35,920 --> 01:06:38,530
Let's imagine that I have a
whole bunch of paragraphs.

1528
01:06:38,530 --> 01:06:42,400
So here is paragraph one.

1529
01:06:42,400 --> 01:06:44,200
Here is paragraph two.

1530
01:06:44,200 --> 01:06:49,954
And this paragraph will
be invisible when printed.

1531
01:06:49,954 --> 01:06:52,120
You might imagine that when
you print something out,

1532
01:06:52,120 --> 01:06:54,460
there is content that you
want to show up on a web page

1533
01:06:54,460 --> 01:06:57,040
when you're viewing it on the screen
that you don't want to show up

1534
01:06:57,040 --> 01:06:58,000
if you're just printing something out.

1535
01:06:58,000 --> 01:07:00,208
When you're printing something
out, you probably only

1536
01:07:00,208 --> 01:07:02,200
want like the most relevant
content on the page

1537
01:07:02,200 --> 01:07:03,980
to be printed out in a particular way.

1538
01:07:03,980 --> 01:07:05,855
Maybe you want to style
things differently so

1539
01:07:05,855 --> 01:07:07,540
that it looks good when printed.

1540
01:07:07,540 --> 01:07:09,610
So let me go ahead and
add a class name to this.

1541
01:07:09,610 --> 01:07:12,100
I'll call it print out.

1542
01:07:12,100 --> 01:07:16,190
Or maybe don't print is
probably more accurate.

1543
01:07:16,190 --> 01:07:20,520
I'm going to say, @media print.

1544
01:07:20,520 --> 01:07:25,020
So when the media is the print
media, printing something out,

1545
01:07:25,020 --> 01:07:28,160
if something has a
class of "don't print,"

1546
01:07:28,160 --> 01:07:32,420
then I'm going to set its
display property to none.

1547
01:07:32,420 --> 01:07:34,470
In other words, is it
going to be visible?

1548
01:07:34,470 --> 01:07:34,970
No.

1549
01:07:34,970 --> 01:07:37,610
I just want to hide it
if the media is printed.

1550
01:07:37,610 --> 01:07:40,180
I'm trying to print something out.

1551
01:07:40,180 --> 01:07:41,709
So I refresh this page again.

1552
01:07:41,709 --> 01:07:43,500
Here's paragraph one,
here's paragraph two.

1553
01:07:43,500 --> 01:07:45,360
And I see this third paragraph.

1554
01:07:45,360 --> 01:07:48,420
But as soon as I go to print out this
page, what I'll immediately noticed

1555
01:07:48,420 --> 01:07:50,910
is that up there, only two paragraphs.

1556
01:07:50,910 --> 01:07:53,880
I have paragraph one,
and I have paragraph two.

1557
01:07:53,880 --> 01:07:57,255
But I don't have that third
paragraph, because it's not visible

1558
01:07:57,255 --> 01:07:58,380
when I print something out.

1559
01:07:58,380 --> 01:08:01,410
So you can use media queries to
adjust based on the type of media

1560
01:08:01,410 --> 01:08:02,760
that you're looking at as well.

1561
01:08:02,760 --> 01:08:04,884
And there are other ways
you can use media queries.

1562
01:08:04,884 --> 01:08:08,250
You can use it to check whether the
phone is in portrait mode or landscape

1563
01:08:08,250 --> 01:08:11,460
mode in order to adjust the
styling that way as well.

1564
01:08:11,460 --> 01:08:14,720
So a bunch of different features
that are at your disposal there too.

1565
01:08:14,720 --> 01:08:18,620


1566
01:08:18,620 --> 01:08:20,870
Final couple of things
that I'll show are

1567
01:08:20,870 --> 01:08:24,819
a couple of more advanced ways
of trying to lay things out.

1568
01:08:24,819 --> 01:08:28,399
And so one thing that you'll commonly
see that can be quite popular

1569
01:08:28,399 --> 01:08:30,410
is something called Flexbox.

1570
01:08:30,410 --> 01:08:34,879
So Flexbox is all about how do
you lay out a list of things

1571
01:08:34,879 --> 01:08:37,670
when you go from laying them out
on a big screen to laying them out

1572
01:08:37,670 --> 01:08:39,384
on differently sized screens?

1573
01:08:39,384 --> 01:08:42,050
So you might imagine that I have
six elements across the screen,

1574
01:08:42,050 --> 01:08:44,341
for instance, on a page that
looks something like this.

1575
01:08:44,341 --> 01:08:47,149
What happens if I try
and take this content

1576
01:08:47,149 --> 01:08:49,220
and display it on a mobile device?

1577
01:08:49,220 --> 01:08:50,595
What does it end up looking like?

1578
01:08:50,595 --> 01:08:52,928
Well, the simplest way to do
things, and the default way

1579
01:08:52,928 --> 01:08:55,250
to do things if you don't
mess with the viewpoint,

1580
01:08:55,250 --> 01:08:57,859
is just to take the size
of the screen shrink it

1581
01:08:57,859 --> 01:08:59,505
down to fit the mold of the device.

1582
01:08:59,505 --> 01:09:02,120
So you'll end up taking this
content and everything just

1583
01:09:02,120 --> 01:09:06,290
shrinks down so all the boxes
end up showing up much more--

1584
01:09:06,290 --> 01:09:09,000
they're smaller on the mobile device.

1585
01:09:09,000 --> 01:09:13,340
And that's probably not the best
user experience for them to see.

1586
01:09:13,340 --> 01:09:14,582
So what could we do instead?

1587
01:09:14,582 --> 01:09:16,040
Well, we could adjust the viewport.

1588
01:09:16,040 --> 01:09:16,540
Right?

1589
01:09:16,540 --> 01:09:20,684
We could make it such that the width
of the boxes doesn't really change.

1590
01:09:20,684 --> 01:09:21,600
But what happens then?

1591
01:09:21,600 --> 01:09:25,939
Well, now when I take this content
and move it over, I get it cut off.

1592
01:09:25,939 --> 01:09:26,479
Right?

1593
01:09:26,479 --> 01:09:27,812
Everything stayed the same size.

1594
01:09:27,812 --> 01:09:30,170
But now everything's
like [INAUDIBLE] in order

1595
01:09:30,170 --> 01:09:32,040
to see all of the different boxes.

1596
01:09:32,040 --> 01:09:34,260
So what would a better solution be?

1597
01:09:34,260 --> 01:09:38,630
Flexbox is a technology, a
way of styling your page that

1598
01:09:38,630 --> 01:09:41,630
lets me say, I would like
things to flex around,

1599
01:09:41,630 --> 01:09:46,760
wrap around maybe, such that if I have
these six boxes, translate them over,

1600
01:09:46,760 --> 01:09:48,740
they can show up in two distinct rows.

1601
01:09:48,740 --> 01:09:52,330
1, 2, 3 on the first row,
4, 5, 6 underneath it.

1602
01:09:52,330 --> 01:09:55,620
And so I'll show you an example of that.

1603
01:09:55,620 --> 01:09:58,650
We'll go into there.

1604
01:09:58,650 --> 01:10:02,220
I'll open up Flexbox.html.

1605
01:10:02,220 --> 01:10:04,800
What I have inside my
body right now is just

1606
01:10:04,800 --> 01:10:08,040
a whole bunch of [INAUDIBLE]
that have paragraphs in them.

1607
01:10:08,040 --> 01:10:12,750
Here is my container, inside of which
is div a, b, c, all the way through l.

1608
01:10:12,750 --> 01:10:16,380
Each one just has some
filler text in it right now.

1609
01:10:16,380 --> 01:10:18,470
And here's my style.

1610
01:10:18,470 --> 01:10:21,550
The container-- the thing
that has class container--

1611
01:10:21,550 --> 01:10:23,760
and the display is going to be flex.

1612
01:10:23,760 --> 01:10:27,130
I want this to be a
Flexbox enabled container.

1613
01:10:27,130 --> 01:10:28,630
And I'm going to flex wrap.

1614
01:10:28,630 --> 01:10:31,750
Wrap just means I want things to
wrap around if they get too long.

1615
01:10:31,750 --> 01:10:33,510


1616
01:10:33,510 --> 01:10:36,640
Then I've said that
inside of this container,

1617
01:10:36,640 --> 01:10:40,650
any divs inside those containers should
have a background color of green.

1618
01:10:40,650 --> 01:10:43,650
I've given them a font size,
some margins, and padding.

1619
01:10:43,650 --> 01:10:47,520
But what that means is now
when I open up Flexbox.html.

1620
01:10:47,520 --> 01:10:49,520
I see these boxes.

1621
01:10:49,520 --> 01:10:55,280
But importantly, when I shrink
the page, the boxes wrap around.

1622
01:10:55,280 --> 01:10:59,040
So I can scroll things through naturally
here where it's only two boxes per row.

1623
01:10:59,040 --> 01:11:02,190
I increase the size of the screen
and things automatically change.

1624
01:11:02,190 --> 01:11:03,885
Now there are three boxes per row.

1625
01:11:03,885 --> 01:11:06,010
And now there are four.

1626
01:11:06,010 --> 01:11:09,082
So this ability that Flexbox gives
us makes it just a lot easier

1627
01:11:09,082 --> 01:11:12,040
to be able to style something like
this when I have a big row of things

1628
01:11:12,040 --> 01:11:13,210
that I want to wrap around.

1629
01:11:13,210 --> 01:11:18,440
And as someone mentioned, Bootstrap
gives you similar capacities as well.

1630
01:11:18,440 --> 01:11:22,540
One other model that you might find if
you work with CSS is the grid model.

1631
01:11:22,540 --> 01:11:24,404
This is a little more complicated.

1632
01:11:24,404 --> 01:11:27,070
But imagine if you had a grid of
data and not just a single row,

1633
01:11:27,070 --> 01:11:29,800
but rows and columns, for instance.

1634
01:11:29,800 --> 01:11:32,980
Where I have a grid and a
whole bunch of grid items.

1635
01:11:32,980 --> 01:11:37,070
Each one of these is just
numbered 1 through 12 right now.

1636
01:11:37,070 --> 01:11:38,240
What might I do?

1637
01:11:38,240 --> 01:11:40,790
Instead of display flex,
I can say display grid.

1638
01:11:40,790 --> 01:11:43,299
I want things to show up
in sort of a grid layout.

1639
01:11:43,299 --> 01:11:44,840
And then I can edit these properties.

1640
01:11:44,840 --> 01:11:45,340
All right.

1641
01:11:45,340 --> 01:11:47,210
How much space do I
want between columns?

1642
01:11:47,210 --> 01:11:49,970
Let's say 20 pixels of
space between each column.

1643
01:11:49,970 --> 01:11:51,050
What about between rows?

1644
01:11:51,050 --> 01:11:52,430
We'll say 10 pixels of space.

1645
01:11:52,430 --> 01:11:53,730


1646
01:11:53,730 --> 01:11:57,030
And then grid template columns
is the interesting part.

1647
01:11:57,030 --> 01:12:01,290
Here is where I specify how long
each of the columns should be.

1648
01:12:01,290 --> 01:12:03,960
So the first column is
going to be 200 pixels.

1649
01:12:03,960 --> 01:12:06,590
The second one also 200 pixels.

1650
01:12:06,590 --> 01:12:09,317
And the third one is
auto, which means just

1651
01:12:09,317 --> 01:12:11,775
fill up the rest of the screen
with whatever space remains.

1652
01:12:11,775 --> 01:12:14,680


1653
01:12:14,680 --> 01:12:19,800
So now if I open up grid.html,
here's a 200-pixel column,

1654
01:12:19,800 --> 01:12:21,550
another 200-pixel column.

1655
01:12:21,550 --> 01:12:25,720
And then the third column is just going
to fill up whatever space remains.

1656
01:12:25,720 --> 01:12:30,320
It automatically re-sizes based
upon how I resize the page.

1657
01:12:30,320 --> 01:12:32,561
And so the Flexbox example,
grid example, they're

1658
01:12:32,561 --> 01:12:34,310
all in the source code
examples are things

1659
01:12:34,310 --> 01:12:38,240
you can look to if you're looking for
different ways of styling your page.

1660
01:12:38,240 --> 01:12:40,910
[INAUDIBLE] Questions about anything?

1661
01:12:40,910 --> 01:12:47,440


1662
01:12:47,440 --> 01:12:48,970
OK.

1663
01:12:48,970 --> 01:12:53,709
Then what I thought we'd do as
just sort of a morning project

1664
01:12:53,709 --> 01:12:56,500
is give you an opportunity to get
some hands-on practice with this.

1665
01:12:56,500 --> 01:12:57,862
It's around 11:30 now.

1666
01:12:57,862 --> 01:13:00,820
We'll get some time to work on things
until about 12:30, at which point

1667
01:13:00,820 --> 01:13:03,220
we'll break for lunch,
come back here at 2:00.

1668
01:13:03,220 --> 01:13:05,646
What we'll do is we'll
take some opportunity to a,

1669
01:13:05,646 --> 01:13:06,770
just play around with this.

1670
01:13:06,770 --> 01:13:09,603
Feel free to look at the source
code examples on the course website.

1671
01:13:09,603 --> 01:13:10,404
Try things out.

1672
01:13:10,404 --> 01:13:12,820
The TFs are around here in
order to help answer questions,

1673
01:13:12,820 --> 01:13:15,670
in order to help you out as
you try and work through this.

1674
01:13:15,670 --> 01:13:17,390
But I'll give you two suggestions.

1675
01:13:17,390 --> 01:13:20,350
One will be, either build
a new website for yourself

1676
01:13:20,350 --> 01:13:23,200
or take what you used for the
home page assignment for CS50

1677
01:13:23,200 --> 01:13:24,830
and try to make it mobile responsive.

1678
01:13:24,830 --> 01:13:27,080
Think about how it's going
to look on a mobile device,

1679
01:13:27,080 --> 01:13:29,230
maybe use some media queries,
change the way things

1680
01:13:29,230 --> 01:13:32,410
are styled based upon if you're
on a big screen or a small screen.

1681
01:13:32,410 --> 01:13:35,770
Maybe add Flexbox or grid
layouts if you'd like to.

1682
01:13:35,770 --> 01:13:38,470
Or alternatively, another
thing that can be fun

1683
01:13:38,470 --> 01:13:42,938
is take a website like Bank of America.

1684
01:13:42,938 --> 01:13:45,630


1685
01:13:45,630 --> 01:13:48,780
And look at this site, look at
different parts of the site,

1686
01:13:48,780 --> 01:13:52,810
and try to recreate the site almost
without looking at the actual HTML.

1687
01:13:52,810 --> 01:13:55,250
Let's see if you can figure
out what elements are used.

1688
01:13:55,250 --> 01:13:56,980
See if you can figure out
the styling that's used.

1689
01:13:56,980 --> 01:13:58,260
Try and modify the padding.

1690
01:13:58,260 --> 01:14:00,780
Try and emulate what
this website looks like.

1691
01:14:00,780 --> 01:14:03,750
And this will be good practice with
different HTML and CSS features

1692
01:14:03,750 --> 01:14:05,590
as well.

1693
01:14:05,590 --> 01:14:08,598
So before we do that, can I get the
TFs up here to introduce themselves?

1694
01:14:08,598 --> 01:14:22,490


1695
01:14:22,490 --> 01:14:22,990
Yeah.

1696
01:14:22,990 --> 01:14:25,800
If you'd just like to one by one
introduce yourself, tell [INAUDIBLE]..

1697
01:14:25,800 --> 01:14:26,800
ATHENA: Hi, everyone.

1698
01:14:26,800 --> 01:14:27,800
I'm Athena.

1699
01:14:27,800 --> 01:14:28,300
[INAUDIBLE]

1700
01:14:28,300 --> 01:14:28,883
SPEAKER 1: Hi.

1701
01:14:28,883 --> 01:14:31,228
I'm [INAUDIBLE].

1702
01:14:31,228 --> 01:14:34,041
SPEAKER 2: [INAUDIBLE]

1703
01:14:34,041 --> 01:14:36,040
BRIAN YU: Stand here for
the microphone to work.

1704
01:14:36,040 --> 01:14:37,565
But.

1705
01:14:37,565 --> 01:14:38,064
JULIA: Oh.

1706
01:14:38,064 --> 01:14:38,563
Hi.

1707
01:14:38,563 --> 01:14:40,217
I'm Julia from [INAUDIBLE].

1708
01:14:40,217 --> 01:14:41,050
BRIAN YU: All right.

1709
01:14:41,050 --> 01:14:43,902
So the four of them will be here
with me helping you all as we work

1710
01:14:43,902 --> 01:14:45,360
on projects throughout [INAUDIBLE].

1711
01:14:45,360 --> 01:14:48,640
What I thought we'd do now is break
out into some small [INAUDIBLE]

1712
01:14:48,640 --> 01:14:50,350
for the next hour or so.

1713
01:14:50,350 --> 01:14:51,100
30.

1714
01:14:51,100 --> 01:14:52,630
We'll reconvene here at 2:00.

1715
01:14:52,630 --> 01:14:58,620
And I think we'll do is if this side
of the room could all go to room 136

1716
01:14:58,620 --> 01:14:59,620
down here on this floor.

1717
01:14:59,620 --> 01:15:03,160
[INAUDIBLE] this side of the room
could head upstairs to room 212.

1718
01:15:03,160 --> 01:15:04,150
We'll break out there.

1719
01:15:04,150 --> 01:15:07,520
And the center of the room free to
spread out around here and work.

1720
01:15:07,520 --> 01:15:08,380
We'll begin working.

1721
01:15:08,380 --> 01:15:12,310
And we'll reconvene back
here at 2:00 PM after lunch.

1722
01:15:12,310 --> 01:15:15,220
I believe Lowell and Quincy
are both open for lunch,

1723
01:15:15,220 --> 01:15:17,610
for those of you who are
undergrads on the meal plan.

1724
01:15:17,610 --> 01:15:21,300
But other than that, we'll break
out into groups now and reconvene.

1725
01:15:21,300 --> 01:15:22,224