WEBVTT

1
00:00:00.200 --> 00:00:02.720
<v Speaker 1>Right now, Like, as you listen to this, you are

2
00:00:02.759 --> 00:00:08.919
<v Speaker 1>completely surrounded by this, this invisible global architecture of plain text.

3
00:00:09.039 --> 00:00:11.119
<v Speaker 2>Oh absolutely, it's everywhere.

4
00:00:10.720 --> 00:00:13.119
<v Speaker 1>Right the entire digital world. I mean, the apps you

5
00:00:13.199 --> 00:00:16.480
<v Speaker 1>used to manage your life, your bank accounts, the streaming platforms,

6
00:00:16.519 --> 00:00:20.760
<v Speaker 1>it is all entirely held together by just brackets, slashes,

7
00:00:20.879 --> 00:00:23.320
<v Speaker 1>and you know, English words typing out commands.

8
00:00:23.359 --> 00:00:25.199
<v Speaker 2>Yeah, plain texts exactly.

9
00:00:25.440 --> 00:00:29.039
<v Speaker 1>We interact with this polished, shiny surface of the Internet

10
00:00:29.120 --> 00:00:32.920
<v Speaker 1>every single day, but the moment we actually need to

11
00:00:32.920 --> 00:00:35.320
<v Speaker 1>build a piece of it ourselves, most of us realize

12
00:00:35.399 --> 00:00:38.479
<v Speaker 1>we have absolutely no idea how the underlying mechanics operate.

13
00:00:38.679 --> 00:00:41.399
<v Speaker 2>It is a really stark realization. I mean, the abstraction

14
00:00:41.560 --> 00:00:44.920
<v Speaker 2>layer of the modern Internet is so incredibly thick that

15
00:00:45.000 --> 00:00:48.560
<v Speaker 2>you can honestly go decades without ever seeing the raw wiring.

16
00:00:48.280 --> 00:00:49.719
<v Speaker 1>Which is wild to think about.

17
00:00:49.840 --> 00:00:52.280
<v Speaker 2>It really is you transition from being this, you know,

18
00:00:52.679 --> 00:00:56.200
<v Speaker 2>passive consumer of digital interfaces to realizing, oh wait, I

19
00:00:56.320 --> 00:00:59.640
<v Speaker 2>might actually need to manipulate the infrastructure myself.

20
00:00:59.320 --> 00:01:00.880
<v Speaker 1>And that's terrified for a lot of people.

21
00:01:01.159 --> 00:01:05.200
<v Speaker 2>Oh definitely. The jargon alone, the acronyms, the structural logic,

22
00:01:05.799 --> 00:01:10.000
<v Speaker 2>it presents this massive formidable barrier to entry. We are

23
00:01:10.040 --> 00:01:14.120
<v Speaker 2>just so accustomed to seamlessness, right to systems that execute

24
00:01:14.159 --> 00:01:17.439
<v Speaker 2>these wildly complex operations with just a single.

25
00:01:17.159 --> 00:01:20.280
<v Speaker 1>Click, which makes our deep dive today incredibly urgent for you.

26
00:01:20.480 --> 00:01:23.879
<v Speaker 1>Our mission is to basically strip away that intimidation factor.

27
00:01:23.920 --> 00:01:26.599
<v Speaker 1>We want to extract the fundamental mechanics of web building

28
00:01:26.959 --> 00:01:29.040
<v Speaker 1>and just fast track your digital literacy.

29
00:01:29.159 --> 00:01:31.079
<v Speaker 2>And we have a great tool for doing that today,

30
00:01:31.200 --> 00:01:31.840
<v Speaker 2>we really do.

31
00:01:32.159 --> 00:01:36.159
<v Speaker 1>We're pulling our framework from a well, a rather unconventional source.

32
00:01:36.280 --> 00:01:39.239
<v Speaker 1>It's a book called Build your Own Website, a Comic

33
00:01:39.280 --> 00:01:42.599
<v Speaker 1>Guide to HTML, CSS and WordPress. Such a good book

34
00:01:42.640 --> 00:01:45.319
<v Speaker 1>written by Nate Cooper with art by Kim Gee, and

35
00:01:45.400 --> 00:01:48.159
<v Speaker 1>yet it literally uses the medium of a graphic novel

36
00:01:48.280 --> 00:01:50.719
<v Speaker 1>to explain network infrastructure and code syntax.

37
00:01:50.840 --> 00:01:54.319
<v Speaker 2>It is a highly effective pedagogical format. It takes these

38
00:01:54.359 --> 00:01:58.359
<v Speaker 2>concepts that are traditionally presented as dense, abstract logic and

39
00:01:58.439 --> 00:02:00.560
<v Speaker 2>it maps them onto a visual narrow which.

40
00:02:00.519 --> 00:02:02.159
<v Speaker 1>Mace's so much easier to digest.

41
00:02:02.719 --> 00:02:06.959
<v Speaker 2>Exactly, instead of handing you a dry glossary of server terminology,

42
00:02:07.319 --> 00:02:11.240
<v Speaker 2>the reader is guided through structural concepts via personification.

43
00:02:11.719 --> 00:02:14.240
<v Speaker 1>Yeah, so the narrative centers around this protagonist named Kim

44
00:02:14.280 --> 00:02:15.159
<v Speaker 1>and her dog Tofu.

45
00:02:15.319 --> 00:02:17.520
<v Speaker 2>Tofu is great, the best, and.

46
00:02:17.639 --> 00:02:21.319
<v Speaker 1>They are attempting to build an online portfolio. And the

47
00:02:21.400 --> 00:02:25.759
<v Speaker 1>book introduces these technical concepts as actual characters that Kim

48
00:02:25.840 --> 00:02:30.039
<v Speaker 1>interacts with. So you meet Glinda the good witch of CSS.

49
00:02:29.680 --> 00:02:32.120
<v Speaker 2>For example, right, and Wendy the word press maven.

