WEBVTT

1
00:00:00.029 --> 00:00:04.481
Hydrated myself so that I could OK cool Let's do let's do a 5-minute break Let's

2
00:00:04.481 --> 00:00:04.759
come

3
00:00:04.759 --> 00:00:10.019
back at 8:15 um and then we'll jump into HTML and CSS

4
00:00:11.368 --> 00:00:15.604
And now we will we will this will be amazing to learn because we understand HTTP

5
00:00:15.604 --> 00:00:15.868
All

6
00:00:15.868 --> 00:00:18.440
right cool All right let's break We'll be back in 5 minutes

7
00:00:31.760 --> 00:00:31.769
Oh

8
00:00:34.509 --> 00:00:38.139
I give it a minute for everyone to come back and then we'll jump back in

9
00:01:09.558 --> 00:01:09.569
Yeah

10
00:01:45.760 --> 00:01:46.260
All right

11
00:01:47.198 --> 00:01:48.709
Going to get started

12
00:01:50.028 --> 00:01:52.719
Hopefully everybody has taken a break and came back

13
00:01:53.629 --> 00:01:59.785
Um I'm gonna dive right into HTML and CSS So um this is gonna be a lot I think

14
00:01:59.785 --> 00:02:00.109
Uh

15
00:02:00.198 --> 00:02:05.582
please like I said earlier interrupt me uh with questions Um I don't want to I

16
00:02:05.582 --> 00:02:05.918
don't

17
00:02:05.918 --> 00:02:08.679
want anyone to feel like they're getting left behind or anything so

18
00:02:10.949 --> 00:02:16.810
Awesome All right So what is HTML HTML stands for Hypertext Markup Language Um

19
00:02:16.810 --> 00:02:17.229
it's

20
00:02:17.229 --> 00:02:21.632
a standard markup language for web pages So um the way that it works it's it's

21
00:02:21.632 --> 00:02:21.907
if

22
00:02:21.907 --> 00:02:27.070
you're familiar with XML very similar to XML um essentially you have elements

23
00:02:27.070 --> 00:02:27.467
that

24
00:02:27.467 --> 00:02:32.279
are encapsulated in angle brackets If you see at the bottom here Uh we have like

25
00:02:32.279 --> 00:02:32.580
HTML

26
00:02:32.750 --> 00:02:38.303
head body This is not all of the different elements This is a a subset of them

27
00:02:38.303 --> 00:02:38.629
um

28
00:02:38.689 --> 00:02:43.280
and I we'll explain more what they mean uh in the in the lab itself Uh but

29
00:02:43.280 --> 00:02:43.550
essentially

30
00:02:43.550 --> 00:02:47.889
it's like you know a way of describing the web page using different elements and

31
00:02:47.889 --> 00:02:48.179
they're

32
00:02:48.179 --> 00:02:52.798
nested inside of each other like a a tree Um this is actually known as the DOM

33
00:02:52.798 --> 00:02:53.069
or

34
00:02:53.069 --> 00:02:56.778
the the document object model which I think I'll talk about again later

35
00:02:59.379 --> 00:03:03.215
So this is just an example of like what it looks like So this is some basic HTML

36
00:03:03.215 --> 00:03:03.429
at

37
00:03:03.429 --> 00:03:09.361
the very top you can say with this um this just tells the doc type you're just

38
00:03:09.361 --> 00:03:09.710
saying

39
00:03:09.710 --> 00:03:15.553
this is gonna be some HTML and then uh The first element is always HTML itself

40
00:03:15.553 --> 00:03:15.919
and

41
00:03:15.919 --> 00:03:20.399
everything is kind of nestled inside of that So you have the head which is like

42
00:03:20.399 --> 00:03:20.679
metadata

43
00:03:20.679 --> 00:03:24.267
about the page Um we'll talk more about what other stuff you can put in the head

44
00:03:24.267 --> 00:03:24.479
The

45
00:03:24.479 --> 00:03:27.341
body is just the body of the page so that's where you're gonna have pretty much

46
00:03:27.341 --> 00:03:27.520
the

47
00:03:27.520 --> 00:03:31.284
meat of the entire page This is where things that are visible to the page are

48
00:03:31.284 --> 00:03:31.520
gonna

49
00:03:31.520 --> 00:03:34.270
go Everything in the head typically is not visible

50
00:03:37.929 --> 00:03:44.691
CSS stands for cascading style sheets So CSS is how we make HTML look good So um

51
00:03:44.691 --> 00:03:45.088
HTML

52
00:03:45.088 --> 00:03:49.064
looks terrible before you use CSS like if you've ever written or if you've ever

53
00:03:49.064 --> 00:03:49.330
seen

54
00:03:49.330 --> 00:03:53.584
a page that doesn't have CSS or if the CSS doesn't load for whatever reason it

55
00:03:53.584 --> 00:03:53.849
looks

56
00:03:53.849 --> 00:03:59.523
terrible Um so CSS lets us control the look and feel of the page It also lets us

57
00:03:59.523 --> 00:03:59.838
control

58
00:03:59.838 --> 00:04:04.573
how it looks under different circumstances like if it's on a small device um or

59
00:04:04.573 --> 00:04:04.889
a

60
00:04:04.889 --> 00:04:07.169
larger device we can handle the CSS differently

61
00:04:08.058 --> 00:04:11.448
Um there's a lot of different ways you can include well not a lot There's 3

62
00:04:11.448 --> 00:04:11.659
different

63
00:04:11.659 --> 00:04:16.636
ways You can include CSS you can include it in an external sheet um in a style

64
00:04:16.636 --> 00:04:16.928
tag

65
00:04:17.338 --> 00:04:20.587
uh or you can actually do it in line right on the right on the elements There's

66
00:04:20.587 --> 00:04:20.778
some

67
00:04:20.778 --> 00:04:24.633
other variations of that that we're gonna talk about as we learn more ways of

68
00:04:24.633 --> 00:04:24.889
doing

69
00:04:24.889 --> 00:04:26.869
CSS especially as we get into React

70
00:04:27.410 --> 00:04:33.091
Um but some common selectors So a selector is what you're gonna be using to

71
00:04:33.091 --> 00:04:33.470
target

72
00:04:33.470 --> 00:04:38.945
a particular element So if I go back like for example we have the body and we we

73
00:04:38.945 --> 00:04:39.250
wanna

74
00:04:39.250 --> 00:04:43.579
style the body in a particular way A selector is how we say I want to make the

75
00:04:43.579 --> 00:04:43.819
body

76
00:04:43.819 --> 00:04:48.778
look this way Give me the body and I'm going to specify some style attributes

77
00:04:48.778 --> 00:04:49.108
about

78
00:04:49.108 --> 00:04:49.420
it

79
00:04:50.509 --> 00:04:56.590
Um so common selectors are class names You can add something like a class to an

80
00:04:56.590 --> 00:04:56.970
element

81
00:04:57.129 --> 00:05:01.209
So if you say for example have a bunch of elements that are gonna be let's say

82
00:05:01.209 --> 00:05:01.449
it's

83
00:05:01.449 --> 00:05:06.804
a bunch of text that you want to be purple And throughout the web page you want

84
00:05:06.804 --> 00:05:07.119
to

85
00:05:07.119 --> 00:05:11.439
have purple text but it's a very specific shade of purple You can create a class

86
00:05:11.439 --> 00:05:11.709
called

87
00:05:12.119 --> 00:05:15.560
my specific shade of purple You can put that class on all the different pieces

88
00:05:15.560 --> 00:05:15.790
of

89
00:05:15.790 --> 00:05:19.211
text and they will all have that uh particular shade of purple and that way

90
00:05:19.211 --> 00:05:19.439
you're

91
00:05:19.439 --> 00:05:23.896
not repeating yourself by expressing that same style over and over again on

92
00:05:23.896 --> 00:05:24.238
every

93
00:05:24.238 --> 00:05:25.838
single element that you want to have it

94
00:05:26.670 --> 00:05:31.605
ID you so you can put an ID on an element that says like this element is the

95
00:05:31.605 --> 00:05:31.879
king

96
00:05:31.879 --> 00:05:36.490
element um but you can IDs cannot be repeated So IDs should only be used once

97
00:05:36.490 --> 00:05:36.778
per

98
00:05:36.778 --> 00:05:41.334
element um but you can use a specific CSS selector with a hashtag So the class

99
00:05:41.334 --> 00:05:41.619
name

100
00:05:41.619 --> 00:05:46.015
was a dot so you do the dot followed by the class name ID is a hashtag followed

101
00:05:46.015 --> 00:05:46.259
by

102
00:05:46.259 --> 00:05:50.264
the name and that's how you can target uh an element that has an ID And again

103
00:05:50.264 --> 00:05:50.500
I'm

104
00:05:50.500 --> 00:05:52.540
gonna show you examples of this so don't worry if you're not

105
00:05:53.160 --> 00:05:56.349
If you're not super getting it Um and then you can also style by just the

106
00:05:56.349 --> 00:05:56.548
element

107
00:05:56.548 --> 00:06:01.621
itself So if you're gonna say that every text tag uh is gonna be purple you can

108
00:06:01.621 --> 00:06:01.920
do

109
00:06:01.920 --> 00:06:04.980
it that way too rather than putting like a class name on it You can just say

110
00:06:04.980 --> 00:06:05.160
every

111
00:06:05.160 --> 00:06:10.082
text tag is gonna be purple um and you can kind of control it through through

112
00:06:10.082 --> 00:06:10.389
that

113
00:06:10.389 --> 00:06:10.939
element tag

114
00:06:13.559 --> 00:06:15.819
So here we go This is some examples

115
00:06:16.449 --> 00:06:17.119
Um

116
00:06:18.100 --> 00:06:21.547
You can see like you you can do a selector here and then you express the style

117
00:06:21.547 --> 00:06:21.750
with

118
00:06:21.750 --> 00:06:25.640
a key value property pair um and you can have multiple you can have as many as

119
00:06:25.640 --> 00:06:25.869
you

120
00:06:25.869 --> 00:06:29.548
want So in each one is it stands for heading 1

121
00:06:30.420 --> 00:06:34.181
and that is like if you want like a really big header at the top of your page

122
00:06:34.181 --> 00:06:34.389
that

123
00:06:34.389 --> 00:06:38.230
says like welcome to my page you typically use like an H1 Um so here we're

124
00:06:38.230 --> 00:06:38.470
saying

125
00:06:38.470 --> 00:06:43.078
the color of the font is blue and we're saying that the font size is 24 So

126
00:06:43.078 --> 00:06:43.350
that'll

127
00:06:43.350 --> 00:06:46.588
happen for any H1 on the page now that targets every H1

128
00:06:51.949 --> 00:06:59.052
Um so what I'm trying to call out on this slide is being specific about CSS So

129
00:06:59.052 --> 00:06:59.470
this

130
00:06:59.470 --> 00:07:03.373
is kind of the magic of CSS and what a lot of people get tripped up on I would

131
00:07:03.373 --> 00:07:03.579
say

132
00:07:03.910 --> 00:07:09.095
is that you can have multiple rules for an element So like if we go back

133
00:07:09.095 --> 00:07:09.420
actually

134
00:07:09.829 --> 00:07:16.859
to this slide So let's say for a minute that um I have this H1 tag So I have

135
00:07:16.859 --> 00:07:17.230
this

