WEBVTT

1
00:00:00.080 --> 00:00:03.680
<v Speaker 1>Imagine having like a superpower, one that lets you instantly

2
00:00:03.799 --> 00:00:06.759
<v Speaker 1>cut through all the complexity, you know, get right to

3
00:00:06.799 --> 00:00:09.720
<v Speaker 1>the heart of any topic. That's pretty much our mission today.

4
00:00:09.839 --> 00:00:13.119
<v Speaker 1>We're diving deep, really deep into the languages that build

5
00:00:13.119 --> 00:00:16.719
<v Speaker 1>the web, HTML and CSS our source material. It's this

6
00:00:17.480 --> 00:00:20.640
<v Speaker 1>really comprehensive guide for learners, and our job is to

7
00:00:20.640 --> 00:00:24.800
<v Speaker 1>basically boil it down distill it into a clear concise

8
00:00:24.960 --> 00:00:28.440
<v Speaker 1>understanding of how web pages are actually built, how they're styled,

9
00:00:28.480 --> 00:00:31.559
<v Speaker 1>how they interact. So you're getting a shortcut, really a

10
00:00:31.559 --> 00:00:34.759
<v Speaker 1>way to be genuinely well informed, packed with those you know,

11
00:00:34.920 --> 00:00:37.759
<v Speaker 1>surprising facts and practical bits that make it all click.

12
00:00:38.079 --> 00:00:41.280
<v Speaker 2>And what's really interesting is that our sources they actually

13
00:00:41.280 --> 00:00:43.920
<v Speaker 2>talk about how the brain learns best. It's fascinating stuff.

14
00:00:44.119 --> 00:00:46.560
<v Speaker 2>They tell us. Your brain is just naturally wired for novelty.

15
00:00:46.759 --> 00:00:51.640
<v Speaker 2>It actively avoids storing info with things is dull, dry, boring. Instead,

16
00:00:51.719 --> 00:00:55.479
<v Speaker 2>it prioritizes things that feel well immediately relevant, like I

17
00:00:55.479 --> 00:00:58.679
<v Speaker 2>don't know which wild animals to avoid, or is naked

18
00:00:58.759 --> 00:00:59.880
<v Speaker 2>snowboarding a bad idea?

19
00:01:00.039 --> 00:01:03.719
<v Speaker 1>Preparently exactly. Yeah. So the trick, like our sources point out,

20
00:01:03.759 --> 00:01:05.560
<v Speaker 1>is you've got to convince your brain that this new

21
00:01:05.599 --> 00:01:09.120
<v Speaker 1>stuff is really important, crucial even to your well being.

22
00:01:09.599 --> 00:01:11.680
<v Speaker 1>And that's what this deep dive is designed for, to

23
00:01:11.719 --> 00:01:17.239
<v Speaker 1>make learning HTML and CSS fuel well, engaging, memorable, and

24
00:01:17.319 --> 00:01:20.959
<v Speaker 1>you know, immediately relevant for you. Lots of practical examples,

25
00:01:21.000 --> 00:01:24.560
<v Speaker 1>clear explanations. Let's try and make this anything but dull.

26
00:01:25.040 --> 00:01:27.840
<v Speaker 2>Okay, so let's unpack this. Maybe think about it like

27
00:01:27.920 --> 00:01:31.079
<v Speaker 2>building a house HTML. That's like the frame of a house,

28
00:01:31.120 --> 00:01:34.439
<v Speaker 2>the walls, the roof, the actual floor planet defines the

29
00:01:35.120 --> 00:01:39.040
<v Speaker 2>structure and the meaning of everything inside those walls. It's

30
00:01:39.079 --> 00:01:42.200
<v Speaker 2>purely about markup, not how it looks. So like when

31
00:01:42.280 --> 00:01:44.400
<v Speaker 2>using H one tag, you're not just saying make this big,

32
00:01:44.680 --> 00:01:46.879
<v Speaker 2>You're telling the browser, hey, this is the most important

33
00:01:46.879 --> 00:01:50.959
<v Speaker 2>heading here, which is well crucial for accessibility for search engines.

34
00:01:50.719 --> 00:01:52.159
<v Speaker 1>Right for SEO and screen readers.

35
00:01:52.239 --> 00:01:55.000
<v Speaker 2>Yeah, and a P tag just clearly marks you know,

36
00:01:55.079 --> 00:01:58.799
<v Speaker 2>a paragraph. Every HTML document starts with that HML. That's

37
00:01:58.840 --> 00:02:02.439
<v Speaker 2>the route inside that got the head for metadata info

38
00:02:02.519 --> 00:02:04.120
<v Speaker 2>about the page.

39
00:02:03.840 --> 00:02:06.840
<v Speaker 1>Like the title or character encoding exactly, and then the

40
00:02:06.879 --> 00:02:09.280
<v Speaker 1>body that's where all this of you actually see goes.

41
00:02:09.680 --> 00:02:13.199
<v Speaker 1>Oh and a key practical tip from the sources, always

42
00:02:13.479 --> 00:02:16.520
<v Speaker 1>always work with plain text files for your HTML. Save

43
00:02:16.599 --> 00:02:21.080
<v Speaker 1>them with a dot HTML extension. You simple editors, text edit, notepad, whatever.

44
00:02:21.240 --> 00:02:24.919
<v Speaker 1>Just avoid that hidden fancy formatting stuff because it can

45
00:02:25.000 --> 00:02:27.719
<v Speaker 1>cause well unexpected headaches down the road.

46
00:02:27.840 --> 00:02:31.360
<v Speaker 2>And what's really fascinating here is the philosophy behind HTML.

47
00:02:31.400 --> 00:02:34.360
<v Speaker 2>It's purely about what it is, content and structure. Before

48
00:02:34.400 --> 00:02:38.159
<v Speaker 2>CSS came along, HTML was kind of awkwardly forced into

49
00:02:38.159 --> 00:02:40.919
<v Speaker 2>doing styling too, and let me tell you that was well,

50
00:02:40.960 --> 00:02:43.759
<v Speaker 2>it was a clumsy affair. Imagine trying to, I don't know,

51
00:02:43.879 --> 00:02:45.759
<v Speaker 2>paint your house using the same hammer you built the

52
00:02:45.800 --> 00:02:48.560
<v Speaker 2>frame with. It just doesn't quite work. CSS on the

53
00:02:48.560 --> 00:02:52.039
<v Speaker 2>band that's the language specifically designed for presentation, for the

54
00:02:52.120 --> 00:02:55.520
<v Speaker 2>visual display. It controls the colors, the fonts, the layouts,

55
00:02:55.719 --> 00:02:58.759
<v Speaker 2>often without you ever needing to touch the underlying EAHTML structure.

56
00:02:58.919 --> 00:03:02.120
<v Speaker 2>And that separation of concerns that's absolutely fundamental to how

57
00:03:02.120 --> 00:03:03.240
<v Speaker 2>we build websites today.

58
00:03:03.319 --> 00:03:07.560
<v Speaker 1>That separation sounds incredibly powerful, really clean. So how does

59
00:03:07.599 --> 00:03:11.960
<v Speaker 1>CSS actually, you know, work its magic. It's actually quite elegant. Really.

60
00:03:12.000 --> 00:03:14.840
<v Speaker 1>The basic syntax is pretty straightforward. You pick a selector

61
00:03:14.840 --> 00:03:18.039
<v Speaker 1>that's the HTML element you want to style, maybe a paragraph,

62
00:03:18.159 --> 00:03:21.840
<v Speaker 1>p tag. Right then Inside crearly braces, you define property

63
00:03:21.879 --> 00:03:27.039
<v Speaker 1>dot value pairs, so something like peacolor dot maroon would

64
00:03:27.159 --> 00:03:30.319
<v Speaker 1>well turn all your paragraph text maroon. Simple as that. Now,

65
00:03:30.360 --> 00:03:33.240
<v Speaker 1>you usually put CSS in separate files, but for quick

66
00:03:33.319 --> 00:03:35.759
<v Speaker 1>styling or maybe smaller projects, you can put it right

67
00:03:35.759 --> 00:03:38.879
<v Speaker 1>inside your HTML document. You use the style element for that,

68
00:03:39.080 --> 00:03:41.400
<v Speaker 1>and it always goes inside the HTML's head section.

69
00:03:41.719 --> 00:03:45.319
<v Speaker 2>Right. So HTML gives us the content it's meaningful, and

70
00:03:45.439 --> 00:03:48.639
<v Speaker 2>CSS handles the look and feel. It's like having two

71
00:03:48.680 --> 00:03:52.360
<v Speaker 2>specialized tools that just work together beautifully. Our sources even

72
00:03:52.360 --> 00:03:55.560
<v Speaker 2>have the sort of playful argument between HTML and CSS.

73
00:03:55.599 --> 00:03:58.159
<v Speaker 2>You know, HTML's like I do structure and CSS is

74
00:03:58.199 --> 00:03:59.719
<v Speaker 2>posting about its design power.

75
00:04:00.159 --> 00:04:02.919
<v Speaker 1>Yeah, I remember that bit, and they eventually agree they

76
00:04:02.960 --> 00:04:07.520
<v Speaker 1>operate in quote separate universes, which just reinforces that clean split,

77
00:04:07.919 --> 00:04:10.039
<v Speaker 1>and that makes web pages so much easier to maintain,

78
00:04:10.159 --> 00:04:12.120
<v Speaker 1>more flexible for anyone working on them later.

79
00:04:13.080 --> 00:04:16.120
<v Speaker 2>Okay, let's dig into the actual HTML building blocks, then

80
00:04:16.360 --> 00:04:20.000
<v Speaker 2>elements and attributes. So most HTML elements, they have an

81
00:04:20.000 --> 00:04:23.360
<v Speaker 2>opening tag than the content than a closing tag like