50
00:02:32.360 --> 00:02:36.400
<v Speaker 1>Yes, it totally disarms that inherent anxiety of approaching a

51
00:02:36.479 --> 00:02:39.960
<v Speaker 1>blank code document. But before we look at the specific

52
00:02:40.080 --> 00:02:42.280
<v Speaker 1>tools Kim learns to use, we have to look at

53
00:02:42.319 --> 00:02:44.639
<v Speaker 1>the motivation behind this curriculum in the first place.

54
00:02:44.599 --> 00:02:46.680
<v Speaker 2>Right, the why of it all? If he connects this

55
00:02:46.759 --> 00:02:49.639
<v Speaker 2>to the bigger picture. The author Nate Cooper recognized this

56
00:02:49.919 --> 00:02:53.719
<v Speaker 2>massive societal shift in professional expectation like a total landscape

57
00:02:53.800 --> 00:02:57.280
<v Speaker 2>change exactly. Drawing from his background in retail marketing at

58
00:02:57.280 --> 00:03:01.199
<v Speaker 2>Apple and his consulting work, he observed the basic HTML

59
00:03:01.319 --> 00:03:04.360
<v Speaker 2>and CSS, Well, they're no longer niche domains.

60
00:03:04.120 --> 00:03:06.599
<v Speaker 1>Right, they used to be just for computer science majors.

61
00:03:06.560 --> 00:03:10.120
<v Speaker 2>Or dedicated webmasters. Yeah, but the barrier between print and

62
00:03:10.240 --> 00:03:16.240
<v Speaker 2>digital mediums essentially collapsed. Graphic Designers who previously operated entirely within, say,

63
00:03:16.479 --> 00:03:21.039
<v Speaker 2>layout software, were suddenly required to deliver functional web code.

64
00:03:20.960 --> 00:03:23.800
<v Speaker 1>And the expectation just expanded outward from there, didn't it

65
00:03:23.919 --> 00:03:27.960
<v Speaker 1>to writers, marketers, small business owners. I mean, everyone now

66
00:03:28.080 --> 00:03:32.080
<v Speaker 1>needs a foundational fluency in how the web processes information.

67
00:03:32.240 --> 00:03:34.319
<v Speaker 1>They really do, and that brings us to the very

68
00:03:34.400 --> 00:03:37.680
<v Speaker 1>first hurdle of acquiring a new skill, which is just

69
00:03:37.840 --> 00:03:42.159
<v Speaker 1>the conscious decision to prioritize the friction of learning over

70
00:03:42.800 --> 00:03:46.000
<v Speaker 1>immediate comfort. The comic captures is so perfectly. We see

71
00:03:46.080 --> 00:03:49.120
<v Speaker 1>Kim leaving a yoga class. She's throwing out this peaceful

72
00:03:49.199 --> 00:03:51.439
<v Speaker 1>nomaster as she walks out the door.

73
00:03:51.639 --> 00:03:54.560
<v Speaker 2>Yeah, she transitions immediately from a state of total relaxation

74
00:03:54.680 --> 00:03:56.439
<v Speaker 2>into this moment of decision.

75
00:03:56.199 --> 00:03:58.879
<v Speaker 1>Right because she runs into her friend Doug at an arcade. Yeah,

76
00:03:59.360 --> 00:04:02.280
<v Speaker 1>Doug is just aggressively mashing buttons on a game called

77
00:04:02.319 --> 00:04:05.080
<v Speaker 1>Space Adventure, as you do at an arcade, right, and

78
00:04:05.199 --> 00:04:07.840
<v Speaker 1>he casually invites Kim to a nine pm show later

79
00:04:07.919 --> 00:04:11.159
<v Speaker 1>that night to see a band called Dragon Slayer. So

80
00:04:11.240 --> 00:04:13.840
<v Speaker 1>this is the classic crossroads. She can easily take the

81
00:04:13.879 --> 00:04:16.439
<v Speaker 1>path of least resistance, right, go to the show, hang

82
00:04:16.480 --> 00:04:18.879
<v Speaker 1>out with Doug, and just leave her portfolio for a

83
00:04:18.959 --> 00:04:19.920
<v Speaker 1>hypothetical tomorrow.

84
00:04:20.040 --> 00:04:20.639
<v Speaker 2>But she doesn't.

85
00:04:20.800 --> 00:04:23.279
<v Speaker 1>No, she turns him down, drops off her library books

86
00:04:23.639 --> 00:04:26.040
<v Speaker 1>and heads to web basics one oh one at seven pm.

87
00:04:26.120 --> 00:04:30.720
<v Speaker 2>Instead, that scene perfectly isolates the reality of adult education.

88
00:04:31.279 --> 00:04:35.519
<v Speaker 2>It actively requires the sacrifice of immediate gratification. You have

89
00:04:35.600 --> 00:04:38.519
<v Speaker 2>to willingly subject yourself to the discomfort of being a

90
00:04:38.560 --> 00:04:39.240
<v Speaker 2>beginner again.

91
00:04:39.560 --> 00:04:44.279
<v Speaker 1>Okay, let's unpack this because Nate Cooper frames Kim's choice

92
00:04:44.720 --> 00:04:48.000
<v Speaker 1>with a fascinating historical perspective. In his notes, he talks

93
00:04:48.000 --> 00:04:51.079
<v Speaker 1>about visiting his dad's office at a community college years ago,

94
00:04:51.600 --> 00:04:54.519
<v Speaker 1>and his dad was considered wildly forward thinking simply because

95
00:04:54.519 --> 00:04:56.480
<v Speaker 1>he had a physical computer sitting on his desk.

96
00:04:56.399 --> 00:04:58.319
<v Speaker 2>And he personally read his own email.

97
00:04:58.600 --> 00:05:02.279
<v Speaker 1>Yes, which was breaking at the time. Today, I mean,