136
00:07:17.230 --> 00:07:21.059
style right here right for H1 I'm saying color blue font size 24

137
00:07:21.759 --> 00:07:27.886
Let's say that this H1 is inside the body which is where it probably should be

138
00:07:27.886 --> 00:07:28.269
and

139
00:07:28.720 --> 00:07:31.750
I could have another style that says body

140
00:07:32.480 --> 00:07:33.189
H1

141
00:07:33.920 --> 00:07:37.777
And that's saying give me the H1 in the body only because you could have you

142
00:07:37.777 --> 00:07:38.019
could

143
00:07:38.019 --> 00:07:41.570
have nested elements So you could say give me the H1s that are inside of a div

144
00:07:41.570 --> 00:07:41.778
tag

145
00:07:41.778 --> 00:07:43.928
a div is another type of HTML tag

146
00:07:44.459 --> 00:07:50.283
That's a more specific selector It's saying target the H1s inside of a certain

147
00:07:50.283 --> 00:07:50.699
other

148
00:07:50.699 --> 00:07:55.875
element and because that one's more specific that one wins out So it will start

149
00:07:55.875 --> 00:07:56.220
by

150
00:07:56.220 --> 00:08:01.122
applying the more generic rules but then the more specific rules will override

151
00:08:01.122 --> 00:08:01.500
those

152
00:08:01.500 --> 00:08:05.662
more generic rules and that's kind of the ordering It goes by specificity So the

153
00:08:05.662 --> 00:08:05.939
more

154
00:08:05.939 --> 00:08:09.209
specific the rule the closer the rule is to the element

155
00:08:09.778 --> 00:08:14.767
the the more important it will be in the ordering of the styles And that's

156
00:08:14.767 --> 00:08:15.100
probably

157
00:08:15.100 --> 00:08:19.449
confusing Uh again we're gonna see examples of it in the lab but hopefully that

158
00:08:19.449 --> 00:08:19.738
made

159
00:08:19.738 --> 00:08:20.019
sense

160
00:08:23.028 --> 00:08:28.865
Um oh yeah so the box model I wanna talk about the box model Uh it sounds more

161
00:08:28.865 --> 00:08:29.189
complicated

162
00:08:29.189 --> 00:08:35.767
than it is but every element on the page has these ingredients to it or these

163
00:08:35.767 --> 00:08:36.178
attributes

164
00:08:36.548 --> 00:08:39.609
So inside here is kind of like what we're gonna put in there So for example this

165
00:08:39.609 --> 00:08:39.788
could

166
00:08:39.788 --> 00:08:43.529
be text This could just be like hello my name is Dan in the content

167
00:08:44.519 --> 00:08:50.294
Padding is the spacing around that So it's saying like you know around the name

168
00:08:50.294 --> 00:08:50.678
or

169
00:08:50.678 --> 00:08:55.364
the hello my name is Danext Let's add maybe a couple of pixels of space so that

170
00:08:55.364 --> 00:08:55.639
it's

171
00:08:55.639 --> 00:08:59.428
not getting choked up you know maybe we wanna just give it some breathing room

172
00:09:00.349 --> 00:09:04.570
Um and that's different than margin Margin says

173
00:09:05.109 --> 00:09:08.267
give me some space between a couple of different elements because each element

174
00:09:08.267 --> 00:09:08.509
is

175
00:09:08.509 --> 00:09:11.747
a box So you can imagine another box model sitting right next to this thing to

176
00:09:11.747 --> 00:09:11.950
the

177
00:09:11.950 --> 00:09:17.677
right And the margin tells me hey in between those two elements I want some

178
00:09:17.677 --> 00:09:18.058
space

179
00:09:18.509 --> 00:09:24.013
But padding is between my content and that outside edge So it's the spacing in

180
00:09:24.013 --> 00:09:24.379
here

181
00:09:24.379 --> 00:09:25.308
that you're expanding

182
00:09:25.979 --> 00:09:30.939
Um margin is the space outside of the of this So it's saying in between these

183
00:09:30.939 --> 00:09:31.250
these

184
00:09:31.250 --> 00:09:35.327
other elements And then we have the border so you can actually specify a border

185
00:09:35.327 --> 00:09:35.599
around

186
00:09:35.599 --> 00:09:39.674
your content and you could just give it a color you can you can specify how

187
00:09:39.674 --> 00:09:39.928
thick

188
00:09:39.928 --> 00:09:45.363
it is you can say it's rounded um you can do a lot of stuff with border um But

189
00:09:45.363 --> 00:09:45.649
so

190
00:09:45.649 --> 00:09:49.423
this is when you hear the box model that's what it's referring to And you can

191
00:09:49.423 --> 00:09:49.658
actually

192
00:09:49.658 --> 00:09:53.830
see this in the browser Um so when you're kind of debugging which you'll learn

193
00:09:53.830 --> 00:09:54.109
how

194
00:09:54.109 --> 00:09:58.607
to kind of debug and troubleshoot HTML and CSS when you're doing that sometimes

195
00:09:58.607 --> 00:09:58.928
you'll

196
00:09:58.928 --> 00:10:02.845
end up coming here and looking at the box model in the browser devtools to see

197
00:10:02.845 --> 00:10:03.090
like

198
00:10:03.200 --> 00:10:06.680
OK where's that margin coming from Oh I've got padding here I didn't specify

199
00:10:06.680 --> 00:10:06.928
padding

200
00:10:06.969 --> 00:10:11.330
where is that coming from Um that's a really frequent problem that I run into so

201
00:10:13.599 --> 00:10:17.781
All right responsive web design So you might have heard this term responsive web

202
00:10:17.781 --> 00:10:18.080
is

203
00:10:18.080 --> 00:10:23.462
the idea of doing what I what I was talking about earlier which is specifying um

204
00:10:23.462 --> 00:10:23.798
different

205
00:10:23.798 --> 00:10:27.512
styles for different screen sizes So you might have seen a website that when you

206
00:10:27.512 --> 00:10:27.759
open

207
00:10:27.759 --> 00:10:32.913
it up on your desktop it looks a particular way but then when you open it up on

208
00:10:32.913 --> 00:10:33.200
your

209
00:10:33.200 --> 00:10:37.700
phone it looks a completely different way and you'll see the menu has the three

210
00:10:37.700 --> 00:10:38.000
lines

211
00:10:38.009 --> 00:10:42.532
which people refer to as the hamburger Um and you click on that and you've got a

212
00:10:42.532 --> 00:10:42.798
little

213
00:10:42.798 --> 00:10:47.299
slide out menu but then when you're on a desktop you've got this long navigation

214
00:10:47.299 --> 00:10:47.599
menu

215
00:10:47.609 --> 00:10:53.144
you don't have the hamburger icon anymore So um building pages that are

216
00:10:53.144 --> 00:10:53.570
responsive

217
00:10:53.570 --> 00:10:56.958
is pretty much the standard now for web like you're typically not building web

218
00:10:56.958 --> 00:10:57.200
pages

219
00:10:57.200 --> 00:11:00.728
that don't work on mobile phones because everybody's using their phone now Back

220
00:11:00.728 --> 00:11:01.000
when

221
00:11:01.000 --> 00:11:05.042
I started it was like a brand new thing Um when I just got out of school

222
00:11:05.042 --> 00:11:05.279
responsive

223
00:11:05.279 --> 00:11:10.291
web design was like kind of brand new it was like 2011 or 2012 Or maybe it had

224
00:11:10.291 --> 00:11:10.570
been

225
00:11:10.570 --> 00:11:13.290
around but it was brand new to the company I was working for at the time and

226
00:11:13.290 --> 00:11:13.450
they

227
00:11:13.450 --> 00:11:18.371
were just starting to adopt it So it's relatively new uh in the grand scheme of

228
00:11:18.371 --> 00:11:18.678
things

229
00:11:18.849 --> 00:11:19.440
um

230
00:11:19.969 --> 00:11:23.354
but it's super important now and uh you really need to understand it if you're

231
00:11:23.354 --> 00:11:23.580
gonna

232
00:11:23.580 --> 00:11:25.529
be building a a web page So

233
00:11:26.168 --> 00:11:31.252
uh as best practice you wanna do mobile first I've done it the other way where

234
00:11:31.252 --> 00:11:31.570
you

235
00:11:31.570 --> 00:11:35.131
design it for desktop and it was at that company actually I worked at because

236
00:11:35.131 --> 00:11:35.369
they

237
00:11:35.369 --> 00:11:38.619
had to retrofit responsive design into already existing pages that have been

238
00:11:38.619 --> 00:11:38.889
around

239
00:11:38.889 --> 00:11:43.873
for years Um and doing it that way is a lot harder to do and it's really painful

240
00:11:43.873 --> 00:11:44.149
to

241
00:11:44.149 --> 00:11:48.367
take a desktop-based page and make it look good on mobile versus building for

242
00:11:48.367 --> 00:11:48.668
mobile

243
00:11:48.668 --> 00:11:53.413
from the outset and then layering on the bigger sizes as you go It's much easier

244
00:11:53.413 --> 00:11:53.710
to

245
00:11:53.710 --> 00:11:56.779
do Uh so definitely recommend that as best practice

246
00:11:59.840 --> 00:12:05.654
Flexbox and grid are probably the most important tools that you'll use in CSS

247
00:12:05.654 --> 00:12:06.070
And

248
00:12:06.070 --> 00:12:09.625
these again are relatively new Back when I was originally learning this stuff we

249
00:12:09.625 --> 00:12:09.879
didn't

250
00:12:09.879 --> 00:12:14.455
have Flexbox and grid in aligning that that's what this stuff is for is for

251
00:12:14.455 --> 00:12:14.759
aligning

252
00:12:14.759 --> 00:12:18.636
content essentially it's for creating layouts on your page It's for expressing

253
00:12:18.636 --> 00:12:18.960
your

254
00:12:18.960 --> 00:12:23.756
content in rows and columns and When you I'll show you how to do this but when

255
00:12:23.756 --> 00:12:24.038
you

256
00:12:24.038 --> 00:12:28.005
look at like a design for a page typically you'll be able to start seeing it in

257
00:12:28.005 --> 00:12:28.239
your

258
00:12:28.239 --> 00:12:32.326
brain as rows and columns Everything is rows and columns so it's just about how

259
00:12:32.326 --> 00:12:32.599
big

260
00:12:32.599 --> 00:12:35.924
is this row and how many things are in this row and how is the space around the

261
00:12:35.924 --> 00:12:36.109
elements

262
00:12:36.109 --> 00:12:41.178
of this row or this column Um and Flexbox and grid give you the tools to do that

263
00:12:41.178 --> 00:12:41.460
Some

264
00:12:41.460 --> 00:12:45.205
people use both some people like one or the other I think they kind of have

265
00:12:45.205 --> 00:12:45.440
their

266
00:12:45.440 --> 00:12:51.266
own place Um I use Flexbox a lot more than I use Grid Uh Flexbox is great for

267
00:12:51.266 --> 00:12:51.590
like

268
00:12:51.590 --> 00:12:53.500
smaller targeted areas but if you have like

269
00:12:54.509 --> 00:12:58.335
tabular data that you want to show like like rows and literally rows and columns

270
00:12:58.335 --> 00:12:58.590
of

271
00:12:58.590 --> 00:13:02.621
cards like great is probably better for that So like Flexbox is good for