82
00:04:23.519 --> 00:04:26.240
<v Speaker 2>h one your headline here one pretty standard. Yeah, but

83
00:04:26.319 --> 00:04:29.680
<v Speaker 2>elements can also carry attributes. These give like extra information

84
00:04:29.800 --> 00:04:30.480
<v Speaker 2>about the element.

85
00:04:30.560 --> 00:04:32.639
<v Speaker 1>Yeah, like the HTRAF in a link or the SRC

86
00:04:32.800 --> 00:04:33.759
<v Speaker 1>for an image.

87
00:04:33.439 --> 00:04:37.199
<v Speaker 2>Exactly, or even style type text words. Here, type is

88
00:04:37.240 --> 00:04:39.680
<v Speaker 2>the attribute name and text criss is its value, and

89
00:04:39.720 --> 00:04:42.879
<v Speaker 2>the format is always named value. Our sources really stress

90
00:04:42.959 --> 00:04:46.000
<v Speaker 2>using double quotes around the value apparently just avoids potential

91
00:04:46.040 --> 00:04:48.759
<v Speaker 2>problems later on. Always use double quotes. And when it

92
00:04:48.800 --> 00:04:52.160
<v Speaker 2>comes to structuring your text content, HTML gives you a

93
00:04:52.240 --> 00:04:56.600
<v Speaker 2>clear hierarchy. This is important. It's more about semantic meaning

94
00:04:56.920 --> 00:05:00.560
<v Speaker 2>than just visual size. Use H one for your main

95
00:05:00.680 --> 00:05:04.279
<v Speaker 2>top level heading, then H two through eighty six for subsection,

96
00:05:04.399 --> 00:05:07.720
<v Speaker 2>sub subsections, and so on. It's a common mistake for

97
00:05:07.759 --> 00:05:10.519
<v Speaker 2>beginners to just pick a heading tag based on how

98
00:05:10.519 --> 00:05:12.959
<v Speaker 2>big it looks by default, like oh, I need smaller texts,

99
00:05:13.000 --> 00:05:14.160
<v Speaker 2>I'll use in H three, right.

100
00:05:14.240 --> 00:05:16.920
<v Speaker 1>But it's really about the outline of your content precisely.

101
00:05:17.160 --> 00:05:19.839
<v Speaker 2>It defines the structure for browsers, for search engines, for

102
00:05:19.879 --> 00:05:22.519
<v Speaker 2>screen readers, paragraphs are simple, just wrap them the P

103
00:05:22.639 --> 00:05:27.199
<v Speaker 2>tags for quotes. Htmail actually gives you two options. There's

104
00:05:27.240 --> 00:05:29.959
<v Speaker 2>the inline queue for short quotes. The browser usually adds

105
00:05:30.000 --> 00:05:33.279
<v Speaker 2>the quotation marks automatically. Oh interesting, yeah, And then there's

106
00:05:33.279 --> 00:05:36.120
<v Speaker 2>the block level block quote that's for longer passages and

107
00:05:36.160 --> 00:05:38.920
<v Speaker 2>browsers typically indent it. And then you have the bry

108
00:05:39.000 --> 00:05:41.959
<v Speaker 2>element that's a bit different. It's a void element me

109
00:05:41.959 --> 00:05:44.800
<v Speaker 2>meaning has no content and no closing tag. It just

110
00:05:44.800 --> 00:05:45.759
<v Speaker 2>inserts a line break.

111
00:05:46.040 --> 00:05:49.040
<v Speaker 1>Simple list seems super useful for organizing.

112
00:05:48.639 --> 00:05:49.879
<v Speaker 2>Pross, absolutely crucial.

113
00:05:49.959 --> 00:05:53.000
<v Speaker 1>You've got ordered lists using OLL. These are numbered right,

114
00:05:53.120 --> 00:05:55.959
<v Speaker 1>so perfect for things like step by step instructions.

115
00:05:55.399 --> 00:05:58.800
<v Speaker 2>Exactly, and then unordered lists using OLL those give you

116
00:05:58.839 --> 00:06:01.800
<v Speaker 2>bullet points ideal for you know, just listing items where

117
00:06:01.800 --> 00:06:02.560
<v Speaker 2>the order doesn't matter.

118
00:06:02.639 --> 00:06:06.519
<v Speaker 1>Okay, and both types use LIE tags for the actual

119
00:06:06.600 --> 00:06:07.839
<v Speaker 1>list items inside them.

120
00:06:07.920 --> 00:06:11.600
<v Speaker 2>That's right live for list item. And interestingly all, all

121
00:06:11.920 --> 00:06:13.920
<v Speaker 2>and LIE are all block.

122
00:06:13.639 --> 00:06:16.199
<v Speaker 1>Elements, meaning they start on a new line take up

123
00:06:16.240 --> 00:06:18.079
<v Speaker 1>the full width by default yep.

124
00:06:18.120 --> 00:06:20.199
<v Speaker 2>And you can nest lists to put a whole OL

125
00:06:20.399 --> 00:06:23.720
<v Speaker 2>or LL inside and LIE element great for outlines. Are

126
00:06:23.759 --> 00:06:27.079
<v Speaker 2>more complex information structures now, the thing that actually gives

127
00:06:27.079 --> 00:06:31.600
<v Speaker 2>the Worldwide Web its name hypertext linking. Yes, the links

128
00:06:31.639 --> 00:06:34.759
<v Speaker 2>the element on a for anchor is what creates these connections,

129
00:06:35.000 --> 00:06:38.040
<v Speaker 2>and it's most important attribute is href that stands for

130
00:06:38.160 --> 00:06:41.720
<v Speaker 2>hypertext references. Basically the destination address for the link where

131
00:06:41.759 --> 00:06:44.439
<v Speaker 2>it goes makes sense a trif, and you'll mainly work

132
00:06:44.480 --> 00:06:48.759
<v Speaker 2>with two kinds of paths in that atref. First, relative paths.

133
00:06:49.000 --> 00:06:51.279
<v Speaker 2>These are for linking to other files within your own website,

134
00:06:51.279 --> 00:06:54.439
<v Speaker 2>like about dot html or maybe dot images logo dot

135
00:06:54.439 --> 00:06:57.639
<v Speaker 2>png to go up a directory. Then you have absolute paths,

136
00:06:58.000 --> 00:07:01.199
<v Speaker 2>which are full URLs. Use these to link to external

137
00:07:01.240 --> 00:07:06.399
<v Speaker 2>websites like httpwww dot example, dot com. And our sources

138
00:07:06.480 --> 00:07:09.600
<v Speaker 2>really recommend using relative paths for all your internal links.

139
00:07:09.879 --> 00:07:11.720
<v Speaker 2>It makes your site much more portable. You can move

140
00:07:11.759 --> 00:07:14.959
<v Speaker 2>the whole folder structure without breaking links, more robust, you know,

141
00:07:15.639 --> 00:07:17.560
<v Speaker 2>industrial strength HTML they call.

142
00:07:17.439 --> 00:07:20.920
<v Speaker 1>It right keeps things self contained. And what about opening links?

143
00:07:21.000 --> 00:07:22.639
<v Speaker 1>Sometimes you want them to pop up in a new

144
00:07:22.800 --> 00:07:23.680
<v Speaker 1>window or tab.

145
00:07:24.120 --> 00:07:27.120
<v Speaker 2>For that you use the target attribute setting. Target plank

146
00:07:27.439 --> 00:07:29.319
<v Speaker 2>tells the browser to open the link in a new

147
00:07:29.360 --> 00:07:32.759
<v Speaker 2>browsing context. Modern browser is usually default to opening a

148
00:07:32.800 --> 00:07:36.000
<v Speaker 2>new tab, which our sources say is generally less disorienting

149
00:07:36.040 --> 00:07:38.399
<v Speaker 2>for users than whole new window popping up.

150
00:07:38.519 --> 00:07:41.120
<v Speaker 1>Okay, but what if you have a really long page,

151
00:07:41.240 --> 00:07:43.319
<v Speaker 1>like maybe terms and conditions, and you want to link

152
00:07:43.360 --> 00:07:45.800
<v Speaker 1>down to a specific section on that same page.

153
00:07:46.120 --> 00:07:48.920
<v Speaker 2>Good question, That's where linking within a page comes in handy.

154
00:07:49.160 --> 00:07:51.879
<v Speaker 2>It uses IDs. First, you give an element, maybe a

155
00:07:51.879 --> 00:07:54.600
<v Speaker 2>heading like H two and eight attribute say H two

156
00:07:54.639 --> 00:07:57.800
<v Speaker 2>I privacy policy. That I has to be unique on

157
00:07:57.839 --> 00:07:58.920
<v Speaker 2>the entire page.

158
00:07:58.639 --> 00:08:00.319
<v Speaker 1>Like a unique name exactly.

159
00:08:00.439 --> 00:08:04.959
<v Speaker 2>Then you create your link like this href hashtag privacy policy,

160
00:08:05.399 --> 00:08:07.519
<v Speaker 2>or if you're linking from another page, it would be

161
00:08:07.959 --> 00:08:10.480
<v Speaker 2>terms dot HTML tag privacy policy.

162
00:08:10.680 --> 00:08:13.519
<v Speaker 1>Ah. So the hash symbol hashtag tells the browser to

163
00:08:13.560 --> 00:08:15.439
<v Speaker 1>look for an idea on the page, precisely.

164
00:08:15.680 --> 00:08:19.199
<v Speaker 2>Super useful for navigation menus on single page sites, or

165
00:08:19.279 --> 00:08:20.600
<v Speaker 2>just breaking up long articles.

166
00:08:20.720 --> 00:08:23.759
<v Speaker 1>Okay, switching gears a bit. Adding media images are obviously

167
00:08:23.879 --> 00:08:25.240
<v Speaker 1>huge on the web. How does that work?