98
00:05:02.399 --> 00:05:04.879
<v Speaker 1>a desk without a computer is literally just a table.

99
00:05:05.319 --> 00:05:06.560
<v Speaker 1>But wait, I have to push back here.

100
00:05:06.639 --> 00:05:07.279
<v Speaker 2>Okay, let's hear it.

101
00:05:07.560 --> 00:05:11.480
<v Speaker 1>With tools like squarespace, Wix or even AI website builders

102
00:05:11.519 --> 00:05:14.360
<v Speaker 1>doing all the heavy lifting today, why on earth does

103
00:05:14.399 --> 00:05:18.399
<v Speaker 1>a modern professional still need to know raw eachtml. I mean,

104
00:05:18.560 --> 00:05:20.920
<v Speaker 1>isn't this like demanding everyone learn how to drive a

105
00:05:20.959 --> 00:05:23.759
<v Speaker 1>manual transmission when all the cars are becoming self driving.

106
00:05:24.319 --> 00:05:27.879
<v Speaker 2>Well, that is a very common argument, but it fundamentally

107
00:05:27.959 --> 00:05:30.040
<v Speaker 2>misunderstands how digital tools fail.

108
00:05:30.199 --> 00:05:31.000
<v Speaker 1>Okay, how do you mean?

109
00:05:31.480 --> 00:05:34.600
<v Speaker 2>Relying entirely on a drag and drop website builder is

110
00:05:34.759 --> 00:05:38.319
<v Speaker 2>fine until the platform's constraints prevent you from doing what

111
00:05:38.439 --> 00:05:42.439
<v Speaker 2>you actually need, or worse, the automated layout breaks.

112
00:05:42.519 --> 00:05:44.920
<v Speaker 1>Oh and it always breaks at the worst possible time.

113
00:05:45.079 --> 00:05:48.000
<v Speaker 2>Always. In software engineering, there is a concept known as

114
00:05:48.079 --> 00:05:49.879
<v Speaker 2>the law of leaky abstractions.

115
00:05:50.040 --> 00:05:51.120
<v Speaker 1>Leaky abstractions.

116
00:05:51.240 --> 00:05:54.759
<v Speaker 2>Yeah, these visual builders are abstractions. They hide the complex

117
00:05:54.839 --> 00:05:58.639
<v Speaker 2>code from you, but abstractions always leak. An image won't align,

118
00:05:58.800 --> 00:06:02.399
<v Speaker 2>a font won't load. A layout suddenly collapses on a mobile.

119
00:06:02.160 --> 00:06:04.759
<v Speaker 1>Screen, right, and you're just staring at it helpless.

120
00:06:05.279 --> 00:06:09.360
<v Speaker 2>Exactly if you don't understand the underlying skeletal structure of

121
00:06:09.600 --> 00:06:13.120
<v Speaker 2>HTML and the stylistic rules of CSS, you are completely

122
00:06:13.240 --> 00:06:16.560
<v Speaker 2>powerless to fix it. Cooper's mantra throughout the book is

123
00:06:16.759 --> 00:06:20.680
<v Speaker 2>learning is awesome because he isn't just teaching you to memorize.

124
00:06:20.319 --> 00:06:22.240
<v Speaker 1>Tags, right, it's not rope memorization.

125
00:06:22.439 --> 00:06:25.439
<v Speaker 2>Now, he is teaching you the mechanical logic of the medium,

126
00:06:25.920 --> 00:06:29.720
<v Speaker 2>so you can debug problems when the automated tools inevitably fail.

127
00:06:29.959 --> 00:06:32.639
<v Speaker 1>Ah. So the automated tools are a shortcut, but you

128
00:06:32.720 --> 00:06:35.360
<v Speaker 1>still need to know how to read the map precisely. Okay,

129
00:06:35.639 --> 00:06:38.199
<v Speaker 1>So Kim makes it to class, meets her instructor, and

130
00:06:38.319 --> 00:06:42.000
<v Speaker 1>she is ready to build. Now we hit the physical requirements.

131
00:06:42.480 --> 00:06:45.680
<v Speaker 1>And people always assume they need to purchase these expensive

132
00:06:45.759 --> 00:06:48.279
<v Speaker 1>specialized software suites to even attempt this.

133
00:06:48.439 --> 00:06:50.839
<v Speaker 2>Oh yeah, they think it's going to cost thousands of dollars,

134
00:06:50.920 --> 00:06:53.040
<v Speaker 2>but the barrier to entry in terms of software is

135
00:06:53.079 --> 00:06:57.360
<v Speaker 2>actually zero zero yep. Cooper breaks down the Web Developer's

136
00:06:57.399 --> 00:07:01.160
<v Speaker 2>starter Kit into just two fundamental, totally free tools.

137
00:07:01.319 --> 00:07:03.920
<v Speaker 1>Right, and the first tool is a web browser, which

138
00:07:04.040 --> 00:07:05.879
<v Speaker 1>obviously you know you need a browser to look at

139
00:07:05.920 --> 00:07:09.399
<v Speaker 1>the Internet, but Cooper emphasizes a crucial mechanical reason for

140
00:07:09.519 --> 00:07:11.959
<v Speaker 1>your choices here he does. He points out that you

141
00:07:12.000 --> 00:07:17.279
<v Speaker 1>should actively avoid older legacy browsers, specifically outdated versions of

142
00:07:17.399 --> 00:07:21.720
<v Speaker 1>Internet Explorer, and instead you need to utilize modern browsers

143
00:07:21.879 --> 00:07:24.240
<v Speaker 1>like Chrome, Firefox, or Safari.

144
00:07:24.680 --> 00:07:27.639
<v Speaker 2>The reason for that distinction lies in the rendering engines.

145
00:07:27.680 --> 00:07:28.920
<v Speaker 1>Right, the engine under the hood.