272
00:13:02.621 --> 00:13:02.908
one-dimensional

273
00:13:02.908 --> 00:13:07.267
layouts like if you're just gonna do a row here and a column over here um but if

274
00:13:07.267 --> 00:13:07.509
you're

275
00:13:07.509 --> 00:13:12.041
doing like like if you imagine you're browsing for properties on Zillow or

276
00:13:12.041 --> 00:13:12.389
something

277
00:13:12.389 --> 00:13:15.907
like that And you're just looking at houses you're seeing all these rows and

278
00:13:15.907 --> 00:13:16.158
columns

279
00:13:16.200 --> 00:13:20.594
like that's probably better for a grid because you can say give me 3 columns and

280
00:13:20.594 --> 00:13:20.869
15

281
00:13:20.869 --> 00:13:23.158
rows on on this view or something like that so

282
00:13:23.788 --> 00:13:25.879
Um I'm gonna show you how to do

283
00:13:26.428 --> 00:13:30.667
Flexbox and grid or just some examples of of Flexbox and grid Uh but there's

284
00:13:30.667 --> 00:13:30.950
this

285
00:13:30.950 --> 00:13:33.911
really cool tool It's gonna sound stupid uh but there's a really cool tool it's

286
00:13:33.911 --> 00:13:34.109
a

287
00:13:34.109 --> 00:13:38.943
game called Flexbox Froggy and there's one called Grid Garden and I'm gonna put

288
00:13:38.943 --> 00:13:39.288
the

289
00:13:39.308 --> 00:13:43.696
the links are in the slide deck and uh I encourage people to to use them I used

290
00:13:43.696 --> 00:13:43.940
them

291
00:13:43.940 --> 00:13:48.683
myself to learn uh Flexbox and Grid back when I was learning it Um really

292
00:13:48.683 --> 00:13:49.000
helpful

293
00:13:49.000 --> 00:13:53.441
tool Maybe I'll even show it Oops didn't need to click there Um so anyways how

294
00:13:53.441 --> 00:13:53.719
to

295
00:13:53.719 --> 00:13:58.359
use Flexbox So Flexbox um you would go to a container element

296
00:13:58.869 --> 00:14:02.846
So let's say this is like the wrapper of my let's use a navigation as an example

297
00:14:02.846 --> 00:14:03.080
So

298
00:14:03.080 --> 00:14:07.049
if you think of a navigation it's gonna go straight across the top of a of a web

299
00:14:07.049 --> 00:14:07.269
page

300
00:14:07.340 --> 00:14:12.345
and you're gonna see things like home about us uh contact us that's like a

301
00:14:12.345 --> 00:14:12.678
typical

302
00:14:13.239 --> 00:14:18.180
navigation menu that you might see So that's gonna be a row um because it's

303
00:14:18.180 --> 00:14:18.509
really

304
00:14:18.509 --> 00:14:23.325
left to right It's not going up and down it's left to right So by default when

305
00:14:23.325 --> 00:14:23.609
you

306
00:14:23.609 --> 00:14:28.910
do uh display flex it's a row You can specify that it's a row if you want to be

307
00:14:28.910 --> 00:14:29.190
explicit

308
00:14:29.200 --> 00:14:33.600
but by default it's a row Um if you want it to be a column then you have to say

309
00:14:33.600 --> 00:14:33.820
direction

310
00:14:34.029 --> 00:14:35.389
flex direction is column

311
00:14:36.250 --> 00:14:41.312
Um we also have this justify content property This is a flex property and you

312
00:14:41.312 --> 00:14:41.649
can

313
00:14:41.649 --> 00:14:47.809
say space between um which would equally space all the elements uh between them

314
00:14:47.809 --> 00:14:48.250
There's

315
00:14:48.250 --> 00:14:51.962
also space around which includes like the edges of the page so it puts equal

316
00:14:51.962 --> 00:14:52.210
space

317
00:14:52.210 --> 00:14:56.334
around from the edge all the way through the middle to the to the different

318
00:14:56.334 --> 00:14:56.609
elements

319
00:14:56.928 --> 00:15:01.399
Um so there's a lot of different ways you can kind of uh

320
00:15:01.940 --> 00:15:07.386
Justify that content but these two properties alone can do like 90% of what a

321
00:15:07.386 --> 00:15:07.750
lot

322
00:15:07.820 --> 00:15:11.685
it used to be a lot of work to get things aligned properly and this is just like

323
00:15:11.685 --> 00:15:11.899
it

324
00:15:11.899 --> 00:15:15.375
does the job very quickly Um so this is kind of like a bread and butter combo

325
00:15:15.375 --> 00:15:15.580
that

326
00:15:15.580 --> 00:15:18.859
you'll probably use a lot um or at least in variations of it

327
00:15:20.928 --> 00:15:26.831
Um grid is a little different So you can uh you you specify by saying display

328
00:15:26.831 --> 00:15:27.200
grid

329
00:15:27.408 --> 00:15:32.013
but you're actually gonna express like your columns and your rows So you can say

330
00:15:32.013 --> 00:15:32.320
um

331
00:15:32.649 --> 00:15:37.016
grid template columns and this is like repeat as a function Uh just if you don't

332
00:15:37.016 --> 00:15:37.288
understand

333
00:15:37.288 --> 00:15:39.727
this like don't worry about it just yet cause I'm just kind of showing you a

334
00:15:39.727 --> 00:15:39.879
picture

335
00:15:39.879 --> 00:15:43.950
of it so you can start thinking about it but um Uh you don't need to understand

336
00:15:43.950 --> 00:15:44.190
exactly

337
00:15:44.190 --> 00:15:47.502
what this stuff is right now but repeat is just gonna say this is the the

338
00:15:47.502 --> 00:15:47.710
columns

339
00:15:47.710 --> 00:15:52.489
and the rows and uh the sizing of them FR is a specific um

340
00:15:53.149 --> 00:15:59.127
unit for grid So I actually forget what FR stands for but um FR is the unit for

341
00:15:59.127 --> 00:15:59.460
expressing

342
00:15:59.460 --> 00:16:03.572
like how I think it's just like the percentage of space available for for a unit

343
00:16:03.572 --> 00:16:03.830
in

344
00:16:03.830 --> 00:16:08.352
the grid And then the grid gap is the space in between the items of the grid

345
00:16:08.352 --> 00:16:08.619
itself

346
00:16:09.428 --> 00:16:14.699
Um so then in here like we have you know maybe these are just items that are

347
00:16:14.699 --> 00:16:15.009
inside

348
00:16:15.009 --> 00:16:20.817
of the grid container um and you can kind of do different things with the uh the

349
00:16:20.817 --> 00:16:21.158
grid

350
00:16:21.158 --> 00:16:27.884
columns So like I said in um the grid garden game you're gonna if if you choose

351
00:16:27.884 --> 00:16:28.279
to

352
00:16:28.279 --> 00:16:31.242
do so you'll use all of these different properties and you'll see kind of how

353
00:16:31.242 --> 00:16:31.440
they

354
00:16:31.440 --> 00:16:34.000
work And I think it does a really great job of of teaching

355
00:16:35.788 --> 00:16:40.562
Um accessibility is super important Accessibility is the idea of making uh

356
00:16:40.562 --> 00:16:40.960
content

357
00:16:40.960 --> 00:16:44.821
available for people who have disabilities And uh there's a lot of different

358
00:16:44.821 --> 00:16:45.119
ways

359
00:16:45.119 --> 00:16:51.269
that you do this Um using semantic HTML is really important And what that means

360
00:16:51.269 --> 00:16:51.678
is

361
00:16:51.678 --> 00:16:55.524
like there you could technically make anything on your page or button if you

362
00:16:55.524 --> 00:16:55.798
wanted

363
00:16:55.798 --> 00:17:00.460
to Like I could take a piece of text and I could turn that into a button with

364
00:17:00.460 --> 00:17:00.719
CSS

365
00:17:00.840 --> 00:17:03.985
and I can make it so that when you hover your mouse over it it shows a little

366
00:17:03.985 --> 00:17:04.160
clicker

367
00:17:04.160 --> 00:17:07.641
pointer And you can click on that and I could add JavaScript that makes it go

368
00:17:07.641 --> 00:17:07.858
somewhere

369
00:17:07.858 --> 00:17:11.049
when you click on it or do something when you click on it But

370
00:17:11.670 --> 00:17:18.224
Doing so breaks the contract of accessibility and that when people uh navigate

371
00:17:18.224 --> 00:17:18.729
through

372
00:17:18.729 --> 00:17:22.099
your screen with a screen reader or something like that screen readers are

373
00:17:22.099 --> 00:17:22.358
making

374
00:17:22.608 --> 00:17:26.284
assumptions based on the standards of HTML that if a button is there it's going

375
00:17:26.284 --> 00:17:26.529
to

376
00:17:26.529 --> 00:17:30.887
tell that user hey this is a button you can click on it and do something but if

377
00:17:30.887 --> 00:17:31.130
you're

378
00:17:31.130 --> 00:17:35.148
styling a piece of text as a button now the screen reader doesn't know about it

379
00:17:35.148 --> 00:17:35.400
anymore

380
00:17:35.608 --> 00:17:39.763
And similarly with using things like H1s and H2s you're kind of telling the user

381
00:17:39.763 --> 00:17:40.039
like

382
00:17:40.049 --> 00:17:44.206
hey This is a significant piece of text This is a header I could technically

383
00:17:44.206 --> 00:17:44.483
take

384
00:17:44.483 --> 00:17:49.650
regular text and style it like in H1 Uh but the point of using those things is

385
00:17:49.650 --> 00:17:49.953
like

386
00:17:49.963 --> 00:17:53.089
it's almost like a language in itself If you read through the HTML it can tell

387
00:17:53.089 --> 00:17:53.285
you

388
00:17:53.285 --> 00:17:56.496
things about it It's like OK this is a this is an important piece of text It's

389
00:17:56.496 --> 00:17:56.684
like

390
00:17:56.684 --> 00:18:03.427
a call out A P tag is just a paragraph of text An image tag is an image um and

391
00:18:03.427 --> 00:18:03.765
there's

392
00:18:03.904 --> 00:18:07.489
there's other things too like there's properties of images There's like an alt

393
00:18:07.489 --> 00:18:07.765
tag

394
00:18:07.884 --> 00:18:08.844
yeah alt tags

395
00:18:09.729 --> 00:18:13.844
Alt tags you can put on an image and what that does is say if I do an image I

396
00:18:13.844 --> 00:18:14.049
can

397
00:18:14.049 --> 00:18:18.761
have an alt tag on it that says this is an image of a duck and a screen reader

398
00:18:18.761 --> 00:18:19.009
will

399
00:18:19.009 --> 00:18:23.192
tell a blind person that that you're looking at an image of a duck so that they

400
00:18:23.192 --> 00:18:23.439
know

401
00:18:23.769 --> 00:18:26.631
Um but if you don't have the alt text then they don't know That image is just

402
00:18:26.631 --> 00:18:26.799
lost

403
00:18:26.799 --> 00:18:32.781
on them Um also navigating through keyboard uh to be accessible you should be

404
00:18:32.781 --> 00:18:33.209
able

405
00:18:33.209 --> 00:18:36.912
to navigate via keyboard So when you like go to a navigation and you and you go

406
00:18:36.912 --> 00:18:37.130
to