168
00:08:25.439 --> 00:08:28.480
<v Speaker 2>You use the MG elements another void element like b

169
00:08:28.839 --> 00:08:32.639
<v Speaker 2>so no closing tag. Its most crucial attribute is SRC,

170
00:08:33.000 --> 00:08:36.159
<v Speaker 2>which stands for source. That's where you put the pass

171
00:08:36.200 --> 00:08:38.399
<v Speaker 2>to the image file, similar to the href in the link.

172
00:08:38.480 --> 00:08:41.799
<v Speaker 1>Okay, src points to the picture. But here's a critical point, right,

173
00:08:42.159 --> 00:08:45.360
<v Speaker 1>what happens if the image doesn't load? Maybe the file's missing,

174
00:08:45.639 --> 00:08:48.000
<v Speaker 1>or the user has images turned off, or they're using

175
00:08:48.000 --> 00:08:48.720
<v Speaker 1>a screen reader.

176
00:08:48.840 --> 00:08:52.240
<v Speaker 2>Excellent point, and that's where the alt attribute becomes absolutely vital.

177
00:08:52.360 --> 00:08:56.960
<v Speaker 2>Alt stands for alternative text. This text serves multiple purposes.

178
00:08:57.000 --> 00:09:00.960
<v Speaker 2>It's what screen readers announced to visually impaired users to describing.

179
00:09:00.480 --> 00:09:03.399
<v Speaker 1>The image aw so it's key for accessibility.

180
00:09:02.799 --> 00:09:05.639
<v Speaker 2>Absolutely essential. It's also with the browser displays if the

181
00:09:05.639 --> 00:09:08.200
<v Speaker 2>image file is broken or can't be loaded for some reason,

182
00:09:08.639 --> 00:09:11.399
<v Speaker 2>and search engines use it too to understand the image content.

183
00:09:12.360 --> 00:09:16.000
<v Speaker 2>So alt text is not just a fallback, it's crucial. Now.

184
00:09:16.039 --> 00:09:19.200
<v Speaker 2>Regarding image formats, there's usually a trade off right between

185
00:09:19.200 --> 00:09:20.759
<v Speaker 2>image quality and file size.

186
00:09:20.840 --> 00:09:23.759
<v Speaker 1>Yeah, you want it to look good, but load fast exactly.

187
00:09:24.360 --> 00:09:28.000
<v Speaker 2>Generally, JPEG is best for photographs, things with lots of colors, ingredients,

188
00:09:28.360 --> 00:09:32.600
<v Speaker 2>continuous tones. JEFF is better suited for images with flat colors,

189
00:09:32.759 --> 00:09:35.919
<v Speaker 2>like logos or line drawings. It has a limited color palette,

190
00:09:36.000 --> 00:09:39.399
<v Speaker 2>but its unique features are support for basic animation.

191
00:09:39.320 --> 00:09:41.320
<v Speaker 1>The infamous animated dose the.

192
00:09:41.320 --> 00:09:44.600
<v Speaker 2>Very same, and basic transparency. P and G is a

193
00:09:44.639 --> 00:09:48.679
<v Speaker 2>newer format generally offers better compression than GIF, especially for graphics,

194
00:09:49.000 --> 00:09:51.519
<v Speaker 2>and supports much more advanced transparency effects.

195
00:09:51.679 --> 00:09:54.120
<v Speaker 1>So better really depends on the type of image and

196
00:09:54.159 --> 00:09:57.559
<v Speaker 1>what you need balancing quality and that all important file size.

197
00:09:57.639 --> 00:10:00.240
<v Speaker 2>Now you often see width and height attributes directly on

198
00:10:00.279 --> 00:10:03.759
<v Speaker 2>the imageag People use them to resize images sometimes.

199
00:10:03.440 --> 00:10:07.320
<v Speaker 1>Yeah, seems convenient, but our sources strongly advise against using

200
00:10:07.320 --> 00:10:08.600
<v Speaker 1>them for the actual resizing.

201
00:10:08.639 --> 00:10:11.840
<v Speaker 2>Why is that it's a performance killer because even if

202
00:10:11.879 --> 00:10:15.279
<v Speaker 2>you tell the browser okay, display this two thousand pixel

203
00:10:15.320 --> 00:10:18.600
<v Speaker 2>wide image as only two hundred pixels wide using with

204
00:10:18.720 --> 00:10:21.679
<v Speaker 2>two hundred, the drowser still has to download the entire

205
00:10:22.120 --> 00:10:25.600
<v Speaker 2>massive two thousand pixel image file first ouch.

206
00:10:25.639 --> 00:10:28.360
<v Speaker 1>So it doesn't save any data transfer time, not a bit.

207
00:10:28.639 --> 00:10:30.639
<v Speaker 2>It just downloads the big file and then scales it

208
00:10:30.679 --> 00:10:33.840
<v Speaker 2>down visually. This wastes bandwidth and makes the page load

209
00:10:33.919 --> 00:10:37.720
<v Speaker 2>much slower. The crucial insight here at the professional approach

210
00:10:38.080 --> 00:10:41.840
<v Speaker 2>is actually resize your images in a photo editor, Photoshop, Gimp,

211
00:10:41.879 --> 00:10:44.919
<v Speaker 2>whatever before you upload them. Use features like safer Web

212
00:10:45.039 --> 00:10:48.399
<v Speaker 2>or export as to optimize the image dimensions and compression

213
00:10:48.440 --> 00:10:48.879
<v Speaker 2>for the web.

214
00:10:49.000 --> 00:10:51.159
<v Speaker 1>Ah, So prepare the image properly.

215
00:10:50.759 --> 00:10:54.559
<v Speaker 2>First, exactly. This optimizes the actual file size, making your

216
00:10:54.559 --> 00:10:57.799
<v Speaker 2>pages load way faster. It's especially critical for users on

217
00:10:57.840 --> 00:11:00.960
<v Speaker 2>mobile devices or slower connections. It's a huge factor in

218
00:11:01.000 --> 00:11:02.120
<v Speaker 2>how fast your site feels.

219
00:11:02.320 --> 00:11:05.759
<v Speaker 1>Okay, now this next part, it sounds really fundamental to

220
00:11:05.799 --> 00:11:10.879
<v Speaker 1>controlling layout and CSS. The box model. The idea is

221
00:11:10.919 --> 00:11:14.159
<v Speaker 1>that every element on your page isn't just text or

222
00:11:14.200 --> 00:11:17.279
<v Speaker 1>an image, it's actually treated as a box. Is that right?

223
00:11:17.480 --> 00:11:20.600
<v Speaker 2>That's absolutely right. Understanding the box model is like your

224
00:11:20.600 --> 00:11:24.720
<v Speaker 2>CSS superpower for precise design and layout. It unlocks everything.

225
00:11:24.879 --> 00:11:27.320
<v Speaker 1>Okay, break it down for me. What makes up this box? All?

226
00:11:27.399 --> 00:11:29.399
<v Speaker 2>Right? So at the core you have the content area.

227
00:11:29.399 --> 00:11:32.200
<v Speaker 2>That's where your actual text or image lives. Simple enough,

228
00:11:32.840 --> 00:11:36.559
<v Speaker 2>around that content area, you can have optional padding. Padding

229
00:11:36.639 --> 00:11:40.720
<v Speaker 2>is space inside the box between the content and the border. Importantly,

230
00:11:40.759 --> 00:11:44.600
<v Speaker 2>the element's background color or background image extends into this

231
00:11:44.679 --> 00:11:45.360
<v Speaker 2>padding area.

232
00:11:45.600 --> 00:11:47.399
<v Speaker 1>Okay, padding is inside space.

233
00:11:47.639 --> 00:11:50.039
<v Speaker 2>Then surrounding the padding, you can have an optional border,

234
00:11:50.279 --> 00:11:52.440
<v Speaker 2>you know, line around the element, got it. And finally,

235
00:11:52.519 --> 00:11:55.320
<v Speaker 2>outside the border, you can have optional margins. Margins are

236
00:11:55.399 --> 00:11:59.000
<v Speaker 2>space outside the box, creating separation between this element and

237
00:11:59.039 --> 00:11:59.919
<v Speaker 2>other elements around it.

238
00:12:00.159 --> 00:12:00.240
<v Speaker 1>Ye.

239
00:12:00.639 --> 00:12:04.399
<v Speaker 2>Crucially, the element's background does not extend into the margins.

240
00:12:04.600 --> 00:12:06.039
<v Speaker 2>Margins are always.

241
00:12:05.679 --> 00:12:10.519
<v Speaker 1>Transparent content padding, border, margin inside to outside.

242
00:12:10.159 --> 00:12:13.559
<v Speaker 2>Okay, exactly, and mastering this understanding how these parts interact.

243
00:12:13.559 --> 00:12:18.200
<v Speaker 2>That's the foundation for controlling element placement, debugging layout weirdness,

244
00:12:18.759 --> 00:12:21.600
<v Speaker 2>and just creating sophisticated designs that go way beyond the

245
00:12:21.639 --> 00:12:23.360
<v Speaker 2>browser's default stacking.

246
00:12:22.960 --> 00:12:26.399
<v Speaker 1>Of elements, and you control all these with CSS properties.

247
00:12:26.000 --> 00:12:29.960
<v Speaker 2>YEP, properties like paddings twenty px or margin ten p

248
00:12:30.120 --> 00:12:32.639
<v Speaker 2>by twenty px it would be ten pixels top, bottom,

249
00:12:32.720 --> 00:12:37.240
<v Speaker 2>twenty pixels left right, or border one px solid black. Oh,

250
00:12:37.320 --> 00:12:40.840
<v Speaker 2>and one little quirk to be aware of is margin collapsing. Sometimes,

251
00:12:40.879 --> 00:12:43.840
<v Speaker 2>when you have two block elements stacked vertically, their adjacent