146
00:07:29.079 --> 00:07:32.240
<v Speaker 2>Exactly, a web browser is not just a window. It

147
00:07:32.399 --> 00:07:35.680
<v Speaker 2>is an incredibly complex piece of software that takes raw

148
00:07:35.839 --> 00:07:38.920
<v Speaker 2>text code and translates it into the visual layout. You

149
00:07:38.959 --> 00:07:43.000
<v Speaker 2>see different browsers use different rendering engines like Chrome uses one,

150
00:07:43.199 --> 00:07:44.519
<v Speaker 2>Safari uses another, and.

151
00:07:44.560 --> 00:07:46.319
<v Speaker 1>The older ones just can't keep up right.

152
00:07:46.480 --> 00:07:49.480
<v Speaker 2>Older browsers simply do not possess the vocabulary to interpret

153
00:07:49.560 --> 00:07:54.480
<v Speaker 2>modern coding standards. Furthermore, Cooper insists on installing multiple browsers

154
00:07:54.519 --> 00:07:57.360
<v Speaker 2>because code does not execute identically across.

155
00:07:57.040 --> 00:07:59.240
<v Speaker 1>All of them. Oh, that is so frustrating when that happens.

156
00:07:59.399 --> 00:08:02.000
<v Speaker 2>Tell me about it. It a margin might be interpreted

157
00:08:02.079 --> 00:08:05.439
<v Speaker 2>as five pixels wider in Firefox than it is in Safari.

158
00:08:05.920 --> 00:08:08.000
<v Speaker 2>You have to test your code across different engines to

159
00:08:08.120 --> 00:08:09.800
<v Speaker 2>ensure visual stability, so the.

160
00:08:09.839 --> 00:08:13.439
<v Speaker 1>Browser is really your testing environment. Now. The second piece

161
00:08:13.639 --> 00:08:16.120
<v Speaker 1>of the toolkit is where you actually construct the code,

162
00:08:16.560 --> 00:08:19.279
<v Speaker 1>a text editor, and I want to issue a very

163
00:08:19.439 --> 00:08:22.519
<v Speaker 1>very clear warning right now about this. Please do. Using

164
00:08:22.600 --> 00:08:25.519
<v Speaker 1>Microsoft Word to write code is like trying to paint

165
00:08:25.519 --> 00:08:29.000
<v Speaker 1>a house with the toothbrush. It might leave marks, but

166
00:08:29.079 --> 00:08:31.959
<v Speaker 1>it's the completely wrong tool for the job. Word is

167
00:08:32.000 --> 00:08:34.080
<v Speaker 1>a word processor. It is not a text editor.

168
00:08:34.240 --> 00:08:34.879
<v Speaker 2>Huge difference.

169
00:08:35.080 --> 00:08:39.600
<v Speaker 1>Huge. It injects hidden metadata, proprietary rich text formatting, and

170
00:08:39.720 --> 00:08:43.559
<v Speaker 1>automatic smart quotes, and the browser's engine will interpret all

171
00:08:43.600 --> 00:08:45.360
<v Speaker 1>of that as fatal syntax errors.

172
00:08:45.480 --> 00:08:49.159
<v Speaker 2>Yeah, it'll just break everything. A word processor's primary function

173
00:08:49.360 --> 00:08:52.200
<v Speaker 2>is to prepare a document for a physical printer. A

174
00:08:52.320 --> 00:08:56.679
<v Speaker 2>code editor's function is to maintain absolute data purity. Purity

175
00:08:56.799 --> 00:08:59.159
<v Speaker 2>I like that when you open a specialized editor and

176
00:08:59.279 --> 00:09:03.279
<v Speaker 2>Cooper recommends Notepad plus plus for Windows, text Wrangler for Mac,

177
00:09:03.399 --> 00:09:06.480
<v Speaker 2>or Sublime Text. It interacts with the text on a

178
00:09:06.559 --> 00:09:08.000
<v Speaker 2>purely structural level, so.

179
00:09:08.039 --> 00:09:10.679
<v Speaker 1>It actually understands the logic of what you are writing.

180
00:09:10.600 --> 00:09:12.919
<v Speaker 2>Yes, through a mechanism called syntax highlighting.

181
00:09:13.039 --> 00:09:13.960
<v Speaker 1>Okay, what does that look like?

182
00:09:14.279 --> 00:09:17.360
<v Speaker 2>Because HTML relies heavily on opening and closing tags to

183
00:09:17.440 --> 00:09:20.919
<v Speaker 2>create structure, a missing bracket can break an entire web page.

184
00:09:21.840 --> 00:09:24.080
<v Speaker 2>A code editor parses the logic of the document in

185
00:09:24.159 --> 00:09:27.879
<v Speaker 2>real time. It visually color codes the tags, so if

186
00:09:27.919 --> 00:09:30.000
<v Speaker 2>you open a paragraph tag but forget to close it,

187
00:09:30.440 --> 00:09:34.159
<v Speaker 2>the editor makes that structural flaw immediately obvious just by

188
00:09:34.240 --> 00:09:39.600
<v Speaker 2>the color alone, exactly. Additionally, these editors use monospaced.

189
00:09:38.960 --> 00:09:42.480
<v Speaker 1>Fonts right where every single character, whether it's a skinny

190
00:09:42.559 --> 00:09:45.559
<v Speaker 1>I or a YW, takes up the exact same amount

191
00:09:45.600 --> 00:09:46.799
<v Speaker 1>of horizontal.

192
00:09:46.320 --> 00:09:51.000
<v Speaker 2>Pixel space precisely. In coding, visual alignment is critical for debugging.

193
00:09:51.360 --> 00:09:55.039
<v Speaker 2>Monospased fonts ensure that your nested code blocks line up perfectly.

194
00:09:55.519 --> 00:09:59.000
<v Speaker 2>That allows your eye to scan for structural irregularities much

195
00:09:59.120 --> 00:10:01.879
<v Speaker 2>much faster than in a proportionally spaced font.