407
00:18:37.130 --> 00:18:42.492
the first like tab Um in that menu you won't be able to hit tab and and navigate

408
00:18:42.492 --> 00:18:42.789
um

409
00:18:42.799 --> 00:18:46.869
with the screen reader via the keyboard Um there's a lot of other accessibility

410
00:18:46.869 --> 00:18:47.160
standards

411
00:18:47.390 --> 00:18:50.647
Um you can read about them WCAG is the standard so you can read about that stuff

412
00:18:50.647 --> 00:18:50.838
I

413
00:18:50.838 --> 00:18:56.448
have the link in here Um measuring your tool or measuring your pages

414
00:18:56.448 --> 00:18:56.880
accessibility

415
00:18:57.250 --> 00:19:01.327
uh can be done with tools like the AX Chrome extension which I currently have

416
00:19:01.327 --> 00:19:01.598
installed

417
00:19:01.598 --> 00:19:07.340
and I can show Um so I definitely recommend installing that Uh I think also the

418
00:19:07.340 --> 00:19:07.699
Chrome

419
00:19:07.699 --> 00:19:11.761
dev tools might have their own thing for this now I forget but Um you can open

420
00:19:11.761 --> 00:19:12.000
this

421
00:19:12.000 --> 00:19:15.625
tool in the Chrome extension and it'll do a scan of your page and it'll tell you

422
00:19:15.625 --> 00:19:15.838
if

423
00:19:15.838 --> 00:19:21.559
you have accessibility violations um things like contrast if you have like a

424
00:19:21.559 --> 00:19:22.000
really

425
00:19:22.000 --> 00:19:26.536
light yellow color on top of white like that's very difficult for people to see

426
00:19:26.536 --> 00:19:26.838
And

427
00:19:26.838 --> 00:19:32.034
if anyone has you know a disabled vision in any way like that might be not

428
00:19:32.034 --> 00:19:32.358
enough

429
00:19:32.358 --> 00:19:36.877
contrast for them to be able to read whatever's on your page So these are things

430
00:19:36.877 --> 00:19:37.160
to

431
00:19:37.160 --> 00:19:41.950
keep in mind Um I'll bring them up again later but Uh very important especially

432
00:19:41.950 --> 00:19:42.269
like

433
00:19:42.269 --> 00:19:45.331
from a legal perspective like companies can be in legal trouble if they have

434
00:19:45.331 --> 00:19:45.549
pages

435
00:19:45.549 --> 00:19:48.430
that that are not accessible so very important

436
00:19:51.979 --> 00:19:55.910
OK I think I mentioned this a little bit using semantic HTML um

437
00:19:56.949 --> 00:20:00.539
Organizing your CSS appropriately using responsive designs

438
00:20:03.680 --> 00:20:06.750
All right This is the lab so I'm just gonna jump into it

439
00:20:08.180 --> 00:20:12.735
And then uh once you guys get this slide deck you can check out Flexbox Froggy

440
00:20:12.735 --> 00:20:13.019
and

441
00:20:13.019 --> 00:20:15.009
Grade Garden and we can uh

442
00:20:15.660 --> 00:20:20.063
um you can you can kind of really learn how to use these tools effectively And

443
00:20:20.063 --> 00:20:20.338
you'll

444
00:20:20.539 --> 00:20:23.702
I think you'll be surprised at how effective they are at teaching you um so I

445
00:20:23.702 --> 00:20:23.900
really

446
00:20:23.900 --> 00:20:28.416
recommend them So do you have anything else before the lab No OK So I'm gonna

447
00:20:28.416 --> 00:20:28.699
jump

448
00:20:28.699 --> 00:20:32.809
into the lab now Give me a couple of seconds I'm going to set up

449
00:20:33.459 --> 00:20:34.078
um

450
00:20:35.338 --> 00:20:36.500
The code real quick

451
00:20:43.598 --> 00:20:47.118
I was gonna do this during the break but I decided to get water and stuff

452
00:20:48.449 --> 00:20:50.259
Um let's see here

453
00:21:24.598 --> 00:21:25.219
All right

454
00:21:31.880 --> 00:21:34.588
All right you guys should see my VS code hopefully

455
00:21:40.858 --> 00:21:41.910
And

456
00:21:42.939 --> 00:21:44.088
All right nice

457
00:21:47.420 --> 00:21:48.509
Now let's um

458
00:21:49.699 --> 00:21:53.209
How do I want to do this Let's uh unf full screen this

459
00:21:56.410 --> 00:22:00.314
And I want to show what we're gonna do in this lab is I'm gonna pull up a FIMA

460
00:22:00.314 --> 00:22:00.519
design

461
00:22:00.598 --> 00:22:05.023
and if you're not familiar with FIGMA FIGMA is um a really common tool that's

462
00:22:05.023 --> 00:22:05.318
used

463
00:22:05.318 --> 00:22:06.328
for creating

464
00:22:06.959 --> 00:22:11.213
Uh examples of what a web page should look like And the designers will use like

465
00:22:11.213 --> 00:22:11.479
drag

466
00:22:11.479 --> 00:22:15.003
and drop tools to kind of create the view of of what a web page looks like And

467
00:22:15.003 --> 00:22:15.199
then

468
00:22:15.199 --> 00:22:19.248
as a as an engineer you're responsible for actually converting that into HTML

469
00:22:19.248 --> 00:22:19.559
and

470
00:22:19.559 --> 00:22:20.719
into CSS so

471
00:22:21.578 --> 00:22:23.500
That's kind of what I'm gonna demonstrate here

472
00:22:34.578 --> 00:22:36.410
Man I should have opened these ahead of time

473
00:22:37.469 --> 00:22:38.479
So I will get better

474
00:22:40.000 --> 00:22:42.729
OK so this design I'm gonna zoom in

475
00:22:44.328 --> 00:22:48.047
I found this design for it's a free community design on FIMA You can go and

476
00:22:48.047 --> 00:22:48.279
browse

477
00:22:48.279 --> 00:22:53.106
FigMA Designs Oh you know what Am I not sharing Hold on Yeah you're on uh VS

478
00:22:53.106 --> 00:22:53.390
code

479
00:22:54.650 --> 00:22:55.259
All right

480
00:22:56.170 --> 00:22:58.890
I wanted to share my whole window

481
00:23:02.150 --> 00:23:04.935
Oh here we go I'll just share my screen That's what I wanted to do this whole

482
00:23:04.935 --> 00:23:05.098
time

483
00:23:06.939 --> 00:23:08.779
I'm a Discord

484
00:23:09.709 --> 00:23:11.039
live noob OK

485
00:23:11.588 --> 00:23:12.630
All right we should see

486
00:23:14.420 --> 00:23:15.479
The web page now

487
00:23:17.479 --> 00:23:22.510
All right So this is a free FIMA design I found uh in the community and I picked

488
00:23:22.510 --> 00:23:22.789
it

489
00:23:22.789 --> 00:23:28.575
because it had responsive layout So this one doesn't have a medium size it's

490
00:23:28.575 --> 00:23:28.989
only

491
00:23:28.989 --> 00:23:29.959
got mobile

492
00:23:30.509 --> 00:23:32.259
and desktop

493
00:23:32.949 --> 00:23:39.523
Um we only have about 25 minutes left of this So I'm gonna start on this but

494
00:23:39.523 --> 00:23:39.910
ultimately

495
00:23:39.949 --> 00:23:43.239
I think that this is gonna carry over into the next um

496
00:23:43.920 --> 00:23:47.915
Into the next course or into the next class on Wednesday So um I'll go over a

497
00:23:47.915 --> 00:23:48.150
little

498
00:23:48.150 --> 00:23:51.749
bit if people wanna stay uh and I'll definitely leave this open for questions So

499
00:23:51.749 --> 00:23:51.989
I'm

500
00:23:51.989 --> 00:23:54.801
gonna dive into it um just know that we probably aren't gonna have enough time

501
00:23:54.801 --> 00:23:54.989
to

502
00:23:54.989 --> 00:23:57.660
get through all of it today Um

503
00:23:58.459 --> 00:24:01.068
So uh that being said

504
00:24:01.779 --> 00:24:06.403
let's start looking at it So this is um this is the mobile view and this is what

505
00:24:06.403 --> 00:24:06.660
we're

506
00:24:06.660 --> 00:24:12.250
gonna wanna build first right Because building mobile is is um like mobile first

507
00:24:12.250 --> 00:24:12.650
responsive

508
00:24:12.650 --> 00:24:14.689
is what is probably the most effective

509
00:24:15.469 --> 00:24:19.039
So we can kind of take a look here We've got like this navigation We've got like

510
00:24:19.039 --> 00:24:19.250
a

511
00:24:19.250 --> 00:24:21.640
hamburger menu that's what I was talking about earlier

512
00:24:22.239 --> 00:24:22.920
Um

513
00:24:23.699 --> 00:24:28.499
We got some text here This is kind of called the hero section um with some

514
00:24:28.499 --> 00:24:28.799
buttons

515
00:24:28.799 --> 00:24:34.059
and an image So we're gonna be doing everything up to this line here So we'll do

516
00:24:34.059 --> 00:24:34.368
everything

517
00:24:34.368 --> 00:24:39.797
from the top down to this bottom form um just for the sake of time and the rest

518
00:24:39.797 --> 00:24:40.098
of

519
00:24:40.098 --> 00:24:42.900
it is kind of like repetitive anyway It's like once you've kind of done

520
00:24:43.539 --> 00:24:46.059
some of it you're you're gonna kind of get the gist of it anyway so

521
00:24:46.799 --> 00:24:49.886
Um we're gonna start building this out So what I'm gonna do is kinda like split

522
00:24:49.886 --> 00:24:50.078
screen

523
00:24:50.078 --> 00:24:52.029
this a little bit So I'm gonna do um

524
00:24:52.880 --> 00:24:54.029
tile this to the right

525
00:24:54.858 --> 00:24:55.709
I'll do this

526
00:24:56.500 --> 00:25:00.223
Um and I'll try and zoom this in as much as possible so that you guys can kind

527
00:25:00.223 --> 00:25:00.430
of

528
00:25:00.430 --> 00:25:00.858
see

529
00:25:02.680 --> 00:25:06.610
What plug-ins do we need All right yes So let's get you guys set up So let me

530
00:25:06.610 --> 00:25:06.828
put

531
00:25:06.828 --> 00:25:07.630
this link

532
00:25:08.519 --> 00:25:12.299
In the chat cause I'd like for you guys to follow along Um

533
00:25:13.529 --> 00:25:17.729
This is the FIMA link Actually I might need to share this hold on

534
00:25:24.239 --> 00:25:26.900
In view copy link Nice OK

535
00:25:27.439 --> 00:25:31.640
I'm putting this link into the Discord chat So you guys all open that

536
00:25:57.900 --> 00:26:00.009
You make it bigger yes I can make it bigger

537
00:26:02.318 --> 00:26:06.068
Um you're saying the uh sigma window or which one

538
00:26:33.779 --> 00:26:34.630
OK nice yeah

539
00:26:43.479 --> 00:26:46.867
Cool right I'll let you guys get in there And then in the meantime hopefully you

540
00:26:46.867 --> 00:26:47.078
guys

541
00:26:47.078 --> 00:26:48.750
have VS code installed

542
00:26:49.640 --> 00:26:50.880
Let's get that fired up