252
00:12:43.879 --> 00:12:46.559
<v Speaker 2>top and bottom margins can collapse into a single margin,

253
00:12:46.840 --> 00:12:48.679
<v Speaker 2>usually the size of the larger of the two. It

254
00:12:48.720 --> 00:12:50.600
<v Speaker 2>can catch new developers by surprise.

255
00:12:50.320 --> 00:12:53.639
<v Speaker 1>Sometimes get to know so it's not always strictly additive. Okay,

256
00:12:53.879 --> 00:12:56.600
<v Speaker 1>Digging deeper into CSS, how do styles actually get applied

257
00:12:56.960 --> 00:12:59.759
<v Speaker 1>and what happens if there are conflicts I hear about inheritance.

258
00:13:00.679 --> 00:13:05.039
<v Speaker 2>Inheritance is a key concept. Some CSS properties like font family,

259
00:13:05.080 --> 00:13:09.759
<v Speaker 2>font size, or color naturally cascade down or are inherited

260
00:13:09.759 --> 00:13:12.639
<v Speaker 2>by child elements from their parent element. So if you

261
00:13:12.679 --> 00:13:15.360
<v Speaker 2>set a font on the body tag, most text elements

262
00:13:15.360 --> 00:13:18.440
<v Speaker 2>inside the body will inherit that font unless you specifically

263
00:13:18.440 --> 00:13:21.320
<v Speaker 2>override it. Saves you a lot of repetitive typing.

264
00:13:21.279 --> 00:13:25.559
<v Speaker 1>Makes sense, and then there's the difference between classes and IDs, Yes.

265
00:13:25.519 --> 00:13:29.240
<v Speaker 2>Very important distinction. Both are ways to select elements for styling,

266
00:13:29.480 --> 00:13:32.799
<v Speaker 2>but they have different purposes. Classes are defined in CSS

267
00:13:32.799 --> 00:13:35.440
<v Speaker 2>with a period like dot highlight. You apply them in

268
00:13:35.559 --> 00:13:38.759
<v Speaker 2>HTML using the class attribute like p class highlight. The

269
00:13:38.840 --> 00:13:41.320
<v Speaker 2>key thing about classes is they are reusable. You can

270
00:13:41.360 --> 00:13:43.879
<v Speaker 2>apply the same class to many different elements, even different

271
00:13:43.919 --> 00:13:46.399
<v Speaker 2>types of elements like paragraphs and list items, to give

272
00:13:46.440 --> 00:13:47.279
<v Speaker 2>them all the same style.

273
00:13:47.320 --> 00:13:50.120
<v Speaker 1>They're for grouping, okay, classes for groups. What about IDs?

274
00:13:50.320 --> 00:13:53.240
<v Speaker 2>IDs are defined with a hash symbol like hashtag main logo.

275
00:13:53.519 --> 00:13:56.840
<v Speaker 2>You apply them with the eyed attribute mmng main logo.

276
00:13:57.320 --> 00:13:59.399
<v Speaker 2>The crucial rule for IDs is that they must be

277
00:13:59.480 --> 00:14:02.240
<v Speaker 2>unique on it page. An ID should only ever be

278
00:14:02.360 --> 00:14:03.720
<v Speaker 2>used on one single element.

279
00:14:03.960 --> 00:14:07.559
<v Speaker 1>Ah like a unique identifier, a specific label for one

280
00:14:07.600 --> 00:14:08.480
<v Speaker 1>thing exactly.

281
00:14:08.639 --> 00:14:10.279
<v Speaker 2>Think of it like a social security number for an

282
00:14:10.279 --> 00:14:14.200
<v Speaker 2>element unique. Because they're unique, they're often used for JavaScript

283
00:14:14.200 --> 00:14:16.240
<v Speaker 2>hooks or for those internal page lengths we.

284
00:14:16.159 --> 00:14:20.039
<v Speaker 1>Talked about earlier, and this uniqueness plays into how browsers

285
00:14:20.080 --> 00:14:23.799
<v Speaker 1>decide which style rule wins if there are conflicts. Right,

286
00:14:24.120 --> 00:14:25.679
<v Speaker 1>this specificity thing.

287
00:14:25.600 --> 00:14:30.080
<v Speaker 2>Precisely specificity is basically the browser's scoring system for CSS rules.

288
00:14:30.799 --> 00:14:34.159
<v Speaker 2>When multiple rules target the same element and property, the

289
00:14:34.240 --> 00:14:37.679
<v Speaker 2>rule with the higher specificity wins the general hierarchy. The

290
00:14:37.759 --> 00:14:40.960
<v Speaker 2>rule of thumb is an ID selector worth say, one

291
00:14:41.039 --> 00:14:44.159
<v Speaker 2>hundred points, is more specific than a class selector worth

292
00:14:44.360 --> 00:14:46.759
<v Speaker 2>maybe ten points, which is more specific than an element

293
00:14:46.799 --> 00:14:49.720
<v Speaker 2>selector like just P worth one point. In line styles,

294
00:14:49.799 --> 00:14:53.000
<v Speaker 2>styles directly in the HTML style attribute are even more

295
00:14:53.000 --> 00:14:54.960
<v Speaker 2>specific but generally discouraged.

296
00:14:55.120 --> 00:14:58.120
<v Speaker 1>So ID beats class beats element pretty much.

297
00:14:58.159 --> 00:15:01.480
<v Speaker 2>And if two rules have the exact same specificity, then

298
00:15:01.559 --> 00:15:03.759
<v Speaker 2>the one that appears last in the CSS file winds

299
00:15:04.039 --> 00:15:05.120
<v Speaker 2>order matters in a tie.

300
00:15:05.200 --> 00:15:07.559
<v Speaker 1>Okay, And this all fits into the overall cascade.

301
00:15:07.799 --> 00:15:10.759
<v Speaker 2>Yep. The cascade is the whole process. It considers the

302
00:15:10.799 --> 00:15:14.600
<v Speaker 2>origin of the styles, browser defaults, user styles set in

303
00:15:14.639 --> 00:15:19.120
<v Speaker 2>the browser, author styles from you, the specificity of the selectors,

304
00:15:19.399 --> 00:15:21.360
<v Speaker 2>and the order of the rules to determine the final

305
00:15:21.399 --> 00:15:25.000
<v Speaker 2>value for every property on every element. Your author styles

306
00:15:25.039 --> 00:15:27.919
<v Speaker 2>generally override browser defaults and user styles, which is usually

307
00:15:27.960 --> 00:15:28.440
<v Speaker 2>what you want.

308
00:15:28.759 --> 00:15:32.200
<v Speaker 1>Got it? And what about styling things based on user

309
00:15:32.200 --> 00:15:35.960
<v Speaker 1>interaction like links changing color when you hover over them.

310
00:15:36.080 --> 00:15:39.519
<v Speaker 2>Ah, that's where pseudo classes come in. They are keywords

311
00:15:39.559 --> 00:15:42.600
<v Speaker 2>added to selectors that specify a special state of the

312
00:15:42.639 --> 00:15:45.919
<v Speaker 2>selected element. The link pseudo classes are the most common.

313
00:15:46.480 --> 00:15:49.600
<v Speaker 2>A dot link styles on visited links, about visited styles

314
00:15:49.600 --> 00:15:51.960
<v Speaker 2>links you've already clicked on okay, then amede dot hover

315
00:15:52.000 --> 00:15:54.720
<v Speaker 2>applies styles when the mouse pointer is hovering over the link,

316
00:15:55.000 --> 00:15:57.000
<v Speaker 2>and aight ot active applies when the link is actually

317
00:15:57.000 --> 00:15:57.799
<v Speaker 2>being clicked.

318
00:15:57.519 --> 00:15:59.600
<v Speaker 1>So you can make links change color or get underlined

319
00:15:59.600 --> 00:16:00.919
<v Speaker 1>on hover exactly.

320
00:16:00.960 --> 00:16:04.440
<v Speaker 2>It provides essential visual feedback to the user. There are

321
00:16:04.440 --> 00:16:06.840
<v Speaker 2>other pseudo classes too, for things like the first child

322
00:16:06.919 --> 00:16:12.000
<v Speaker 2>element first child or form input states focus checked. But

323
00:16:12.080 --> 00:16:14.960
<v Speaker 2>the link ones are fundamental for interactivity. They let use

324
00:16:14.960 --> 00:16:17.639
<v Speaker 2>style states without needing extra HTML classes.

325
00:16:17.879 --> 00:16:20.799
<v Speaker 1>Right, let's talk layout strategies. How things are actually positioned

326
00:16:20.840 --> 00:16:22.759
<v Speaker 1>on the page. What's the default behavior?

327
00:16:23.159 --> 00:16:26.159
<v Speaker 2>The default is called normal flow. It's how the browser

328
00:16:26.240 --> 00:16:29.120
<v Speaker 2>lays things out if you don't apply any specific positioning rules.

329
00:16:29.879 --> 00:16:34.320
<v Speaker 2>Block level elements like heading's H one, paragraphs, p lists,

330
00:16:34.679 --> 00:16:38.480
<v Speaker 2>mule and divs. They naturally stack vertically one after the other,

331
00:16:38.639 --> 00:16:40.960
<v Speaker 2>top to bottom. Each one starts on a new line

332
00:16:40.960 --> 00:16:43.440
<v Speaker 2>and typically tries to take up the full available with okay,

333
00:16:43.519 --> 00:16:45.559
<v Speaker 2>block is top to bottom, and then you have inline

334
00:16:45.600 --> 00:16:50.879
<v Speaker 2>level elements like links, a emphasis, strong importance, strong images, MU,

335
00:16:50.960 --> 00:16:54.159
<v Speaker 2>and spans. These flow horizontally left to right within the

336
00:16:54.200 --> 00:16:57.679
<v Speaker 2>available space inside their parent block element. If they run