196
00:10:01.960 --> 00:10:05.120
<v Speaker 1>Okay, so we have our sterile, logic driven code editor

197
00:10:05.200 --> 00:10:07.799
<v Speaker 1>to write the text and our browser to interpret and

198
00:10:07.879 --> 00:10:09.840
<v Speaker 1>test it. So we have our local toolkit set up.

199
00:10:09.879 --> 00:10:12.240
<v Speaker 1>We did, but having perfect code on your laptop is

200
00:10:12.399 --> 00:10:14.519
<v Speaker 1>useless if it just sits there, I mean, nobody else

201
00:10:14.559 --> 00:10:16.759
<v Speaker 1>can see it. We have to untether your site from

202
00:10:16.799 --> 00:10:20.519
<v Speaker 1>your local machine, and this requires a transition into understanding

203
00:10:20.600 --> 00:10:22.759
<v Speaker 1>the anatomy of the global network itself.

204
00:10:22.960 --> 00:10:26.120
<v Speaker 2>And Cooper tackles this by breaking down how computers establish

205
00:10:26.159 --> 00:10:28.960
<v Speaker 2>connections over the Internet. Beginning with the address.

206
00:10:28.559 --> 00:10:32.879
<v Speaker 1>System, the URL, the uniform resource locator. We interact with

207
00:10:32.960 --> 00:10:36.360
<v Speaker 1>them constantly without parsing the mechanics. Let's take the prefix

208
00:10:36.399 --> 00:10:39.759
<v Speaker 1>of a standard URL right the HTTP colon slash slash.

209
00:10:39.799 --> 00:10:42.440
<v Speaker 1>We know a stance our hypertext transfer protocol, but let's

210
00:10:42.440 --> 00:10:45.279
<v Speaker 1>look at the mechanism. What does a protocol actually do?

211
00:10:45.679 --> 00:10:46.480
<v Speaker 1>In this context?

212
00:10:46.879 --> 00:10:50.600
<v Speaker 2>A protocol establishes the strict rules for transferring packets of

213
00:10:50.679 --> 00:10:54.279
<v Speaker 2>data between two machines. Okay, when you type HTTP, you

214
00:10:54.320 --> 00:10:57.279
<v Speaker 2>are instructing your browser to initiate a specific type of

215
00:10:57.360 --> 00:11:01.559
<v Speaker 2>handshake with another computer. You're basically saying, I am requesting

216
00:11:01.600 --> 00:11:04.879
<v Speaker 2>an HTML document, send it to me using the standard

217
00:11:05.000 --> 00:11:06.720
<v Speaker 2>unencrypted data transfer rules.

218
00:11:07.080 --> 00:11:08.759
<v Speaker 1>Unencrypted being the keyword.

219
00:11:08.480 --> 00:11:12.559
<v Speaker 2>There right now. If you see HTTPS, the S stands

220
00:11:12.639 --> 00:11:16.120
<v Speaker 2>for secure, meaning the protocol demands an encrypted tunnel for

221
00:11:16.200 --> 00:11:19.279
<v Speaker 2>the data packets, which is essential when transmitting passwords or

222
00:11:19.399 --> 00:11:20.159
<v Speaker 2>financial data.

223
00:11:20.360 --> 00:11:23.480
<v Speaker 1>You definitely want that ass when you're buying something, absolutely so.

224
00:11:23.600 --> 00:11:26.480
<v Speaker 1>After the protocol dictates the rules and engagement, you have

225
00:11:26.600 --> 00:11:29.200
<v Speaker 1>the domain name like ny Times, and then the top

226
00:11:29.320 --> 00:11:33.039
<v Speaker 1>level domain like dot com. Cooper notes that dot com

227
00:11:33.120 --> 00:11:36.519
<v Speaker 1>originally denoted a commercial entity. Knowing the syntax of the

228
00:11:36.600 --> 00:11:39.679
<v Speaker 1>address is step one. But what physically happens when you

229
00:11:39.840 --> 00:11:43.960
<v Speaker 1>hit enter. Cooper uses this classic clients and Servers analogy

230
00:11:44.240 --> 00:11:45.480
<v Speaker 1>to explain this transaction.

231
00:11:45.799 --> 00:11:48.399
<v Speaker 2>It really is the foundational mental model of the Internet.

232
00:11:48.759 --> 00:11:51.759
<v Speaker 2>Your computer, the machine running the web browser, is the client.

233
00:11:51.879 --> 00:11:54.720
<v Speaker 2>It initiates the request right You tip the URL, and

234
00:11:54.840 --> 00:11:56.879
<v Speaker 2>your client sends a message out into the network saying

235
00:11:57.279 --> 00:12:00.320
<v Speaker 2>locate the machine with this address and request its homepage file.

236
00:12:00.720 --> 00:12:02.919
<v Speaker 1>And in Cooper's analogy, the server is like a waiter

237
00:12:03.000 --> 00:12:06.120
<v Speaker 1>at a restaurant, Your client places the order, the server

238
00:12:06.200 --> 00:12:08.039
<v Speaker 1>receives it, goes into the kitchen or you know it's

239
00:12:08.279 --> 00:12:12.039
<v Speaker 1>hard drive, retrieves the request at hgmeling file, and serves

240
00:12:12.080 --> 00:12:12.879
<v Speaker 1>it back to your browser.

241
00:12:13.159 --> 00:12:14.120
<v Speaker 2>Perfect analogy.

242
00:12:14.279 --> 00:12:17.679
<v Speaker 1>But here's where it gets really interesting because that restaurant

243
00:12:17.720 --> 00:12:21.279
<v Speaker 1>analogy breaks down completely when you introduce internet scale traffic.

244
00:12:21.399 --> 00:12:22.440
<v Speaker 2>Oh completely right.

245
00:12:22.960 --> 00:12:25.840
<v Speaker 1>If the server is a single waiter, what happens when