543
00:26:51.979 --> 00:26:56.826
Um and also like make a directory on your desktop or something like that that

544
00:26:56.826 --> 00:26:57.150
we're

545
00:26:57.150 --> 00:26:58.539
gonna host this project in

546
00:26:59.199 --> 00:27:03.215
So what I did was I just in my terminal I just made a directory I did make

547
00:27:03.215 --> 00:27:03.439
directory

548
00:27:03.439 --> 00:27:09.692
ship up and then I um opened that MVS code and I'll show that again if you guys

549
00:27:09.692 --> 00:27:10.039
need

550
00:27:13.660 --> 00:27:14.598
Let zoom this in

551
00:27:19.368 --> 00:27:24.272
Miguel yes that's typically how it works Being a UX it's it's usually called UX

552
00:27:24.272 --> 00:27:24.598
designer

553
00:27:24.729 --> 00:27:29.122
It stands for user experience That's like an entirely different discipline So

554
00:27:29.122 --> 00:27:29.489
they're

555
00:27:29.489 --> 00:27:34.219
responsible for understanding the way that users navigate pages and creating

556
00:27:34.219 --> 00:27:34.650
layouts

557
00:27:34.650 --> 00:27:39.078
and page components that make sense to users um

558
00:27:40.368 --> 00:27:43.229
Whereas like as a full stack engineer you won't be responsible for actually

559
00:27:43.229 --> 00:27:43.449
designing

560
00:27:43.449 --> 00:27:47.568
the page It'll be more just like bringing it to life Uh oh am I muted

561
00:27:53.568 --> 00:27:54.019
OK

562
00:28:03.318 --> 00:28:04.029
Hopefully

563
00:28:04.539 --> 00:28:06.578
DB can fix his sound

564
00:28:08.578 --> 00:28:10.670
All right so extensions

565
00:28:11.539 --> 00:28:13.380
I have a lot of extensions installed

566
00:28:18.868 --> 00:28:22.019
So if you go in here so it's this extensions

567
00:28:25.029 --> 00:28:26.719
Did you mute here Oh

568
00:28:28.160 --> 00:28:31.078
Um so if you search an extensions for live server

569
00:28:33.439 --> 00:28:34.969
You should see this one right here

570
00:28:35.559 --> 00:28:37.818
So I believe this is the one that I already have installed yeah

571
00:28:40.670 --> 00:28:43.160
So you want to install there's a button here that says install

572
00:28:45.439 --> 00:28:48.049
And you'll want to click that install button

573
00:28:48.578 --> 00:28:50.529
So I'll let everyone go ahead and install that

574
00:28:54.660 --> 00:28:56.160
I think that's all we need for now

575
00:28:57.479 --> 00:29:00.279
Uh let's see what else do I have the rainbow

576
00:29:06.828 --> 00:29:07.910
In my brackets

577
00:29:08.779 --> 00:29:12.027
I don't think I have it installed I think it just does it by default now Rainbow

578
00:29:12.027 --> 00:29:12.219
brackets

579
00:29:12.219 --> 00:29:15.037
are nice because it highlights your brackets in different colors so it's easy to

580
00:29:15.037 --> 00:29:15.239
see

581
00:29:15.250 --> 00:29:15.608
but

582
00:29:16.209 --> 00:29:19.118
we'll add it if we need it Right now all we need is live servers so

583
00:29:19.949 --> 00:29:25.269
Open your VS code open a new directory and let's uh install a live server

584
00:29:26.170 --> 00:29:31.076
Um and then I'll show you how to use that So what Live Server does is it hosts

585
00:29:31.076 --> 00:29:31.348
your

586
00:29:31.348 --> 00:29:34.949
HTML for you on the server so you don't need to set that up And as you change

587
00:29:34.949 --> 00:29:35.150
the

588
00:29:35.150 --> 00:29:37.500
code it automatically will reload that for you

589
00:29:38.670 --> 00:29:43.890
So first thing I'm going to do is create a file called index HTML

590
00:29:44.949 --> 00:29:49.557
So yeah that's kind of just like a standard thing So when you have a file that

591
00:29:49.557 --> 00:29:49.828
lives

592
00:29:49.828 --> 00:29:55.892
at index you don't need to specify it in the URL So if you go to like full

593
00:29:55.892 --> 00:29:56.229
stackexpert.io

594
00:29:56.309 --> 00:30:02.187
it'll load up the index by default Um that's like the default HTML page So

595
00:30:02.187 --> 00:30:02.578
that's

596
00:30:02.578 --> 00:30:05.939
where you usually start as index HTML and you'll see that pattern kind of

597
00:30:05.939 --> 00:30:06.180
repeated

598
00:30:06.180 --> 00:30:10.361
in um also JavaScript files and things like that You might see like an index.JS

599
00:30:10.361 --> 00:30:10.640
or

600
00:30:10.660 --> 00:30:16.100
or an index CSS um but it's just kind of like a a standard convention Um for

601
00:30:16.100 --> 00:30:16.420
HTML

602
00:30:16.500 --> 00:30:18.328
it's just a it's a web standard so

603
00:30:19.348 --> 00:30:20.140
All right So

604
00:30:20.910 --> 00:30:23.979
um in the HTML we're gonna start with the doc type

605
00:30:24.630 --> 00:30:30.107
So that's gonna let the browser know that this is an HTML file Um I don't know

606
00:30:30.107 --> 00:30:30.430
if

607
00:30:30.430 --> 00:30:34.059
you still need to do this anymore but best practice to continue to do that

608
00:30:34.739 --> 00:30:36.489
Um so

609
00:30:37.068 --> 00:30:39.509
I'll do the next tag is gonna be HTML

610
00:30:44.088 --> 00:30:48.568
Um so HTML is always gonna be your first tag after the doc tag

611
00:30:49.559 --> 00:30:50.309
Um

612
00:30:51.180 --> 00:30:53.739
And then inside that we'll have our head

613
00:30:55.420 --> 00:30:59.755
So like I mentioned earlier the head is for like most of what's in the head is

614
00:30:59.755 --> 00:31:00.009
not

615
00:31:00.009 --> 00:31:04.000
gonna be displayed So this is um you can put the title of the page

616
00:31:04.729 --> 00:31:06.880
So in our case it will be Ship up

617
00:31:08.930 --> 00:31:12.318
So then what happens is when you when we open this in the browser we'll actually

618
00:31:12.318 --> 00:31:12.529
see

619
00:31:12.529 --> 00:31:17.150
ship up in the tab name Like right here in this tab we see logistics landing

620
00:31:17.150 --> 00:31:17.439
page

621
00:31:17.489 --> 00:31:20.568
but what we want to see is is Ship up for for our page

622
00:31:21.229 --> 00:31:24.024
So I'm gonna go ahead and I'm gonna open this with the live server now So if you

623
00:31:24.024 --> 00:31:24.180
right

624
00:31:24.180 --> 00:31:28.566
click on the file there's this open with live server This is actually gonna open

625
00:31:28.566 --> 00:31:28.858
in

626
00:31:28.858 --> 00:31:32.021
another window I think which could be OK good It opened it here All right So

627
00:31:32.021 --> 00:31:32.219
there's

628
00:31:32.219 --> 00:31:35.107
nothing here right Because I didn't really put anything But you can see in the

629
00:31:35.107 --> 00:31:35.299
top

630
00:31:35.299 --> 00:31:41.130
of the tab we got ship up So that is the name the title of our of our webpage

631
00:31:42.318 --> 00:31:43.118
So

632
00:31:44.098 --> 00:31:45.279
Let's keep going

633
00:31:45.848 --> 00:31:47.759
Um we look at our design again

634
00:31:48.630 --> 00:31:49.390
All right so

635
00:31:50.449 --> 00:31:54.328
One thing we can do is download these images So

636
00:31:55.289 --> 00:31:59.752
I'm going to download so if you actually double click on these images you can

637
00:31:59.752 --> 00:32:00.049
say

638
00:32:00.739 --> 00:32:01.689
uh

639
00:32:02.939 --> 00:32:03.838
Where is it

640
00:32:04.900 --> 00:32:11.833
Copy here it is copy paste as you can do copy as SVG So let's copy as SVG SVG is

641
00:32:11.833 --> 00:32:12.180
a

642
00:32:12.180 --> 00:32:12.949
file type

643
00:32:13.739 --> 00:32:18.914
Uh it's like an image file type where the image is actually expressed in like

644
00:32:18.914 --> 00:32:19.259
another

645
00:32:19.259 --> 00:32:24.189
XML type It's like a a scalable vector graphic Um it's great for web

646
00:32:24.858 --> 00:32:27.918
And what I'm gonna do is I'm going to create a folder over here so there's a

647
00:32:27.918 --> 00:32:28.098
folder

648
00:32:28.098 --> 00:32:31.469
button I'm gonna create a folder called images just to store this

649
00:32:32.699 --> 00:32:37.630
And inside of here I'm gonna create a new file and I'm gonna call it logo.SVG

650
00:32:39.000 --> 00:32:41.949
And then I'm just gonna paste that SVG

651
00:32:43.009 --> 00:32:46.069
That I just downloaded So you can kind of see it looks very similar to kind of

652
00:32:46.069 --> 00:32:46.250
what

653
00:32:46.250 --> 00:32:49.775
we're doing with the HTML There's like an element name it's an angle brackets So

654
00:32:49.775 --> 00:32:50.009
this

655
00:32:50.009 --> 00:32:54.108
is this is an XML format file

656
00:32:55.390 --> 00:32:59.677
Uh let me see if anyone has any questions Zoom please Oh am I not zoomed in

657
00:32:59.677 --> 00:32:59.930
enough

658
00:33:00.539 --> 00:33:01.259
Let me zoom in

659
00:33:04.049 --> 00:33:06.039
Gonna run out of screen space soon I think

660
00:33:07.588 --> 00:33:08.750
Hopefully that's OK

661
00:33:12.289 --> 00:33:13.818
Give myself a little more room here

662
00:33:16.430 --> 00:33:16.910
All right

663
00:33:18.578 --> 00:33:22.873
Let's keep going So we got our title we've got our logo downloaded Let's keep

664
00:33:22.873 --> 00:33:23.160
going

665
00:33:23.318 --> 00:33:24.489
We need our

666
00:33:25.019 --> 00:33:29.087
uh hamburger icon That's another image that I want to download So I'm gonna do

667
00:33:29.087 --> 00:33:29.358
copy

668
00:33:29.358 --> 00:33:31.219
paste as SVG

669
00:33:32.949 --> 00:33:37.189
You file I'm gonna call this the hamburger.sg

670
00:33:38.779 --> 00:33:39.969
I'm gonna paste that in there

671
00:33:41.848 --> 00:33:46.751
So now I've got my graphics Um we need a few more graphics but we'll get them

672
00:33:46.751 --> 00:33:47.039
later

673
00:33:47.140 --> 00:33:50.954
Let's keep going cause I want you to see some some coding instead of downloading

674
00:33:50.954 --> 00:33:51.209
images

675
00:33:52.239 --> 00:33:55.469
The next thing we can do is if we look at this font

676
00:33:56.680 --> 00:33:58.868
So this font is

677
00:33:59.430 --> 00:34:02.118
so actually you have to like click a few times to actually get it highlighted

678
00:34:03.640 --> 00:34:06.229
I see some people are still downloading the image so I'll let them do that

679
00:34:07.759 --> 00:34:08.360
Um