337
00:16:57.720 --> 00:16:59.879
<v Speaker 2>out of horizonal space, they wrap onto the next line.

338
00:17:00.000 --> 00:17:02.120
<v Speaker 2>They don't force line breaks before or after.

339
00:17:01.919 --> 00:17:05.000
<v Speaker 1>Themselves left to right wrapping. Got it? But what if

340
00:17:05.039 --> 00:17:08.240
<v Speaker 1>we want things side by side, like columns.

341
00:17:07.839 --> 00:17:10.680
<v Speaker 2>Right breaking out of that simple flow. For a long time,

342
00:17:10.720 --> 00:17:13.240
<v Speaker 2>the primary tool for that was floats. When you apply

343
00:17:13.359 --> 00:17:17.480
<v Speaker 2>float left or float right to an element in CSS,

344
00:17:17.680 --> 00:17:20.400
<v Speaker 2>you're essentially pulling it out of the normal flow and

345
00:17:20.440 --> 00:17:22.920
<v Speaker 2>telling it to shift as far as possible to the

346
00:17:23.000 --> 00:17:26.880
<v Speaker 2>left or right within its container. Other content, particularly inline

347
00:17:26.880 --> 00:17:30.079
<v Speaker 2>content or subsequent block elements, will then flow around the

348
00:17:30.119 --> 00:17:32.960
<v Speaker 2>floated element. This was the classic way to create multi

349
00:17:32.960 --> 00:17:35.799
<v Speaker 2>column layouts or wrap text around images.

350
00:17:35.960 --> 00:17:37.559
<v Speaker 1>Okay, so float pulls it aside.

351
00:17:37.720 --> 00:17:41.400
<v Speaker 2>Yeah, but floats come with some complexities. Floated elements generally

352
00:17:41.440 --> 00:17:44.000
<v Speaker 2>need to have a specific width set on them, otherwise

353
00:17:44.160 --> 00:17:47.039
<v Speaker 2>they might behave unpredictably, and you often need to use

354
00:17:47.039 --> 00:17:50.920
<v Speaker 2>the clear property clear dot left, clear right, or clear

355
00:17:51.440 --> 00:17:54.200
<v Speaker 2>both on elements after the floats to prevent them from

356
00:17:54.200 --> 00:17:56.680
<v Speaker 2>wrapping around When you don't want them to. It basically

357
00:17:56.759 --> 00:17:59.480
<v Speaker 2>tells an element don't start until below any floats On

358
00:17:59.519 --> 00:18:02.039
<v Speaker 2>this side, managing floats could get tricky.

359
00:18:02.279 --> 00:18:05.839
<v Speaker 1>So beyond floats, what are the common overall page layout

360
00:18:05.839 --> 00:18:06.880
<v Speaker 1>approaches people use?

361
00:18:07.200 --> 00:18:10.200
<v Speaker 2>Well, you can categorize them broadly. A fluid or elastic

362
00:18:10.279 --> 00:18:13.200
<v Speaker 2>layout is one where the main content area stretches or

363
00:18:13.279 --> 00:18:15.920
<v Speaker 2>shrinks to fit the width of the browser window. It

364
00:18:15.960 --> 00:18:19.839
<v Speaker 2>adapts good for different screen sizes, but sometimes line lengths

365
00:18:19.880 --> 00:18:21.079
<v Speaker 2>can get too long or short.

366
00:18:21.319 --> 00:18:22.440
<v Speaker 1>Okay, flu adapts.

367
00:18:22.519 --> 00:18:25.680
<v Speaker 2>Then there's a frozen or fixed with layout. Here you

368
00:18:25.759 --> 00:18:28.400
<v Speaker 2>set a specific pixel with on the main container element,

369
00:18:28.720 --> 00:18:31.319
<v Speaker 2>maybe a div like with nine hundred and sixty px.

370
00:18:32.079 --> 00:18:35.960
<v Speaker 2>The layout doesn't change with when the browser resizes. This

371
00:18:36.039 --> 00:18:39.240
<v Speaker 2>gives you precise control over line lengths and element placement

372
00:18:39.319 --> 00:18:42.000
<v Speaker 2>within that fixed area, and you can easily center a

373
00:18:42.039 --> 00:18:45.039
<v Speaker 2>fixed with layout on the page using margin zero auto.

374
00:18:45.559 --> 00:18:48.480
<v Speaker 2>That auto for left and right margins tells the browser

375
00:18:48.559 --> 00:18:49.920
<v Speaker 2>to distribute the space evenly.

376
00:18:50.079 --> 00:18:52.200
<v Speaker 1>Right. Fixed with often centered.

377
00:18:51.839 --> 00:18:54.240
<v Speaker 2>And sometimes you see a jellow layout. It's basically a

378
00:18:54.319 --> 00:18:57.079
<v Speaker 2>fixed with layout that's centered, but the background might stretch

379
00:18:57.119 --> 00:18:59.799
<v Speaker 2>to fill the browser window, so the content stays fixed,

380
00:18:59.799 --> 00:19:01.799
<v Speaker 2>but the edges adapt kind of a hybrid.

381
00:19:01.920 --> 00:19:04.759
<v Speaker 1>Interesting. And then there's the position property in CSS, which

382
00:19:04.799 --> 00:19:06.640
<v Speaker 1>sounds like it offers even more direct control.

383
00:19:06.880 --> 00:19:10.400
<v Speaker 2>Oh yeah, position is powerful. It lets you override the

384
00:19:10.400 --> 00:19:13.359
<v Speaker 2>normal flow entirely. In some cases, there are several values.

385
00:19:13.680 --> 00:19:17.599
<v Speaker 2>Static is the default. It just means the element stays

386
00:19:17.599 --> 00:19:20.200
<v Speaker 2>in the normal flow exactly where it would naturally fall.

387
00:19:20.480 --> 00:19:21.480
<v Speaker 2>Nothing special happens.

388
00:19:21.519 --> 00:19:22.960
<v Speaker 1>Okay, static is normal.

389
00:19:23.200 --> 00:19:27.319
<v Speaker 2>Relative positioning is interesting. The element is first placed in

390
00:19:27.359 --> 00:19:30.640
<v Speaker 2>the normal flow, just like static. Then you can use

391
00:19:30.680 --> 00:19:33.920
<v Speaker 2>offset properties top, bottom, left, right to nudge it from

392
00:19:33.960 --> 00:19:36.880
<v Speaker 2>that original position. The key thing about relative is that

393
00:19:36.960 --> 00:19:39.559
<v Speaker 2>leaves behind empty space where the element would have been

394
00:19:39.599 --> 00:19:43.079
<v Speaker 2>in the normal flow. Other elements don't collapse into that space.

395
00:19:43.400 --> 00:19:46.519
<v Speaker 2>It's often used as a positioning context for child elements.

396
00:19:46.599 --> 00:19:50.119
<v Speaker 1>Okay, relative offsets but leaves a gap. What about absolute?

397
00:19:50.319 --> 00:19:53.680
<v Speaker 2>Absolute positioning takes the element completely out of the normal flow.

398
00:19:54.119 --> 00:19:56.480
<v Speaker 2>It no longer affects the position of other elements, and

399
00:19:56.519 --> 00:20:00.240
<v Speaker 2>they don't affect its position. It's then positioned relative to

400
00:20:00.279 --> 00:20:04.319
<v Speaker 2>its nearest positioned ancestor, meaning an ancestor element that has

401
00:20:04.400 --> 00:20:08.440
<v Speaker 2>its position set to something other than static, like relative, absolute,

402
00:20:08.519 --> 00:20:13.000
<v Speaker 2>or fixed. If there's no positioned ancestor. It's position relative

403
00:20:13.039 --> 00:20:15.960
<v Speaker 2>to the initial containing block, which is usually the HTML

404
00:20:16.039 --> 00:20:18.240
<v Speaker 2>element essentially the page itself. Wow.

405
00:20:18.279 --> 00:20:20.880
<v Speaker 1>Okay, so it's totally removed from the flow and place

406
00:20:20.960 --> 00:20:22.200
<v Speaker 1>precisely exactly.

407
00:20:22.519 --> 00:20:25.200
<v Speaker 2>And because absolutely positioned elements are out of the flow,

408
00:20:25.400 --> 00:20:27.759
<v Speaker 2>they can overlap other elements. This is where the z

409
00:20:27.920 --> 00:20:30.400
<v Speaker 2>invex property comes in. It allows you to control the

410
00:20:30.400 --> 00:20:34.720
<v Speaker 2>stacking order of positioned elements. A higher Z index value

411
00:20:34.720 --> 00:20:38.279
<v Speaker 2>means the element appears on top or closer to the viewer.

412
00:20:38.200 --> 00:20:39.880
<v Speaker 1>Like layers and photoshop or something.

413
00:20:39.839 --> 00:20:42.519
<v Speaker 2>Kind of like that. Yeah, a long imaginary Z axis

414
00:20:42.519 --> 00:20:43.359
<v Speaker 2>coming out of the screen.

415
00:20:43.519 --> 00:20:44.720
<v Speaker 1>And what's fixed positioning.

416
00:20:45.079 --> 00:20:47.680
<v Speaker 2>Fixed is similar to absolute in that it takes the

417
00:20:47.720 --> 00:20:51.960
<v Speaker 2>element out of the normal flow, but instead of being

418
00:20:51.960 --> 00:20:56.000
<v Speaker 2>positioned relative to an ancestor or the page, its positioned

419
00:20:56.039 --> 00:20:59.039
<v Speaker 2>relative to the browser window or viewport. This means a

420
00:20:59.079 --> 00:21:01.519
<v Speaker 2>fixed position element stays in the same place on the

421
00:21:01.559 --> 00:21:05.279
<v Speaker 2>screen even when the user scrolls the page down. Perfect