246
00:12:25.879 --> 00:12:28.320
<v Speaker 1>a million clients walk through the front door at the

247
00:12:28.399 --> 00:12:32.720
<v Speaker 1>exact same millisecond? A standard desktop computer attempting to act

248
00:12:32.759 --> 00:12:36.120
<v Speaker 1>as a server would immediately crash under the memory load.

249
00:12:36.360 --> 00:12:40.000
<v Speaker 2>What's fascinating here is how Cooper visually updates that analogy

250
00:12:40.080 --> 00:12:43.720
<v Speaker 2>to match reality. A server is ultimately just a computer

251
00:12:43.840 --> 00:12:46.960
<v Speaker 2>that listens for requests and serves files. It can be

252
00:12:47.039 --> 00:12:48.200
<v Speaker 2>a dusty laptop in a.

253
00:12:48.240 --> 00:12:50.240
<v Speaker 1>Closet, sure, theoretically, but to.

254
00:12:50.320 --> 00:12:53.480
<v Speaker 2>Handle the scenario you just described, the comic reveals these

255
00:12:53.519 --> 00:12:57.360
<v Speaker 2>images of massive, towering racks of specialized hardware. When you

256
00:12:57.480 --> 00:13:00.639
<v Speaker 2>request a page from a high traffic site, request isn't

257
00:13:00.639 --> 00:13:04.840
<v Speaker 2>going to a single machine. It is hitting a complex logistics.

258
00:13:04.360 --> 00:13:06.559
<v Speaker 1>Center like a giant warehouse of computers.

259
00:13:06.960 --> 00:13:11.399
<v Speaker 2>Exactly. Load balancers distribute the incoming request across hundreds of

260
00:13:11.519 --> 00:13:14.919
<v Speaker 2>rack mounted servers, all working in tandem to prevent any

261
00:13:15.039 --> 00:13:19.320
<v Speaker 2>single machine from failing. The underlying request and response logic

262
00:13:19.440 --> 00:13:22.759
<v Speaker 2>remains identical, but the physical scale is industrial.

263
00:13:23.120 --> 00:13:28.080
<v Speaker 1>In understanding that industrial scale triggers the core psychological shift

264
00:13:28.279 --> 00:13:30.879
<v Speaker 1>of this entire learning process. Up until this point in

265
00:13:30.960 --> 00:13:34.120
<v Speaker 1>your life, you have exclusively played the role of the client.

266
00:13:34.200 --> 00:13:35.879
<v Speaker 1>You have been sitting at the table ordering.

267
00:13:35.679 --> 00:13:37.480
<v Speaker 2>The food right, just asking for things.

268
00:13:37.720 --> 00:13:40.919
<v Speaker 1>But by taking Web basics one oh one, Kim is

269
00:13:41.000 --> 00:13:43.600
<v Speaker 1>learning how to construct the kitchen, you are learning how

270
00:13:43.639 --> 00:13:44.960
<v Speaker 1>to operate as the server.

271
00:13:45.279 --> 00:13:48.440
<v Speaker 2>You transition from requesting data to providing it.

272
00:13:48.639 --> 00:13:51.639
<v Speaker 1>But practically speaking, I mean I cannot build an industrial

273
00:13:51.679 --> 00:13:52.879
<v Speaker 1>server farm in my living room.

274
00:13:52.919 --> 00:13:53.399
<v Speaker 2>Probably not.

275
00:13:53.559 --> 00:13:56.000
<v Speaker 1>I don't have the hardware, the cooling systems, or the

276
00:13:56.120 --> 00:13:59.039
<v Speaker 1>dedicated fiber optic lines to keep a machine connected to

277
00:13:59.080 --> 00:14:02.240
<v Speaker 1>the global NETWORKED twenty four to seven. So the mechanical

278
00:14:02.279 --> 00:14:06.039
<v Speaker 1>problem becomes, how do I acquire a server that never

279
00:14:06.159 --> 00:14:06.840
<v Speaker 1>goes offline?

280
00:14:07.000 --> 00:14:09.960
<v Speaker 2>Well, you rent the infrastructure. This introduces the concept of

281
00:14:10.039 --> 00:14:10.639
<v Speaker 2>web hosting.

282
00:14:10.759 --> 00:14:12.879
<v Speaker 1>Web hosts Okay companies.

283
00:14:12.440 --> 00:14:16.159
<v Speaker 2>Known as web hosts operate those massive server farms. They

284
00:14:16.240 --> 00:14:20.120
<v Speaker 2>absorb the costs of hardware, maintenance, security protocols. Redundant Power

285
00:14:20.200 --> 00:14:23.360
<v Speaker 2>supplies all of that for a monthly fee. They partition

286
00:14:23.480 --> 00:14:26.919
<v Speaker 2>a small segment of their hard drives exclusively for your files.

287
00:14:27.200 --> 00:14:30.720
<v Speaker 1>According to Cooper, securing your place on the web requires

288
00:14:30.799 --> 00:14:34.960
<v Speaker 1>two distinct mechanisms that beginners frequently conflate, and that's the

289
00:14:35.080 --> 00:14:36.799
<v Speaker 1>domain registrar and the web host.

290
00:14:37.039 --> 00:14:41.000
<v Speaker 2>They perform entirely different functions. First, you register a domain name.

291
00:14:41.399 --> 00:14:44.399
<v Speaker 2>You pay a fee to an authoritative registry to claim

292
00:14:44.519 --> 00:14:48.360
<v Speaker 2>exclusive rights to a specific string of characters, like you

293
00:14:48.440 --> 00:14:50.279
<v Speaker 2>know your portfolio dot com.

294
00:14:50.679 --> 00:14:53.000
<v Speaker 1>So what does this all mean? Mechanically speaking?

295
00:14:53.120 --> 00:14:54.639
<v Speaker 2>Think? Is it like a business right?