680
00:34:09.300 --> 00:34:10.438
And once they're done

681
00:34:12.409 --> 00:34:15.346
So try and get in here and double click on this text If you double click on this

682
00:34:15.346 --> 00:34:15.510
text

683
00:34:15.550 --> 00:34:20.210
you can see right here it'll have the font name is Leo I don't know how to say

684
00:34:20.210 --> 00:34:20.469
that

685
00:34:20.469 --> 00:34:21.269
Lotto maybe

686
00:34:22.070 --> 00:34:27.151
So typically you'll need to get the fonts yourself Um I don't think that this is

687
00:34:27.151 --> 00:34:27.469
a

688
00:34:27.469 --> 00:34:28.260
standard font

689
00:34:29.407 --> 00:34:34.490
Yeah Jason you're gonna copy paste as SVG So for the for the for the images only

690
00:34:34.490 --> 00:34:34.789
So

691
00:34:34.789 --> 00:34:39.294
like the Ship up logo copy paste that as SVG and then for the uh hamburger icon

692
00:34:39.294 --> 00:34:39.559
you

693
00:34:39.559 --> 00:34:44.467
want to copy that as SVG and then paste it into the hamburger SVG

694
00:34:49.208 --> 00:34:50.840
Let me know if you have any issues with that

695
00:34:51.719 --> 00:34:52.250
All right

696
00:34:53.139 --> 00:34:57.621
Um while you guys are doing that I'm gonna show you So we need to get this LAO

697
00:34:57.621 --> 00:34:57.869
font

698
00:34:58.918 --> 00:35:04.300
And the way that we can do that is we can go to Google fonts So Google Fonts

699
00:35:11.728 --> 00:35:13.628
And I'm going to type in Lao

700
00:35:15.148 --> 00:35:15.739
Here we go

701
00:35:18.570 --> 00:35:19.659
So we can see here

702
00:35:21.570 --> 00:35:25.057
This will have all the different like variations of this font So you can click

703
00:35:25.057 --> 00:35:25.289
this

704
00:35:25.289 --> 00:35:26.719
big button here get font

705
00:35:27.489 --> 00:35:29.119
And you can get embed code

706
00:35:31.030 --> 00:35:34.340
I'm gonna go back just in case that was too fast um

707
00:35:35.699 --> 00:35:36.760
You're gonna click on

708
00:35:39.059 --> 00:35:39.849
Uh

709
00:35:40.530 --> 00:35:43.898
get in bed code So you click get font and then get embed code

710
00:35:45.648 --> 00:35:52.005
And then right here you can see this link tag There's a couple of link tags So

711
00:35:52.005 --> 00:35:52.378
you're

712
00:35:52.378 --> 00:35:54.610
gonna copy this actually So you gonna copy it

713
00:35:56.159 --> 00:35:57.909
And then go back to the index

714
00:35:58.519 --> 00:36:02.020
and in the head we're gonna paste that and then we're gonna stop for a second

715
00:36:02.020 --> 00:36:02.239
and

716
00:36:02.239 --> 00:36:03.188
I'm gonna explain

717
00:36:11.260 --> 00:36:14.789
OK let me uh give myself some more screen space here

718
00:36:16.989 --> 00:36:21.989
OK Um any questions Is anybody stuck Are we OK so far

719
00:36:27.010 --> 00:36:27.519
OK

720
00:36:29.188 --> 00:36:29.780
All right

721
00:36:30.530 --> 00:36:31.958
So what we just did

722
00:36:32.728 --> 00:36:34.179
where's the hamburger SVG

723
00:36:34.688 --> 00:36:39.301
So in our images folder I created a hamburger SVG You can double click in the

724
00:36:39.301 --> 00:36:39.590
FIMA

725
00:36:39.590 --> 00:36:43.239
or yeah in the FIMA right here You can double click on this

726
00:36:43.929 --> 00:36:46.780
until you get highlighted and then just do copy as SVG

727
00:36:47.590 --> 00:36:50.732
Can you minimize the file explorer and VS code Yeah you can You just click this

728
00:36:50.732 --> 00:36:50.929
thing

729
00:36:50.929 --> 00:36:52.579
right here and it'll go away

730
00:36:53.300 --> 00:36:55.398
Or maybe you just want me to do it so you don't see it anymore

731
00:36:56.478 --> 00:37:00.878
Um I wanted to keep that open so people could see what the files were

732
00:37:03.869 --> 00:37:06.418
OK so what we just did with the fonts

733
00:37:08.929 --> 00:37:08.938
is

734
00:37:10.639 --> 00:37:15.988
we got a link tag So a link tag is a way that you can load things like style

735
00:37:15.988 --> 00:37:16.269
sheets

736
00:37:16.269 --> 00:37:20.977
and fonts So what we did was we got this link tag that you can paste in and

737
00:37:20.977 --> 00:37:21.239
essentially

738
00:37:21.280 --> 00:37:24.228
it's gonna load the font straight from Google static

739
00:37:24.789 --> 00:37:29.539
Google static fonts Um typically like in a production app you wouldn't want to

740
00:37:29.539 --> 00:37:29.878
do

741
00:37:29.878 --> 00:37:33.891
this because this is like a little less efficient You'd want to bundle your CSS

742
00:37:33.891 --> 00:37:34.159
with

743
00:37:34.159 --> 00:37:36.840
your code which you'll learn later on in the boot camp

744
00:37:37.360 --> 00:37:41.478
Um but for now this is fine for our purposes but this will

745
00:37:42.208 --> 00:37:47.090
this will unlock the um the font for us in our CSS

746
00:37:47.708 --> 00:37:49.360
You sure to select the design mobile

747
00:37:52.148 --> 00:37:53.378
Oh yeah thank you

748
00:38:05.829 --> 00:38:09.867
Yeah so the cross origin I think just allows us to pull this down cross origin

749
00:38:09.867 --> 00:38:10.119
meaning

750
00:38:10.119 --> 00:38:12.937
like it's from a different domain than what we're hosted on because right now

751
00:38:12.937 --> 00:38:13.139
we're

752
00:38:13.139 --> 00:38:13.929
hosted on

753
00:38:15.159 --> 00:38:21.983
127.0.0.1 And what this means is just your local host You'll hear the term local

754
00:38:21.983 --> 00:38:22.438
host

755
00:38:22.599 --> 00:38:28.796
So I could actually change this 127.0.0.1 to localhost and that just still work

756
00:38:28.796 --> 00:38:29.239
it

757
00:38:29.239 --> 00:38:33.889
does And that just means like running on your computer here It's not going out

758
00:38:33.889 --> 00:38:34.199
across

759
00:38:34.199 --> 00:38:38.128
the internet to load this page Um the servers running on your local host

760
00:38:39.389 --> 00:38:41.239
Yeah thanks Matt Thanks for calling that out

761
00:38:42.840 --> 00:38:47.099
Uh yeah you want to make sure that you're on the design page like Matt said

762
00:38:48.619 --> 00:38:49.860
Um

763
00:38:50.539 --> 00:38:54.544
cool All right So I'm gonna keep going So now we've got our fonts and we've got

764
00:38:54.544 --> 00:38:54.780
our

765
00:38:54.780 --> 00:38:55.619
images

766
00:38:56.500 --> 00:39:00.956
What we want to do now is start building out this HTML So don't even think about

767
00:39:00.956 --> 00:39:01.219
CSS

768
00:39:01.219 --> 00:39:01.889
just yet

769
00:39:02.500 --> 00:39:06.239
Let's think about the structure of the page So if you look at it if you remember

770
00:39:06.239 --> 00:39:06.458
earlier

771
00:39:06.458 --> 00:39:09.073
when I was talking about building a design you're gonna start seeing things in

772
00:39:09.073 --> 00:39:09.260
rows

773
00:39:09.260 --> 00:39:14.909
and columns So if you look at this nav what do I see I see a row I see the logo

774
00:39:14.909 --> 00:39:15.179
and

775
00:39:15.179 --> 00:39:17.059
then I see this navigation

776
00:39:18.010 --> 00:39:19.889
I don't this this hamburger icon

777
00:39:20.590 --> 00:39:22.809
And then later on on the desktop view

778
00:39:23.869 --> 00:39:29.157
This is gonna be a bunch of these little dropdowns and and links So this is all

779
00:39:29.157 --> 00:39:29.469
gonna

780
00:39:29.469 --> 00:39:31.260
be a part of one single row

781
00:39:31.869 --> 00:39:33.938
So what I'm gonna do is

782
00:39:34.550 --> 00:39:37.924
add these items in and I'm probably gonna use Flexbox cause Flexbox is for doing

783
00:39:37.924 --> 00:39:38.148
like

784
00:39:38.148 --> 00:39:39.909
singular rows or singular columns

785
00:39:40.918 --> 00:39:43.723
Um and we'll do the styling for it later but that's how you want to start

786
00:39:43.723 --> 00:39:43.898
thinking

787
00:39:43.898 --> 00:39:44.570
about it so

788
00:39:45.800 --> 00:39:49.661
Inside of HTML like I said earlier the head is where you're gonna put static

789
00:39:49.661 --> 00:39:49.918
things

790
00:39:49.918 --> 00:39:53.060
like style sheets So once we create our style sheet later we're gonna put it

791
00:39:53.060 --> 00:39:53.269
here

792
00:39:53.708 --> 00:39:56.208
um and it's gonna be a link tag as well

793
00:39:56.719 --> 00:40:01.469
Uh but outside of the head we're gonna have the body and this is where

794
00:40:02.039 --> 00:40:04.559
you're gonna wanna put all of the content from your page

795
00:40:05.699 --> 00:40:06.898
Um so

796
00:40:07.438 --> 00:40:08.550
semantically

797
00:40:09.208 --> 00:40:14.110
for uh a navigation menu what we'll wanna do is have a header So header is just

798
00:40:14.110 --> 00:40:14.398
the

799
00:40:14.398 --> 00:40:18.201
HTML element that says whatever this stuff is gonna be is gonna be kind of the

800
00:40:18.201 --> 00:40:18.438
the

801
00:40:18.438 --> 00:40:19.360
header of the page

802
00:40:20.340 --> 00:40:23.289
Additionally there's an HTML element called a Nav

803
00:40:24.188 --> 00:40:27.458
So the nav means a navigation menu So

804
00:40:28.349 --> 00:40:32.521
this is kind of our setup for creating a navigation menu There's nothing there

805
00:40:32.521 --> 00:40:32.820
yet

806
00:40:33.030 --> 00:40:35.168
but this is just kind of the HTML structure

807
00:40:35.949 --> 00:40:37.110
of a navigation menu

808
00:40:38.860 --> 00:40:42.760
All right let's pause for a second because I think people are still catching up

809
00:40:44.320 --> 00:40:45.628
Um

810
00:40:47.250 --> 00:40:50.260
You might still be downloading images and stuff like that so

811
00:40:52.260 --> 00:40:56.371
Yeah Let me do let me do the fonts again for you guys since you got stuck That

812
00:40:56.371 --> 00:40:56.599
was

813
00:40:56.599 --> 00:40:59.281
my fault for not telling you how to navigate When I opened the link it went

814
00:40:59.281 --> 00:40:59.449
straight

815
00:40:59.449 --> 00:41:04.090
to the design I didn't realize you guys got linked to a different view Um