422
00:21:05.279 --> 00:21:08.079
<v Speaker 2>for things like sticky navigation bars, headers, or maybe a

423
00:21:08.200 --> 00:21:09.119
<v Speaker 2>back to top button.

424
00:21:09.359 --> 00:21:11.240
<v Speaker 1>Ah okay, fixed stays put on the screen.

425
00:21:11.440 --> 00:21:14.359
<v Speaker 2>Yep. You can even use negative offsets sometimes like top

426
00:21:14.359 --> 00:21:17.400
<v Speaker 2>negative fifty px to position parts of a fixed element

427
00:21:17.440 --> 00:21:20.920
<v Speaker 2>initially off screen, maybe for an animation effect. Oh, and

428
00:21:20.960 --> 00:21:23.440
<v Speaker 2>I should mention while floats were the old way, modern

429
00:21:23.480 --> 00:21:27.079
<v Speaker 2>CSS offers much better layout tools like flexbox and CSS grid.

430
00:21:27.559 --> 00:21:31.200
<v Speaker 2>But our sources also highlighted using CSS table display properties

431
00:21:31.440 --> 00:21:34.160
<v Speaker 2>setting display dot table on a container, display table row

432
00:21:34.160 --> 00:21:36.920
<v Speaker 2>on rows with it, and display table sell on the columns.

433
00:21:37.279 --> 00:21:39.400
<v Speaker 2>That could be a very robust way to get perfectly

434
00:21:39.400 --> 00:21:42.880
<v Speaker 2>aligned multi column layouts that adapt nicely without the quirks

435
00:21:42.880 --> 00:21:43.319
<v Speaker 2>of floats.

436
00:21:43.720 --> 00:21:46.400
<v Speaker 1>So, looking at the bigger picture, the modern web HTML

437
00:21:46.440 --> 00:21:48.559
<v Speaker 1>isn't just about marking of content anymore, is it. It

438
00:21:48.599 --> 00:21:50.279
<v Speaker 1>feels like there's more emphasis on meaning.

439
00:21:50.640 --> 00:21:53.119
<v Speaker 2>Absolutely. That was a huge part of the shift with

440
00:21:53.279 --> 00:21:56.640
<v Speaker 2>HTML five. It introduced a whole set of new semantic elements.

441
00:21:57.079 --> 00:21:59.799
<v Speaker 2>Instead of using generic divtags for everything and relying on

442
00:22:00.000 --> 00:22:03.480
<v Speaker 2>glasses or IDs to explain what they were, like diffclass header,

443
00:22:04.039 --> 00:22:07.000
<v Speaker 2>HTML five gave us specific tags with built in meaning,

444
00:22:07.519 --> 00:22:12.119
<v Speaker 2>like header for introductory content or navigation navs specifically for

445
00:22:12.200 --> 00:22:15.640
<v Speaker 2>navigation links, main for the main content of the page,

446
00:22:15.880 --> 00:22:19.640
<v Speaker 2>section for thematic groupings, article for self contained pieces like

447
00:22:19.680 --> 00:22:23.640
<v Speaker 2>blog posts or news stories, a side for tangential content

448
00:22:23.720 --> 00:22:27.720
<v Speaker 2>like sidebars, and footer for well the foot or copyright info,

449
00:22:27.799 --> 00:22:31.160
<v Speaker 2>related links, etc. There's also time for marking updates and

450
00:22:31.240 --> 00:22:32.519
<v Speaker 2>times semantically.

451
00:22:32.880 --> 00:22:36.200
<v Speaker 1>So using these telled browsers, search engines, and assistive technology

452
00:22:36.240 --> 00:22:39.000
<v Speaker 1>is more about the structure and purpose of your content.

453
00:22:39.400 --> 00:22:41.640
<v Speaker 1>Just by using the right tag exactly.

454
00:22:41.279 --> 00:22:43.960
<v Speaker 2>It makes the web more understandable, more accessible, and better structured.

455
00:22:44.200 --> 00:22:47.519
<v Speaker 2>It replaces ambiguous to soup with meaningful landmarks.

456
00:22:47.119 --> 00:22:50.200
<v Speaker 1>And with all this structure, making sure it's correct seems important.

457
00:22:50.240 --> 00:22:51.559
<v Speaker 1>You mentioned validation earlier.

458
00:22:51.839 --> 00:22:56.000
<v Speaker 2>Yes, Validation is crucial for professional work. The W three

459
00:22:56.119 --> 00:23:00.880
<v Speaker 2>C Worldwide Web Consortium provides online validators, one for HTML

460
00:23:01.160 --> 00:23:04.119
<v Speaker 2>Validator dot w three dot org and one for CSS

461
00:23:04.440 --> 00:23:08.440
<v Speaker 2>Jigsaw dot W three dot org cssash Validator. You feed

462
00:23:08.480 --> 00:23:11.039
<v Speaker 2>them your code and they check it against the official standards,

463
00:23:11.079 --> 00:23:13.039
<v Speaker 2>reporting any errors or potential problems.

464
00:23:13.079 --> 00:23:15.920
<v Speaker 1>Why bother if it looks okay in my browser, because

465
00:23:15.960 --> 00:23:16.759
<v Speaker 1>looking okay.

466
00:23:16.640 --> 00:23:19.519
<v Speaker 2>In your browser doesn't guarantee it will work correctly in

467
00:23:19.599 --> 00:23:23.400
<v Speaker 2>all browsers or on different devices or with assistive technologies.

468
00:23:23.799 --> 00:23:27.400
<v Speaker 2>Validation helps insure consistency and catches syntax errors you might

469
00:23:27.440 --> 00:23:30.720
<v Speaker 2>have missed. It also helps futureproof your code, making it

470
00:23:30.759 --> 00:23:32.759
<v Speaker 2>more likely to work with future browser updates.

471
00:23:32.839 --> 00:23:34.720
<v Speaker 1>Makes sense, like proofreading your.

472
00:23:34.599 --> 00:23:37.599
<v Speaker 2>Code kind of Yeah, and the HTML five doc type

473
00:23:37.720 --> 00:23:40.319
<v Speaker 2>that simple dot doc type HTML at the very top

474
00:23:40.319 --> 00:23:43.119
<v Speaker 2>of your file makes validation easier by telling the validator

475
00:23:43.160 --> 00:23:45.559
<v Speaker 2>which standard to check against. Oh and one more crucial

476
00:23:45.599 --> 00:23:49.839
<v Speaker 2>metatag for the modern web metacharset UTF eight always include

477
00:23:49.839 --> 00:23:50.519
<v Speaker 2>that inside your head?

478
00:23:50.559 --> 00:23:51.039
<v Speaker 1>What's that for?

479
00:23:51.359 --> 00:23:54.319
<v Speaker 2>Character? In toting? UTF eight is a universal standard that

480
00:23:54.359 --> 00:23:56.839
<v Speaker 2>can represent pretty much any character from any language in

481
00:23:56.839 --> 00:24:00.720
<v Speaker 2>the world. Using this declaration ensures that special character emojis

482
00:24:00.759 --> 00:24:04.839
<v Speaker 2>different alphabets, they all display correctly for all users everywhere.

483
00:24:04.920 --> 00:24:06.759
<v Speaker 2>It avoids garbled text issues.

484
00:24:06.880 --> 00:24:10.599
<v Speaker 1>Okay, crucial metatags. Now what about multimedia? We used to

485
00:24:10.599 --> 00:24:13.359
<v Speaker 1>rely on things like flash for video and audio, which

486
00:24:13.400 --> 00:24:15.079
<v Speaker 1>is well mostly.

487
00:24:14.759 --> 00:24:19.160
<v Speaker 2>Gone now thankfully, Yes, HTML five brought native solutions the

488
00:24:19.240 --> 00:24:22.240
<v Speaker 2>video and audio elements. These allow you to embed video

489
00:24:22.279 --> 00:24:25.160
<v Speaker 2>and audio directly into your web pages without needing any

490
00:24:25.160 --> 00:24:28.200
<v Speaker 2>third party plugins. The browser handles playback itself.

491
00:24:28.279 --> 00:24:30.200
<v Speaker 1>That sounds much better. Is it straightforward?

492
00:24:30.240 --> 00:24:33.279
<v Speaker 2>Mostly? Yes? The main challenge, as our sources point out,

493
00:24:33.319 --> 00:24:35.720
<v Speaker 2>is that the world of digital video and audio formats

494
00:24:35.720 --> 00:24:38.160
<v Speaker 2>and codex is still a bit messy. There isn't one

495
00:24:38.200 --> 00:24:41.599
<v Speaker 2>single format that all browsers universally support. You've got formats

496
00:24:41.640 --> 00:24:43.839
<v Speaker 2>like MP four often using the H two sixty four

497
00:24:43.880 --> 00:24:48.119
<v Speaker 2>video codec, WebM using vpaight or VP nine, and OG

498
00:24:48.480 --> 00:24:52.279
<v Speaker 2>using Thera. Different browsers support different combinations.

499
00:24:52.039 --> 00:24:53.000
<v Speaker 1>So how do you deal with that?

500
00:24:53.200 --> 00:24:56.799
<v Speaker 2>The smart solution HTML provides is using multiple source elements

501
00:24:56.839 --> 00:25:00.599
<v Speaker 2>inside the video or audio tag. You provide media in

502
00:25:00.640 --> 00:25:04.640
<v Speaker 2>a few different formats, each with its own source src, video, dot,

503
00:25:04.759 --> 00:25:08.119
<v Speaker 2>MP four type, video, blue poor tag. The browser will

504
00:25:08.119 --> 00:25:10.119
<v Speaker 2>then look through the sources in order and play the

505
00:25:10.160 --> 00:25:11.359
<v Speaker 2>first one it understands.

506
00:25:11.839 --> 00:25:14.559
<v Speaker 1>AH fallback formats cut exactly.