296
00:14:55.039 --> 00:14:58.799
<v Speaker 1>Registering a domain name is the equivalent of legally incorporating

297
00:14:58.840 --> 00:15:02.720
<v Speaker 1>your business and claim the name Kim's Great Portfolio llc.

298
00:15:03.399 --> 00:15:05.519
<v Speaker 1>You own the legal rights to the name, and you

299
00:15:05.600 --> 00:15:08.320
<v Speaker 1>have an entry in the official directory, But owning the

300
00:15:08.440 --> 00:15:11.159
<v Speaker 1>name does not give you a physical building. Your customers

301
00:15:11.240 --> 00:15:13.279
<v Speaker 1>have an address to look up, but if they go there,

302
00:15:13.360 --> 00:15:16.480
<v Speaker 1>it's just an empty dirt lot. Paying a web host

303
00:15:16.639 --> 00:15:19.639
<v Speaker 1>is signing the commercial lease for the physical brick and

304
00:15:19.720 --> 00:15:20.600
<v Speaker 1>mortar storefront.

305
00:15:20.799 --> 00:15:21.840
<v Speaker 2>That's a great way to put it.

306
00:15:22.240 --> 00:15:25.080
<v Speaker 1>You are paying for the physical server space, so that

307
00:15:25.200 --> 00:15:28.480
<v Speaker 1>when the directory points a customer to your address, there

308
00:15:28.600 --> 00:15:31.159
<v Speaker 1>is actually a building there holding your products.

309
00:15:31.519 --> 00:15:35.039
<v Speaker 2>That separation is critical. The domain is the routing logic,

310
00:15:35.480 --> 00:15:39.639
<v Speaker 2>the host is the physical storage. But that separation creates

311
00:15:39.679 --> 00:15:44.279
<v Speaker 2>the final logistical problem. Okay, you have your meticulously crafted

312
00:15:44.440 --> 00:15:47.600
<v Speaker 2>HTML files sitting on your local laptop, managed by your

313
00:15:47.639 --> 00:15:51.159
<v Speaker 2>code editor, your rented storefront. Your web host is a

314
00:15:51.279 --> 00:15:54.519
<v Speaker 2>server located in a data center hundreds of miles away. Right,

315
00:15:54.639 --> 00:15:57.000
<v Speaker 2>how do you transport the data from the client to

316
00:15:57.120 --> 00:15:57.480
<v Speaker 2>the server.

317
00:15:57.919 --> 00:16:00.960
<v Speaker 1>Ah? We briefly touched on the solution when we deconstructed

318
00:16:01.000 --> 00:16:02.799
<v Speaker 1>the URL protocols earlier we did.

319
00:16:03.000 --> 00:16:08.519
<v Speaker 2>Alongside HTTP, there's FTP file transfer protocol. Yeah. While EAHTTP

320
00:16:08.720 --> 00:16:11.480
<v Speaker 2>is designed to download files sequentially so a browser can

321
00:16:11.519 --> 00:16:15.200
<v Speaker 2>render them visually, FTP is designed for bulk two way

322
00:16:15.320 --> 00:16:21.039
<v Speaker 2>file management. Cooper introduces FTP client software, specifically highlighting an

323
00:16:21.039 --> 00:16:23.200
<v Speaker 2>open source tool called file Zilla.

324
00:16:23.440 --> 00:16:25.840
<v Speaker 1>So, if your web host is the rented storefront, your

325
00:16:25.960 --> 00:16:28.200
<v Speaker 1>FDP client is the specialized moving truck.

326
00:16:28.360 --> 00:16:30.399
<v Speaker 2>I love that. Yes, it's the moving truck and it

327
00:16:30.480 --> 00:16:33.960
<v Speaker 2>bypasses the standard web browsing ports entirely. Oh really, Yeah,

328
00:16:34.440 --> 00:16:37.559
<v Speaker 2>An FTP client opens a dedicated command channel directly to

329
00:16:37.639 --> 00:16:40.720
<v Speaker 2>your server. It authenticates your credentials and then opens a

330
00:16:40.759 --> 00:16:43.679
<v Speaker 2>separate daty channel to physically copy your local code files,

331
00:16:44.080 --> 00:16:46.799
<v Speaker 2>encrypt them, transmit them across the network, and write them

332
00:16:46.840 --> 00:16:48.919
<v Speaker 2>directly onto the web host's hard drive. It is a

333
00:16:49.000 --> 00:16:50.679
<v Speaker 2>direct logistical pipeline, and.

334
00:16:50.720 --> 00:16:54.159
<v Speaker 1>This final step cements the core philosophy of Cooper's curriculum.

335
00:16:55.960 --> 00:16:58.720
<v Speaker 1>You cannot learn this system purely through theory.

336
00:16:58.919 --> 00:16:59.879
<v Speaker 2>No, you really can't.

337
00:17:00.279 --> 00:17:03.799
<v Speaker 1>You can memorize the definitions of FTP and DNS resolution

338
00:17:03.919 --> 00:17:07.279
<v Speaker 1>all day long, but until you physically register a domain,

339
00:17:07.799 --> 00:17:11.359
<v Speaker 1>configure the routing, connect an FTP client, and watch a

340
00:17:11.400 --> 00:17:14.480
<v Speaker 1>file transfer from your desktop to a live server. While

341
00:17:14.519 --> 00:17:16.279
<v Speaker 1>the mechanics remain completely.

342
00:17:15.960 --> 00:17:20.400
<v Speaker 2>Abstract, the friction of actual implementation is where the learning occurs.

343
00:17:21.000 --> 00:17:24.359
<v Speaker 2>You have to encounter the configuration errors and resolve them

344
00:17:24.400 --> 00:17:27.519
<v Speaker 2>yourself to build true technical competency.

345
00:17:27.319 --> 00:17:30.920
<v Speaker 1>Which brings our journey with Kim into sharp focus. We