816
00:41:04.978 --> 00:41:08.570
So what I did was in the FIA itself

817
00:41:09.378 --> 00:41:12.648
I went to the text right So if you double click on the text

818
00:41:13.898 --> 00:41:16.059
It will tell you the name of the font

819
00:41:18.840 --> 00:41:24.030
So you'll see um underneath this text word and I don't know if you guys can see

820
00:41:24.679 --> 00:41:29.415
this I can't zoom in on the on the gutter but there's a word named text here It

821
00:41:29.415 --> 00:41:29.679
says

822
00:41:29.679 --> 00:41:32.719
text and underneath it has the font name which is LATO

823
00:41:33.869 --> 00:41:37.704
And you can kind of see that as I pop it out So LATS So what I did was I went to

824
00:41:37.704 --> 00:41:37.878
Google

825
00:41:37.878 --> 00:41:40.639
Fonts If you go to Google and just type Google Fonts

826
00:41:41.708 --> 00:41:44.030
You can go to this Google Fonts location

827
00:41:44.628 --> 00:41:46.478
In the top box type LATO

828
00:41:48.659 --> 00:41:50.679
And then that font came up

829
00:41:52.070 --> 00:41:55.392
And you can click this get font button It's at the bottom now Sometimes it's at

830
00:41:55.392 --> 00:41:55.599
the

831
00:41:55.599 --> 00:42:00.057
top I don't know but it's at the bottom now You click get font and click get

832
00:42:00.057 --> 00:42:00.320
embed

833
00:42:00.320 --> 00:42:00.789
code

834
00:42:04.769 --> 00:42:07.208
And then in here you can click copy code

835
00:42:07.820 --> 00:42:11.449
I'm just gonna paste it in the Discord chat to save you guys some time

836
00:42:11.978 --> 00:42:14.530
So you can just copy and paste this into your head

837
00:42:15.750 --> 00:42:17.570
And that's how you're gonna get the font loaded in

838
00:42:29.918 --> 00:42:33.250
All right I'm gonna keep going cause we're running out of time but I want you

839
00:42:33.250 --> 00:42:33.458
guys

840
00:42:33.458 --> 00:42:34.590
to see some stuff

841
00:42:35.199 --> 00:42:36.869
So we still don't have anything

842
00:42:37.438 --> 00:42:41.216
in our body We have our header we have the nav nested inside So now let's create

843
00:42:41.216 --> 00:42:41.438
some

844
00:42:41.438 --> 00:42:43.110
stuff Um

845
00:42:44.519 --> 00:42:50.030
Inside of the nav we're gonna wanna put our logo

846
00:42:50.719 --> 00:42:56.228
Um so I'm gonna create a div for that So div is like probably the most common

847
00:42:56.949 --> 00:43:00.895
element you're gonna see in HTML and a div just says a generic grouping It's

848
00:43:00.895 --> 00:43:01.159
just

849
00:43:01.159 --> 00:43:06.694
gonna be a generic grouping of stuff It's not like a semantic like image or a

850
00:43:06.694 --> 00:43:07.039
list

851
00:43:07.039 --> 00:43:10.776
or something like that It's just saying there's gonna be some stuff in here on a

852
00:43:10.776 --> 00:43:11.010
container

853
00:43:11.159 --> 00:43:13.000
It's just a container element

854
00:43:13.579 --> 00:43:16.628
So I'm gonna create a container and I'm going to put an image tag in here

855
00:43:17.500 --> 00:43:24.750
So it's just IMG and then I'm gonna do source equals images slash logo.sg

856
00:43:27.320 --> 00:43:29.909
You can see here it automatically I have um

857
00:43:30.559 --> 00:43:32.260
co-pilot running which is like an AI

858
00:43:32.878 --> 00:43:37.298
IntelliSense Uh but essentially the alt is what we're talking about earlier that

859
00:43:37.298 --> 00:43:37.639
says

860
00:43:37.639 --> 00:43:42.070
for a screen reader that this image is the ship up I can say ship up the logo

861
00:43:42.789 --> 00:43:45.800
um to be more expressive on what it is

862
00:43:46.780 --> 00:43:51.522
So if I go back to my tab we can see that logo just showed up now So now we've

863
00:43:51.522 --> 00:43:51.760
got

864
00:43:51.760 --> 00:43:53.099
our logo in the browser

865
00:43:55.958 --> 00:43:58.590
All right Um let's keep going So

866
00:43:59.280 --> 00:44:01.760
next thing is um

867
00:44:02.728 --> 00:44:06.320
Our actual like hamburger menu So

868
00:44:06.929 --> 00:44:11.159
what I kinda wanna do is create another container for this stuff

869
00:44:11.989 --> 00:44:19.705
And the reason I want to do that is because when you use Flexbox it applies the

870
00:44:19.705 --> 00:44:20.159
spacing

871
00:44:20.159 --> 00:44:25.872
and things like that to the children of of that element So I know that I'm gonna

872
00:44:25.872 --> 00:44:26.208
wanna

873
00:44:26.208 --> 00:44:31.611
make this a row and I'm probably gonna be putting the flex box on this nav So

874
00:44:31.611 --> 00:44:31.929
this

875
00:44:31.929 --> 00:44:35.458
div is gonna be a child a direct descendant of this nav

876
00:44:36.329 --> 00:44:40.537
and so will this div And I wanna I wanna be controlling the alignment of these

877
00:44:40.537 --> 00:44:40.800
things

878
00:44:41.590 --> 00:44:48.654
Um so this is gonna have this other div is going to have the um hamburger button

879
00:44:48.654 --> 00:44:49.070
So

880
00:44:49.188 --> 00:44:50.300
I'm gonna do another

881
00:44:51.478 --> 00:44:52.340
Image tag here

882
00:44:53.309 --> 00:44:54.000
And

883
00:44:55.909 --> 00:44:58.320
It's close What I wanted was hamburger

884
00:44:59.219 --> 00:45:00.019
SVD

885
00:45:02.668 --> 00:45:05.300
And the alt tag says menu that's good that's what we want

886
00:45:06.590 --> 00:45:11.727
So I saved that Great Now we've got our hamburger menu None of this stuff's

887
00:45:11.727 --> 00:45:12.070
gonna

888
00:45:12.070 --> 00:45:17.245
look good just ignore that Just just keep plugging away and ignore how it looks

889
00:45:17.245 --> 00:45:17.590
cause

890
00:45:17.590 --> 00:45:21.026
we're gonna add the styles later So really what we're gonna end up with is a big

891
00:45:21.026 --> 00:45:21.228
ugly

892
00:45:21.228 --> 00:45:26.518
mess of HTML um and then we're gonna go make it look pretty and I'm gonna walk

893
00:45:26.518 --> 00:45:26.829
you

894
00:45:26.829 --> 00:45:28.119
through how to do that stuff

895
00:45:29.958 --> 00:45:34.719
All right Um almost out of time Let's do one more thing

896
00:45:35.239 --> 00:45:36.269
and then uh

897
00:45:36.800 --> 00:45:39.478
and then we'll call it and we'll pick this up on Wednesday

898
00:45:40.489 --> 00:45:41.199
Um

899
00:45:42.219 --> 00:45:46.606
All right So the next thing I wanna do is let's uh get outside of the header for

900
00:45:46.606 --> 00:45:46.849
now

901
00:45:46.958 --> 00:45:53.063
let's start working on this next section which um typically is called this is

902
00:45:53.063 --> 00:45:53.500
called

903
00:45:53.500 --> 00:45:54.688
the hero section

904
00:45:55.340 --> 00:45:59.201
And it's kind of like where you'll see these banners and what's known as the

905
00:45:59.201 --> 00:45:59.458
call

906
00:45:59.458 --> 00:46:00.128
to action

907
00:46:00.699 --> 00:46:05.653
So this is uh kind of like where your eye goes This is the focal point of the

908
00:46:05.653 --> 00:46:05.929
website

909
00:46:06.260 --> 00:46:10.099
Um so here a call to action or people call it the CTA

910
00:46:10.610 --> 00:46:14.735
Um you'll hear that a lot when you're talking about designs and things like that

911
00:46:14.735 --> 00:46:15.010
Um

912
00:46:15.050 --> 00:46:17.639
you can see we've got like this image here this graphic logo

913
00:46:18.418 --> 00:46:22.221
We've got this text here um we've got some buttons so we're gonna work on start

914
00:46:22.221 --> 00:46:22.458
working

915
00:46:22.458 --> 00:46:25.394
on this section Um I don't think we're gonna get too far because we're almost

916
00:46:25.394 --> 00:46:25.590
out

917
00:46:25.590 --> 00:46:26.969
of time but we're gonna start on it

918
00:46:28.188 --> 00:46:31.330
So we've kind of got our header started at least the mobile header we've got

919
00:46:31.330 --> 00:46:31.539
started

920
00:46:32.559 --> 00:46:35.628
So now I'm going to start the um

921
00:46:36.168 --> 00:46:39.807
Next so you can there's also a container called a section Actually we can kind

922
00:46:39.807 --> 00:46:40.050
of

923
00:46:40.050 --> 00:46:44.455
hover over that It represents a generic section of a document or application In

924
00:46:44.455 --> 00:46:44.769
this

925
00:46:44.769 --> 00:46:49.653
context is a thematic grouping of content I like to use sections for like my big

926
00:46:49.653 --> 00:46:49.958
blocks

927
00:46:49.958 --> 00:46:54.788
on the page So you can use divs for little blocks within your sections but I

928
00:46:54.788 --> 00:46:55.090
like

929
00:46:55.090 --> 00:46:58.944
to use a section kind of like the way I used this header here It's like a big

930
00:46:58.944 --> 00:46:59.159
piece

931
00:46:59.369 --> 00:47:02.280
And I know that this is gonna be the top part of my web page

932
00:47:02.918 --> 00:47:06.612
And when I get down to this section I know like OK I'm moving to another like

933
00:47:06.612 --> 00:47:06.829
logical

934
00:47:06.829 --> 00:47:14.404
separation of the page So I've moved from this section to this section Oops this

935
00:47:14.404 --> 00:47:14.909
section

936
00:47:14.909 --> 00:47:15.228
here

937
00:47:16.739 --> 00:47:20.124
So we can actually see like this big block So that's the section we're gonna

938
00:47:20.124 --> 00:47:20.349
focus

939
00:47:20.349 --> 00:47:26.401
on the mobile first So looks I mean it's got the same components as the desktop

940
00:47:26.401 --> 00:47:26.780
so

941
00:47:26.780 --> 00:47:27.510
that's OK but

942
00:47:28.519 --> 00:47:31.719
Anyway so I'm gonna go to another section I'm gonna put a class on it

943
00:47:32.829 --> 00:47:35.239
Just so that I can get it later and we call it hero

944
00:47:37.688 --> 00:47:40.829
And I'm going to create a div here

945
00:47:44.000 --> 00:47:48.427
So when you create a tag you want to do the name of the tag I I should have gone

946
00:47:48.427 --> 00:47:48.648
over

947
00:47:48.648 --> 00:47:52.040
this but uh you probably picked it up by now You do the tag and then you do like

948
00:47:52.040 --> 00:47:52.219
a

949
00:47:52.219 --> 00:47:55.743
uh a forward slash and then the name of that tag again So this is how you kind

950
00:47:55.743 --> 00:47:55.938
of

951
00:47:55.938 --> 00:47:56.800
enclose