507
00:25:14.960 --> 00:25:19.039
<v Speaker 2>It ensures the widest possible compatibility. Some key attributes for

508
00:25:19.079 --> 00:25:21.960
<v Speaker 2>these tags include controls, which tells the browser to show

509
00:25:22.079 --> 00:25:27.279
<v Speaker 2>default playback controls, play pause, volume, et cetera. There's also AutoPlay,

510
00:25:27.319 --> 00:25:30.720
<v Speaker 2>but use that very carefully. Autoplaying media, especially with sound,

511
00:25:30.759 --> 00:25:32.400
<v Speaker 2>can be really annoying for users.

512
00:25:32.599 --> 00:25:33.480
<v Speaker 1>Yeah, definitely.

513
00:25:33.519 --> 00:25:35.759
<v Speaker 2>The poster for the video tag lets you specify an

514
00:25:35.799 --> 00:25:38.240
<v Speaker 2>image to display before the video starts loading or playing,

515
00:25:38.359 --> 00:25:39.000
<v Speaker 2>like a thumbnail.

516
00:25:39.119 --> 00:25:42.559
<v Speaker 1>Okay, native media is sorted. What about just displaying structured

517
00:25:42.640 --> 00:25:44.960
<v Speaker 1>data like actual tables of information.

518
00:25:44.839 --> 00:25:48.039
<v Speaker 2>For truly tabular data rows and columns of related info.

519
00:25:48.720 --> 00:25:52.160
<v Speaker 2>HTML still has the table element. The key point our

520
00:25:52.200 --> 00:25:55.960
<v Speaker 2>sources make is use tables for data, not for page layout.

521
00:25:56.279 --> 00:25:58.519
<v Speaker 2>That was a common bad practice in the early Web,

522
00:25:58.799 --> 00:26:02.359
<v Speaker 2>using tables to force comp but it's terrible for accessibility

523
00:26:02.359 --> 00:26:03.160
<v Speaker 2>and flexibility.

524
00:26:03.680 --> 00:26:07.160
<v Speaker 1>Modern CSS is for layout, right, So table for actual

525
00:26:07.200 --> 00:26:09.160
<v Speaker 1>data grids. What's the structure inside?

526
00:26:09.279 --> 00:26:12.200
<v Speaker 2>It's quite logical. You have the main table element optionally

527
00:26:12.200 --> 00:26:14.599
<v Speaker 2>and caption right inside it for the tables title. Then

528
00:26:14.640 --> 00:26:17.519
<v Speaker 2>you structure the content row by row using carry table

529
00:26:17.599 --> 00:26:20.759
<v Speaker 2>row elements inside each chair. You have cells for header

530
00:26:20.799 --> 00:26:24.160
<v Speaker 2>cells like calumn titles, you use TF tableheader. For regular

531
00:26:24.240 --> 00:26:26.200
<v Speaker 2>data cells you use TF table data.

532
00:26:26.319 --> 00:26:28.839
<v Speaker 1>You are for rows TF for header's ts or data.

533
00:26:29.079 --> 00:26:32.359
<v Speaker 2>Seems clear it is, and browsers typically style of elements

534
00:26:32.400 --> 00:26:35.359
<v Speaker 2>differently by default, maybe bold and centered to make them

535
00:26:35.400 --> 00:26:35.880
<v Speaker 2>stand out.

536
00:26:36.160 --> 00:26:38.200
<v Speaker 1>And can you style these tables with CSS make them

537
00:26:38.200 --> 00:26:38.799
<v Speaker 1>look nice?

538
00:26:38.839 --> 00:26:43.400
<v Speaker 2>Absolutely? You can target table tr tstd with CSS rules

539
00:26:43.440 --> 00:26:46.400
<v Speaker 2>just like any other element. A very common and useful

540
00:26:46.400 --> 00:26:51.319
<v Speaker 2>CSS property for tables is border collapse collapse. By default,

541
00:26:51.319 --> 00:26:54.359
<v Speaker 2>table cells might have their own borders, leading to doubled lines.

542
00:26:54.440 --> 00:26:58.400
<v Speaker 2>Border collapse collapse merges them into single clean borders, which

543
00:26:58.519 --> 00:26:59.480
<v Speaker 2>usually looks much better.

544
00:26:59.599 --> 00:26:59.799
<v Speaker 1>Nah.

545
00:27:00.400 --> 00:27:02.960
<v Speaker 2>You can also control padding inside cells, padding on through

546
00:27:03.000 --> 00:27:07.039
<v Speaker 2>the CD set background colors, line text, text align, control

547
00:27:07.039 --> 00:27:10.200
<v Speaker 2>border styles and so on. And for more complex tables

548
00:27:10.240 --> 00:27:12.759
<v Speaker 2>where a single cell needs to span across multiple columns

549
00:27:12.799 --> 00:27:16.160
<v Speaker 2>or multiple rows, htmail provides the coal span and rosepan

550
00:27:16.240 --> 00:27:20.519
<v Speaker 2>attributes for through TD elements like coal span two makes

551
00:27:20.559 --> 00:27:22.240
<v Speaker 2>a cell take up the width of two columns.

552
00:27:22.519 --> 00:27:25.920
<v Speaker 1>Okay, tables for data styled with CSS. Finally, let's talk

553
00:27:25.920 --> 00:27:29.079
<v Speaker 1>about interaction. How do users send information back to the website?

554
00:27:29.240 --> 00:27:32.400
<v Speaker 2>Forms right exactly forms of the bridge. They allow users

555
00:27:32.400 --> 00:27:35.519
<v Speaker 2>to input data, texts, selections, choices and submit It. Usually

556
00:27:35.559 --> 00:27:38.880
<v Speaker 2>do a server for processing. Think log informs, search boxes,

557
00:27:38.920 --> 00:27:41.240
<v Speaker 2>contact forms, check out processes.

558
00:27:40.799 --> 00:27:42.440
<v Speaker 1>The workhourses of the interactive web.

559
00:27:42.720 --> 00:27:45.440
<v Speaker 2>Pretty much the whole thing is wrapped in a form element.

560
00:27:46.200 --> 00:27:50.880
<v Speaker 2>This element has two really important attributes, action and method.

561
00:27:51.640 --> 00:27:54.839
<v Speaker 2>The action attribute specifies the URL of the server side

562
00:27:54.920 --> 00:27:58.279
<v Speaker 2>script or endpoint that will receive and process the form

563
00:27:58.359 --> 00:27:59.039
<v Speaker 2>data when.

564
00:27:58.839 --> 00:28:02.319
<v Speaker 1>It's submitted okay, where the data goes. And method the.

565
00:28:02.279 --> 00:28:05.039
<v Speaker 2>Method attribute tells the browser how to send the data.

566
00:28:05.079 --> 00:28:09.480
<v Speaker 2>There are two main methods, GIT and post. This choice

567
00:28:09.519 --> 00:28:10.559
<v Speaker 2>is actually quite important.

568
00:28:10.599 --> 00:28:11.720
<v Speaker 1>Why too? What's the difference?

569
00:28:11.960 --> 00:28:14.680
<v Speaker 2>It comes down to visibility and purpose really. With the

570
00:28:14.720 --> 00:28:17.519
<v Speaker 2>GT method, the browser takes all the form data, the

571
00:28:17.599 --> 00:28:20.119
<v Speaker 2>names and values of the inputs, and pins it directly

572
00:28:20.160 --> 00:28:23.680
<v Speaker 2>to the URL specified in the action attribute, usually after

573
00:28:23.720 --> 00:28:24.519
<v Speaker 2>a question mark.

574
00:28:24.400 --> 00:28:26.039
<v Speaker 1>Ben, so you can see the data right there in

575
00:28:26.039 --> 00:28:26.680
<v Speaker 1>the address bar.

576
00:28:26.799 --> 00:28:30.400
<v Speaker 2>Yep, it's visible. This makes get suitable for things like

577
00:28:30.480 --> 00:28:33.039
<v Speaker 2>search queries or requests that don't change data on the

578
00:28:33.079 --> 00:28:36.880
<v Speaker 2>server and could potentially be bookmarked or shared easily. The

579
00:28:36.920 --> 00:28:41.319
<v Speaker 2>browser's just getting a resource possible modified by the query parameters.

580
00:28:40.799 --> 00:28:42.119
<v Speaker 1>Okay and post.

581
00:28:42.599 --> 00:28:45.599
<v Speaker 2>With post, the form data is sent in the body

582
00:28:45.640 --> 00:28:48.759
<v Speaker 2>of the HTDP request, not in the URL, so it's

583
00:28:48.799 --> 00:28:51.960
<v Speaker 2>not visible in the address bar. PST is used when

584
00:28:51.960 --> 00:28:54.359
<v Speaker 2>you're submitting data that should change something on the server,

585
00:28:54.960 --> 00:28:58.599
<v Speaker 2>like creating a user count, submitting a comment, placing an order,

586
00:28:59.039 --> 00:29:01.519
<v Speaker 2>or when you're sending sense of information like passwords or

587
00:29:01.640 --> 00:29:04.440
<v Speaker 2>large amounts of data. You're posting a package of data

588
00:29:04.440 --> 00:29:04.880
<v Speaker 2>to the server.

589
00:29:05.160 --> 00:29:10.519
<v Speaker 1>Got it? Get T for visible simple requests, post for hidden,

590
00:29:10.799 --> 00:29:14.480
<v Speaker 1>sensitive or data changing submissions. What about the actual input

591
00:29:14.480 --> 00:29:15.720
<v Speaker 1>fields inside the form?

592
00:29:15.839 --> 00:29:18.440
<v Speaker 2>Most form controls use the input element but you change

593
00:29:18.480 --> 00:29:21.000
<v Speaker 2>its behavior using the type attribute. There are many types.

594
00:29:21.200 --> 00:29:23.880
<v Speaker 2>Type text gives you a standard single line textbox. Type