346
00:17:31.039 --> 00:17:33.920
<v Speaker 1>started with her leaving a yoga studio, resisting the easy

347
00:17:34.000 --> 00:17:36.400
<v Speaker 1>distraction of an arcade in a concert, to sit in

348
00:17:36.440 --> 00:17:38.720
<v Speaker 1>a classroom and confront her technical blind spots.

349
00:17:38.839 --> 00:17:40.000
<v Speaker 2>And look how far we've come.

350
00:17:40.400 --> 00:17:43.319
<v Speaker 1>Right by extracting the core concepts. From the first chapters

351
00:17:43.319 --> 00:17:46.279
<v Speaker 1>of this comic, we've completely rebuilt our mental model of

352
00:17:46.319 --> 00:17:50.279
<v Speaker 1>the Internet. We abandoned the word processors for specialized logic

353
00:17:50.359 --> 00:17:52.839
<v Speaker 1>parts and code editors. We looked under the hood of

354
00:17:52.920 --> 00:17:54.160
<v Speaker 1>browser rendering engines.

355
00:17:54.440 --> 00:17:57.759
<v Speaker 2>We deconstructed the packet transfer rules of URLs. We scaled

356
00:17:57.839 --> 00:18:00.279
<v Speaker 2>up the client server relationship from a single desk top

357
00:18:00.319 --> 00:18:03.359
<v Speaker 2>to an industrial server farm, and we mapped the logistical

358
00:18:03.400 --> 00:18:06.400
<v Speaker 2>pipeline of domains, hosts and FTP moving trucks.

359
00:18:06.720 --> 00:18:10.359
<v Speaker 1>We have poured the concrete foundation. We possess the exact

360
00:18:10.400 --> 00:18:14.359
<v Speaker 1>same toolkit that professional developers use, and we actually understand

361
00:18:14.559 --> 00:18:18.839
<v Speaker 1>the global infrastructure that will distribute our code. Web literacy

362
00:18:19.000 --> 00:18:21.759
<v Speaker 1>is no longer an esoteric dark art. It is the

363
00:18:21.839 --> 00:18:24.680
<v Speaker 1>fundamental baseline for operating in the modern economy.

364
00:18:24.920 --> 00:18:27.880
<v Speaker 2>It really is. And this raises an important question, Oh,

365
00:18:27.960 --> 00:18:29.559
<v Speaker 2>I like where this is going? Well, if we trace

366
00:18:29.640 --> 00:18:33.839
<v Speaker 2>the historical trajectory cooper outlines, the definition of basic literacy

367
00:18:34.079 --> 00:18:38.480
<v Speaker 2>is accelerating rapidly. It expanded from reading physical lik on paper,

368
00:18:38.880 --> 00:18:42.559
<v Speaker 2>to operating a graphical user interface and sending emails to

369
00:18:42.720 --> 00:18:47.279
<v Speaker 2>now requiring a functional understanding of network protocols, server architecture

370
00:18:47.359 --> 00:18:48.319
<v Speaker 2>and code syntax.

371
00:18:48.599 --> 00:18:52.279
<v Speaker 1>The required baseline of knowledge is expanding, not shrinking exactly.

372
00:18:52.519 --> 00:18:56.279
<v Speaker 2>So where does that expansion lead. If manipulating plaintext code

373
00:18:56.359 --> 00:18:59.480
<v Speaker 2>and understanding server logistics is the new touch typing today,

374
00:19:00.079 --> 00:19:03.200
<v Speaker 2>what will constitute basic literacy in another ten or twenty years?

375
00:19:03.319 --> 00:19:03.519
<v Speaker 1>Wow?

376
00:19:03.960 --> 00:19:07.480
<v Speaker 2>Will we be required to fluently write complex machine learning

377
00:19:07.519 --> 00:19:11.319
<v Speaker 2>algorithms just to manage our personal finances? Or will the

378
00:19:11.359 --> 00:19:15.759
<v Speaker 2>abstraction layer become so thick and artificial intelligence so predictive

379
00:19:16.279 --> 00:19:19.759
<v Speaker 2>that the machines simply read our intentions, rendering the act

380
00:19:19.799 --> 00:19:22.680
<v Speaker 2>of manually typing code as obsolete as a desk without

381
00:19:22.680 --> 00:19:26.000
<v Speaker 2>a computer on it. Will we be speaking in code

382
00:19:26.119 --> 00:19:28.279
<v Speaker 2>or will the machines just be reading our minds?

383
00:19:28.920 --> 00:19:32.799
<v Speaker 1>From touch typing to telepathy. That is a massive paradigm

384
00:19:32.880 --> 00:19:33.680
<v Speaker 1>shift to consider.

385
00:19:33.880 --> 00:19:35.559
<v Speaker 2>It's a lot to think about, it really is.

386
00:19:35.880 --> 00:19:39.839
<v Speaker 1>But until those abstraction layers become completely seamless, we are

387
00:19:39.920 --> 00:19:43.359
<v Speaker 1>still required to understand the wiring. So to you listening,

388
00:19:44.279 --> 00:19:47.319
<v Speaker 1>lean into the friction, keep learning, stay curious. Maybe take

389
00:19:47.319 --> 00:19:49.640
<v Speaker 1>a page out of King's book, skip the arcade tonight

390
00:19:49.720 --> 00:19:51.880
<v Speaker 1>and start sketching out the blueprints for your own digital

391
00:19:51.920 --> 00:19:54.319
<v Speaker 1>real estate, Because that wall you hit earlier. It's not

392
00:19:54.359 --> 00:19:57.839
<v Speaker 1>an impenetrable barrier. It's just logic and text, And now

393
00:19:58.119 --> 00:20:00.640
<v Speaker 1>you know exactly how the underlying mechanic X operate to

394
00:20:00.680 --> 00:20:01.160
<v Speaker 1>take it down.