952
00:47:57.360 --> 00:48:01.437
content within tags Hopefully you've kind of picked that up by now Um you're

953
00:48:01.437 --> 00:48:01.728
gonna

954
00:48:01.728 --> 00:48:05.779
also want to download this image at some point but we'll kind of cross that

955
00:48:05.779 --> 00:48:06.050
bridge

956
00:48:06.050 --> 00:48:06.728
when we get to it

957
00:48:09.010 --> 00:48:13.059
Um what was all tech supposed to do It's just metadata Yeah it's for the

958
00:48:13.059 --> 00:48:13.329
accessibility

959
00:48:13.329 --> 00:48:17.154
we talked about earlier So this is so that people who are uh disabled their

960
00:48:17.154 --> 00:48:17.409
screen

961
00:48:17.409 --> 00:48:22.131
reader will read out the name of that image to them Did you need to wrap those

962
00:48:22.131 --> 00:48:22.409
image

963
00:48:22.409 --> 00:48:26.684
elements inside the div elements for what purpose So we can put the image there

964
00:48:26.684 --> 00:48:26.969
but

965
00:48:26.969 --> 00:48:31.100
the reason that um I put it in a div was because I wanted more control over how

966
00:48:31.100 --> 00:48:31.329
it's

967
00:48:31.329 --> 00:48:36.166
aligned later Technically we could put this just like this HTML is one of those

968
00:48:36.166 --> 00:48:36.489
things

969
00:48:36.489 --> 00:48:38.559
where there's there's a million ways to do it

970
00:48:39.139 --> 00:48:39.648
Um

971
00:48:40.398 --> 00:48:43.431
And they'll all work pretty much like you can see I took that div out and it

972
00:48:43.431 --> 00:48:43.610
looks

973
00:48:43.610 --> 00:48:47.863
the same So it doesn't really change anything about it but for me I like having

974
00:48:47.863 --> 00:48:48.128
the

975
00:48:48.128 --> 00:48:53.378
children in like a similar structure so it's easier to kind of reason about Um

976
00:48:53.378 --> 00:48:53.728
so

977
00:48:53.728 --> 00:48:58.012
I have these divs are gonna be my child elements of the nav so that I can kind

978
00:48:58.012 --> 00:48:58.250
of

979
00:48:58.250 --> 00:49:01.870
align them later And then those things can have whatever they want inside of

980
00:49:01.870 --> 00:49:02.128
them

981
00:49:02.128 --> 00:49:06.564
and maybe later I wanna add something else to this div and align it differently

982
00:49:06.564 --> 00:49:06.860
Um

983
00:49:06.978 --> 00:49:09.554
but yeah you could take it out for now technically and it wouldn't change

984
00:49:09.554 --> 00:49:09.739
anything

985
00:49:09.739 --> 00:49:10.418
at this point

986
00:49:12.320 --> 00:49:14.539
Yeah what Chan said it's just for container purposes

987
00:49:15.599 --> 00:49:19.115
But yeah you don't technically have to have it It would still work without the

988
00:49:19.115 --> 00:49:19.349
diff

989
00:49:20.429 --> 00:49:21.019
Um

990
00:49:22.208 --> 00:49:26.516
All right let's keep going So we've got this section also in VS code just a tip

991
00:49:26.516 --> 00:49:26.769
And

992
00:49:26.769 --> 00:49:30.798
if you come over here you'll see these carrots You can kind of collapse stuff as

993
00:49:30.798 --> 00:49:31.050
you

994
00:49:31.050 --> 00:49:32.679
go to make it easier to

995
00:49:33.208 --> 00:49:37.148
to read So I can kind of collapse this header section now since I'm focusing on

996
00:49:37.728 --> 00:49:40.409
the the hero section and we can kind of start building this up

997
00:49:41.360 --> 00:49:47.994
Um so what we have next is this text the quick and reliable warehousing So um

998
00:49:47.994 --> 00:49:48.409
what

999
00:49:48.409 --> 00:49:54.010
I can do is we haven't we're not gonna style it yet we'll style it later But um

1000
00:49:54.929 --> 00:49:59.765
like I said before you wanna use like the semantic HTML In this case this is an

1001
00:49:59.765 --> 00:50:00.050
H1

1002
00:50:00.090 --> 00:50:02.559
So we're gonna add an H1 tag here

1003
00:50:03.719 --> 00:50:07.010
And this is gonna say this is gonna be a header Um

1004
00:50:07.579 --> 00:50:08.128
so

1005
00:50:08.938 --> 00:50:12.489
quick and reliable warehouse logistics solution I'm just gonna copy that

1006
00:50:14.438 --> 00:50:17.786
I'm copying that content just pasting it right in so let's see what that looks

1007
00:50:17.786 --> 00:50:18.010
like

1008
00:50:18.829 --> 00:50:20.458
It's weird that it didn't get the capital

1009
00:50:23.570 --> 00:50:25.599
That's so weird um

1010
00:50:26.590 --> 00:50:28.219
It's a lowercase tier anyways

1011
00:50:29.148 --> 00:50:33.269
All right We've got our text there It looks like crap but um

1012
00:50:33.829 --> 00:50:38.260
this is what we want to use This is the semantic thing that we wanna use for um

1013
00:50:39.188 --> 00:50:40.840
For this header was an H1 tag

1014
00:50:42.989 --> 00:50:45.289
Underneath that is a small section of text

1015
00:50:46.409 --> 00:50:50.390
And this isn't really like a header or anything like that So this is what I

1016
00:50:50.390 --> 00:50:50.639
would

1017
00:50:50.639 --> 00:50:52.079
probably consider a P tag

1018
00:50:52.909 --> 00:50:55.360
So right under this H1

1019
00:50:56.889 --> 00:50:57.918
I'm going to add

1020
00:50:59.780 --> 00:51:00.340
Epita

1021
00:51:04.820 --> 00:51:09.340
So this is like just a paragraph of content just like some text right

1022
00:51:10.469 --> 00:51:13.168
And I'm gonna put oops I didn't get the right text

1023
00:51:16.110 --> 00:51:20.030
Alright so I copied that paragraph and I'm pasting that in here

1024
00:51:21.530 --> 00:51:23.119
So we look here we've got our header

1025
00:51:24.019 --> 00:51:27.816
And then we've got that little paragraph of text that's right under it Again it

1026
00:51:27.816 --> 00:51:28.070
doesn't

1027
00:51:28.070 --> 00:51:30.619
look good but don't be afraid we're gonna fix that later

1028
00:51:35.530 --> 00:51:38.199
All right Let me see if we got any questions

1029
00:51:39.398 --> 00:51:43.220
All right we're a little bit over here Um I know you guys have families and

1030
00:51:43.220 --> 00:51:43.458
stuff

1031
00:51:43.500 --> 00:51:46.483
so I wanna be respectful of your time I wanna give a few more minutes because I

1032
00:51:46.483 --> 00:51:46.659
I

1033
00:51:46.659 --> 00:51:49.501
know we had like the kickoff and stuff like that and I wanted to I want you guys

1034
00:51:49.501 --> 00:51:49.659
to

1035
00:51:49.659 --> 00:51:50.648
get some hands-on

1036
00:51:51.340 --> 00:51:57.068
coding time Um it wasn't a whole lot but uh it was a start We'll pick this up on

1037
00:51:57.068 --> 00:51:57.369
Wednesday

1038
00:51:57.820 --> 00:52:01.874
Um what I'd really like for you guys to do is I'm gonna put this link I actually

1039
00:52:01.874 --> 00:52:02.099
put

1040
00:52:02.099 --> 00:52:03.269
it in the Discord

1041
00:52:03.898 --> 00:52:06.090
um your family is your plants

1042
00:52:07.079 --> 00:52:08.878
Um I'm gonna put the uh

1043
00:52:09.989 --> 00:52:13.340
The um the links to Flexbox Froggy

1044
00:52:14.989 --> 00:52:16.750
And um

1045
00:52:17.688 --> 00:52:20.769
Great garden in the Discord and I really want you guys to check it out

1046
00:52:22.050 --> 00:52:23.769
Yes uh

1047
00:52:24.898 --> 00:52:28.417
So I'm gonna go into the fundamentals of web development channel and I'm gonna

1048
00:52:28.417 --> 00:52:28.668
post

1049
00:52:29.668 --> 00:52:30.728
These links

1050
00:52:31.599 --> 00:52:34.668
And I really think that this will be helpful for you guys

1051
00:52:42.219 --> 00:52:44.389
So try if you have time and do

1052
00:52:44.958 --> 00:52:48.775
these games before the next class cause I think uh a lot of what we're gonna be

1053
00:52:48.775 --> 00:52:49.000
doing

1054
00:52:49.000 --> 00:52:52.239
will make a lot more sense to you um as we go so

1055
00:52:53.889 --> 00:52:55.699
All right let's call it on that

1056
00:52:56.250 --> 00:53:01.252
Um I think this is a pretty good first class I know that the kickoff took up a

1057
00:53:01.252 --> 00:53:01.530
little

1058
00:53:01.530 --> 00:53:05.457
bit of time so I appreciate you guys bearing with us for that um just to get

1059
00:53:05.457 --> 00:53:05.688
everyone

1060
00:53:05.688 --> 00:53:10.212
acclimated but um feel free if you guys have questions additional questions so

1061
00:53:10.212 --> 00:53:10.559
far

1062
00:53:10.849 --> 00:53:15.003
drop them in the Discord I will Um answer those This is our first unofficial

1063
00:53:15.003 --> 00:53:15.280
homework

1064
00:53:15.340 --> 00:53:18.939
Yes this is unofficial homework You're not gonna be graded on it I'm not holding

1065
00:53:18.939 --> 00:53:19.179
you

1066
00:53:19.179 --> 00:53:21.476
accountable to it but I really think it'll help you a lot and it's actually kind

1067
00:53:21.476 --> 00:53:21.619
of

1068
00:53:21.619 --> 00:53:26.842
fun I'm not gonna lie I played it again uh recently cause I was uh reminiscing

1069
00:53:26.842 --> 00:53:27.168
Um

1070
00:53:27.340 --> 00:53:28.340
so I played it again

1071
00:53:28.869 --> 00:53:33.606
Uh but yeah I really think it'll help So go ahead and do that and uh we'll pick

1072
00:53:33.606 --> 00:53:33.869
this

1073
00:53:33.869 --> 00:53:37.320
up again on Wednesday where we're gonna do more of this Hopefully we'll get more

1074
00:53:37.320 --> 00:53:37.550
of

1075
00:53:37.550 --> 00:53:41.096
the design done and then I wanna introduce some JavaScript So we're gonna talk

1076
00:53:41.096 --> 00:53:41.349
about

1077
00:53:41.349 --> 00:53:46.055
JavaScript learn how to use it in the page Um we're gonna do some really basic

1078
00:53:46.055 --> 00:53:46.349
JavaScript

1079
00:53:46.349 --> 00:53:49.457
stuff and maybe even talk about some of the more advanced JavaScript stuff and

1080
00:53:49.457 --> 00:53:49.679
how

1081
00:53:49.688 --> 00:53:51.309
how to use it with our HTTML

1082
00:53:53.438 --> 00:53:56.880
All right Thanks everyone I appreciate your time um and I'll see you all on

1083
00:53:56.880 --> 00:53:57.110
Wednesday