595
00:29:23.880 --> 00:29:27.599
<v Speaker 2>password is similar, but masks the input. Type submit creates

596
00:29:27.599 --> 00:29:29.160
<v Speaker 2>the button that actually submits the form.

597
00:29:29.279 --> 00:29:30.440
<v Speaker 1>Okay, basic inputs.

598
00:29:30.720 --> 00:29:34.359
<v Speaker 2>Then you have selection types. Type radio creates radio buttons

599
00:29:34.640 --> 00:29:37.079
<v Speaker 2>to make them mutually exclusive, so you can only pick

600
00:29:37.079 --> 00:29:39.319
<v Speaker 2>one in a group. You give all radio buttons in

601
00:29:39.359 --> 00:29:43.880
<v Speaker 2>that group the same name attribute. Type checkbox creates checkboxes,

602
00:29:44.119 --> 00:29:48.319
<v Speaker 2>allowing users to select zero, one, or multiple options. If

603
00:29:48.359 --> 00:29:51.200
<v Speaker 2>you want to easily collect multiple checkbox values on the server,

604
00:29:51.519 --> 00:29:53.960
<v Speaker 2>it's common practice to use square brackets in the name,

605
00:29:54.559 --> 00:29:58.599
<v Speaker 2>like name interests, radio for one of many, checkbox for

606
00:29:59.000 --> 00:30:03.119
<v Speaker 2>potentially many. Exactly and HTML five added a bunch of

607
00:30:03.119 --> 00:30:06.519
<v Speaker 2>great new input types that often trigger enhance UI elements

608
00:30:06.599 --> 00:30:10.240
<v Speaker 2>or validation in browsers, like type number for numeric input,

609
00:30:10.319 --> 00:30:13.519
<v Speaker 2>often with spinner controls, type range for sliders, type color

610
00:30:13.559 --> 00:30:16.640
<v Speaker 2>for color picker widget, type date for a calendar date picker.

611
00:30:16.759 --> 00:30:19.119
<v Speaker 1>Wow, those sounds really useful built in widgets.

612
00:30:19.240 --> 00:30:22.400
<v Speaker 2>They are also type email type earle type tel. These

613
00:30:22.400 --> 00:30:25.119
<v Speaker 2>don't just validate the formats slightly, but importantly they often

614
00:30:25.119 --> 00:30:28.680
<v Speaker 2>trigger optimized keyboards on mobile devices, making it much easier

615
00:30:28.680 --> 00:30:30.880
<v Speaker 2>for users to type an email address or phone number.

616
00:30:30.920 --> 00:30:34.200
<v Speaker 1>That's a big usability When what about multiline text input

617
00:30:34.519 --> 00:30:35.319
<v Speaker 1>like for comments.

618
00:30:35.640 --> 00:30:38.880
<v Speaker 2>For that, you don't use input, use the textteria element.

619
00:30:39.200 --> 00:30:42.400
<v Speaker 2>It creates a larger resizable box for multiple lines of text.

620
00:30:42.920 --> 00:30:46.440
<v Speaker 2>Text stere eros four coals initial text here.

621
00:30:46.359 --> 00:30:48.359
<v Speaker 1>A text area okay and drop down menus.

622
00:30:48.440 --> 00:30:51.119
<v Speaker 2>Dropdowns are created using a select element, which acts as

623
00:30:51.119 --> 00:30:54.119
<v Speaker 2>the container. Inside the select you put multiple option elements,

624
00:30:54.119 --> 00:30:56.240
<v Speaker 2>one for each choice in the list. The text between

625
00:30:56.240 --> 00:30:58.960
<v Speaker 2>the option tags is what the user sees. You can

626
00:30:59.000 --> 00:31:02.839
<v Speaker 2>set one as selected by default select name, country, option

627
00:31:03.000 --> 00:31:05.960
<v Speaker 2>value ojass's United States option dot select.

628
00:31:06.279 --> 00:31:09.000
<v Speaker 1>Lots of options for input. What about making forms easier

629
00:31:09.000 --> 00:31:11.880
<v Speaker 1>to use, especially for accessibility crucial point.

630
00:31:12.119 --> 00:31:15.640
<v Speaker 2>The single most important element for form accessibility and usability

631
00:31:15.720 --> 00:31:19.599
<v Speaker 2>is the label. Every form, input, input, text areas select

632
00:31:19.759 --> 00:31:23.039
<v Speaker 2>should have an associated label element. The label text describes

633
00:31:23.119 --> 00:31:24.519
<v Speaker 2>the purpose of the input field.

634
00:31:24.519 --> 00:31:25.319
<v Speaker 1>How do you connect them?

635
00:31:25.519 --> 00:31:28.599
<v Speaker 2>You give the input element a unique EAD attribute like ID,

636
00:31:28.720 --> 00:31:31.839
<v Speaker 2>user email, Then in a label element you use the

637
00:31:31.880 --> 00:31:35.680
<v Speaker 2>four attribute with the same value label for user email,

638
00:31:35.799 --> 00:31:39.400
<v Speaker 2>email address, dot label. This creates an explicit link for

639
00:31:39.480 --> 00:31:42.119
<v Speaker 2>screen reader users. It means when they focus on the input,

640
00:31:42.400 --> 00:31:45.359
<v Speaker 2>the label text is read out, and for all users

641
00:31:45.440 --> 00:31:48.359
<v Speaker 2>it makes the label text itself clickable. Clicking the label

642
00:31:48.359 --> 00:31:51.599
<v Speaker 2>will focus the associated input field, which is especially helpful

643
00:31:51.640 --> 00:31:54.240
<v Speaker 2>for small targets like radio buttons or checkboxes.

644
00:31:54.400 --> 00:31:57.640
<v Speaker 1>Ah so label with four is essential.

645
00:31:57.400 --> 00:32:00.960
<v Speaker 2>Absolutely essential, and remember those eided value is used for

646
00:32:01.079 --> 00:32:04.640
<v Speaker 2>attributes must be unique on the page. Another useful pattern

647
00:32:04.680 --> 00:32:08.480
<v Speaker 2>for grouping related form controls is using field set and legend.

648
00:32:08.839 --> 00:32:11.559
<v Speaker 2>You wrap a group of related inputs like address fields

649
00:32:11.680 --> 00:32:13.920
<v Speaker 2>in a field set, and the first element inside can

650
00:32:13.960 --> 00:32:15.960
<v Speaker 2>be a legend, which acts like a title for that group.

651
00:32:16.200 --> 00:32:19.599
<v Speaker 2>It provides visual grouping and semantic structure for assist of technologies.

652
00:32:19.839 --> 00:32:22.519
<v Speaker 1>Okay, wow, we've covered a lot of ground there, from

653
00:32:22.519 --> 00:32:26.079
<v Speaker 1>the absolute basics of HTML structure and CSS styling right

654
00:32:26.079 --> 00:32:30.240
<v Speaker 1>through to modern HTML five semantics, media tables and interactive forms.

655
00:32:30.599 --> 00:32:33.559
<v Speaker 1>You've really taken a deep dive into the very fabric

656
00:32:33.559 --> 00:32:37.519
<v Speaker 1>of the Internet. How HTML gives structure, CSS provides style,

657
00:32:37.960 --> 00:32:41.799
<v Speaker 1>and how users can interact the box model, specificity layout,

658
00:32:41.839 --> 00:32:45.240
<v Speaker 1>semantic tags. It's all in there. You genuinely have a

659
00:32:45.240 --> 00:32:48.440
<v Speaker 1>shortcut now to being really well informed about these absolute

660
00:32:48.519 --> 00:32:49.599
<v Speaker 1>cornerstones of the web.

661
00:32:50.440 --> 00:32:52.920
<v Speaker 2>And it's important to remember the web isn't some static

662
00:32:52.960 --> 00:32:56.519
<v Speaker 2>blueprint frozen in time. Our sources called it a living standard.

663
00:32:56.559 --> 00:33:00.440
<v Speaker 2>It's constantly evolving, adapting, growing, So knowing these core languages

664
00:33:00.599 --> 00:33:03.680
<v Speaker 2>HTML and CSS, it's not just about building simple static

665
00:33:03.720 --> 00:33:06.319
<v Speaker 2>web pages anymore, though it is the foundation for that.

666
00:33:06.400 --> 00:33:09.880
<v Speaker 2>It's really about understanding the fundamental principles that power everything else.

667
00:33:09.960 --> 00:33:13.400
<v Speaker 2>The dynamic web applications, the smooth animations, all the rich

668
00:33:13.480 --> 00:33:16.599
<v Speaker 2>interactive experiences we just expect online these days, they all

669
00:33:16.640 --> 00:33:17.680
<v Speaker 2>build on this foundation.

670
00:33:17.920 --> 00:33:20.880
<v Speaker 1>That's a great point. It's the bedrock. So as you

671
00:33:20.960 --> 00:33:24.319
<v Speaker 1>reflect on this journey we've taken through HTML and CSS,

672
00:33:24.400 --> 00:33:27.160
<v Speaker 1>here's maybe a final thought to chew on. Given how

673
00:33:27.160 --> 00:33:31.119
<v Speaker 1>the web keeps expanding into virtual reality, augmented reality, smart devices,

674
00:33:31.160 --> 00:33:34.559
<v Speaker 1>you name it, how might these core principles of structuring

675
00:33:34.599 --> 00:33:39.160
<v Speaker 1>information HTML and presenting information CSS be applied in totally new,

676
00:33:39.279 --> 00:33:42.759
<v Speaker 1>maybe unexpected ways beyond just traditional web pages in the future.

677
00:33:43.160 --> 00:33:46.279
<v Speaker 1>Where else could structure and style make a difference. The possibilities,

678
00:33:46.279 --> 00:33:48.559
<v Speaker 1>when you think about it, seem pretty much endless.