Speaker 1: Right now, Like, as you listen to this, you are
Speaker 1: completely surrounded by this, this invisible global architecture of plain text.
Speaker 2: Oh absolutely, it's everywhere.
Speaker 1: Right the entire digital world. I mean, the apps you
Speaker 1: used to manage your life, your bank accounts, the streaming platforms,
Speaker 1: it is all entirely held together by just brackets, slashes,
Speaker 1: and you know, English words typing out commands.
Speaker 2: Yeah, plain texts exactly.
Speaker 1: We interact with this polished, shiny surface of the Internet
Speaker 1: every single day, but the moment we actually need to
Speaker 1: build a piece of it ourselves, most of us realize
Speaker 1: we have absolutely no idea how the underlying mechanics operate.
Speaker 2: It is a really stark realization. I mean, the abstraction
Speaker 2: layer of the modern Internet is so incredibly thick that
Speaker 2: you can honestly go decades without ever seeing the raw wiring.
Speaker 1: Which is wild to think about.
Speaker 2: It really is you transition from being this, you know,
Speaker 2: passive consumer of digital interfaces to realizing, oh wait, I
Speaker 2: might actually need to manipulate the infrastructure myself.
Speaker 1: And that's terrified for a lot of people.
Speaker 2: Oh definitely. The jargon alone, the acronyms, the structural logic,
Speaker 2: it presents this massive formidable barrier to entry. We are
Speaker 2: just so accustomed to seamlessness, right to systems that execute
Speaker 2: these wildly complex operations with just a single.
Speaker 1: Click, which makes our deep dive today incredibly urgent for you.
Speaker 1: Our mission is to basically strip away that intimidation factor.
Speaker 1: We want to extract the fundamental mechanics of web building
Speaker 1: and just fast track your digital literacy.
Speaker 2: And we have a great tool for doing that today,
Speaker 2: we really do.
Speaker 1: We're pulling our framework from a well, a rather unconventional source.
Speaker 1: It's a book called Build your Own Website, a Comic
Speaker 1: Guide to HTML, CSS and WordPress. Such a good book
Speaker 1: written by Nate Cooper with art by Kim Gee, and
Speaker 1: yet it literally uses the medium of a graphic novel
Speaker 1: to explain network infrastructure and code syntax.
Speaker 2: It is a highly effective pedagogical format. It takes these
Speaker 2: concepts that are traditionally presented as dense, abstract logic and
Speaker 2: it maps them onto a visual narrow which.
Speaker 1: Mace's so much easier to digest.
Speaker 2: Exactly, instead of handing you a dry glossary of server terminology,
Speaker 2: the reader is guided through structural concepts via personification.
Speaker 1: Yeah, so the narrative centers around this protagonist named Kim
Speaker 1: and her dog Tofu.
Speaker 2: Tofu is great, the best, and.
Speaker 1: They are attempting to build an online portfolio. And the
Speaker 1: book introduces these technical concepts as actual characters that Kim
Speaker 1: interacts with. So you meet Glinda the good witch of CSS.
Speaker 2: For example, right, and Wendy the word press maven.
Speaker 1: Yes, it totally disarms that inherent anxiety of approaching a
Speaker 1: blank code document. But before we look at the specific
Speaker 1: tools Kim learns to use, we have to look at
Speaker 1: the motivation behind this curriculum in the first place.
Speaker 2: Right, the why of it all? If he connects this
Speaker 2: to the bigger picture. The author Nate Cooper recognized this
Speaker 2: massive societal shift in professional expectation like a total landscape
Speaker 2: change exactly. Drawing from his background in retail marketing at
Speaker 2: Apple and his consulting work, he observed the basic HTML
Speaker 2: and CSS, Well, they're no longer niche domains.
Speaker 1: Right, they used to be just for computer science majors.
Speaker 2: Or dedicated webmasters. Yeah, but the barrier between print and
Speaker 2: digital mediums essentially collapsed. Graphic Designers who previously operated entirely within, say,
Speaker 2: layout software, were suddenly required to deliver functional web code.
Speaker 1: And the expectation just expanded outward from there, didn't it
Speaker 1: to writers, marketers, small business owners. I mean, everyone now
Speaker 1: needs a foundational fluency in how the web processes information.
Speaker 1: They really do, and that brings us to the very
Speaker 1: first hurdle of acquiring a new skill, which is just
Speaker 1: the conscious decision to prioritize the friction of learning over
Speaker 1: immediate comfort. The comic captures is so perfectly. We see
Speaker 1: Kim leaving a yoga class. She's throwing out this peaceful
Speaker 1: nomaster as she walks out the door.
Speaker 2: Yeah, she transitions immediately from a state of total relaxation
Speaker 2: into this moment of decision.
Speaker 1: Right because she runs into her friend Doug at an arcade. Yeah,
Speaker 1: Doug is just aggressively mashing buttons on a game called
Speaker 1: Space Adventure, as you do at an arcade, right, and
Speaker 1: he casually invites Kim to a nine pm show later
Speaker 1: that night to see a band called Dragon Slayer. So
Speaker 1: this is the classic crossroads. She can easily take the
Speaker 1: path of least resistance, right, go to the show, hang
Speaker 1: out with Doug, and just leave her portfolio for a
Speaker 1: hypothetical tomorrow.
Speaker 2: But she doesn't.
Speaker 1: No, she turns him down, drops off her library books
Speaker 1: and heads to web basics one oh one at seven pm.
Speaker 2: Instead, that scene perfectly isolates the reality of adult education.
Speaker 2: It actively requires the sacrifice of immediate gratification. You have
Speaker 2: to willingly subject yourself to the discomfort of being a
Speaker 2: beginner again.
Speaker 1: Okay, let's unpack this because Nate Cooper frames Kim's choice
Speaker 1: with a fascinating historical perspective. In his notes, he talks
Speaker 1: about visiting his dad's office at a community college years ago,
Speaker 1: and his dad was considered wildly forward thinking simply because
Speaker 1: he had a physical computer sitting on his desk.
Speaker 2: And he personally read his own email.
Speaker 1: Yes, which was breaking at the time. Today, I mean,
Speaker 1: a desk without a computer is literally just a table.
Speaker 1: But wait, I have to push back here.
Speaker 2: Okay, let's hear it.
Speaker 1: With tools like squarespace, Wix or even AI website builders
Speaker 1: doing all the heavy lifting today, why on earth does
Speaker 1: a modern professional still need to know raw eachtml. I mean,
Speaker 1: isn't this like demanding everyone learn how to drive a
Speaker 1: manual transmission when all the cars are becoming self driving.
Speaker 2: Well, that is a very common argument, but it fundamentally
Speaker 2: misunderstands how digital tools fail.
Speaker 1: Okay, how do you mean?
Speaker 2: Relying entirely on a drag and drop website builder is
Speaker 2: fine until the platform's constraints prevent you from doing what
Speaker 2: you actually need, or worse, the automated layout breaks.
Speaker 1: Oh and it always breaks at the worst possible time.
Speaker 2: Always. In software engineering, there is a concept known as
Speaker 2: the law of leaky abstractions.
Speaker 1: Leaky abstractions.
Speaker 2: Yeah, these visual builders are abstractions. They hide the complex
Speaker 2: code from you, but abstractions always leak. An image won't align,
Speaker 2: a font won't load. A layout suddenly collapses on a mobile.
Speaker 1: Screen, right, and you're just staring at it helpless.
Speaker 2: Exactly if you don't understand the underlying skeletal structure of
Speaker 2: HTML and the stylistic rules of CSS, you are completely
Speaker 2: powerless to fix it. Cooper's mantra throughout the book is
Speaker 2: learning is awesome because he isn't just teaching you to memorize.
Speaker 1: Tags, right, it's not rope memorization.
Speaker 2: Now, he is teaching you the mechanical logic of the medium,
Speaker 2: so you can debug problems when the automated tools inevitably fail.
Speaker 1: Ah. So the automated tools are a shortcut, but you
Speaker 1: still need to know how to read the map precisely. Okay,
Speaker 1: So Kim makes it to class, meets her instructor, and
Speaker 1: she is ready to build. Now we hit the physical requirements.
Speaker 1: And people always assume they need to purchase these expensive
Speaker 1: specialized software suites to even attempt this.
Speaker 2: Oh yeah, they think it's going to cost thousands of dollars,
Speaker 2: but the barrier to entry in terms of software is
Speaker 2: actually zero zero yep. Cooper breaks down the Web Developer's
Speaker 2: starter Kit into just two fundamental, totally free tools.
Speaker 1: Right, and the first tool is a web browser, which
Speaker 1: obviously you know you need a browser to look at
Speaker 1: the Internet, but Cooper emphasizes a crucial mechanical reason for
Speaker 1: your choices here he does. He points out that you
Speaker 1: should actively avoid older legacy browsers, specifically outdated versions of
Speaker 1: Internet Explorer, and instead you need to utilize modern browsers
Speaker 1: like Chrome, Firefox, or Safari.
Speaker 2: The reason for that distinction lies in the rendering engines.
Speaker 1: Right, the engine under the hood.
Speaker 2: Exactly, a web browser is not just a window. It
Speaker 2: is an incredibly complex piece of software that takes raw
Speaker 2: text code and translates it into the visual layout. You
Speaker 2: see different browsers use different rendering engines like Chrome uses one,
Speaker 2: Safari uses another, and.
Speaker 1: The older ones just can't keep up right.
Speaker 2: Older browsers simply do not possess the vocabulary to interpret
Speaker 2: modern coding standards. Furthermore, Cooper insists on installing multiple browsers
Speaker 2: because code does not execute identically across.
Speaker 1: All of them. Oh, that is so frustrating when that happens.
Speaker 2: Tell me about it. It a margin might be interpreted
Speaker 2: as five pixels wider in Firefox than it is in Safari.
Speaker 2: You have to test your code across different engines to
Speaker 2: ensure visual stability, so the.
Speaker 1: Browser is really your testing environment. Now. The second piece
Speaker 1: of the toolkit is where you actually construct the code,
Speaker 1: a text editor, and I want to issue a very
Speaker 1: very clear warning right now about this. Please do. Using
Speaker 1: Microsoft Word to write code is like trying to paint
Speaker 1: a house with the toothbrush. It might leave marks, but
Speaker 1: it's the completely wrong tool for the job. Word is
Speaker 1: a word processor. It is not a text editor.
Speaker 2: Huge difference.
Speaker 1: Huge. It injects hidden metadata, proprietary rich text formatting, and
Speaker 1: automatic smart quotes, and the browser's engine will interpret all
Speaker 1: of that as fatal syntax errors.
Speaker 2: Yeah, it'll just break everything. A word processor's primary function
Speaker 2: is to prepare a document for a physical printer. A
Speaker 2: code editor's function is to maintain absolute data purity. Purity
Speaker 2: I like that when you open a specialized editor and
Speaker 2: Cooper recommends Notepad plus plus for Windows, text Wrangler for Mac,
Speaker 2: or Sublime Text. It interacts with the text on a
Speaker 2: purely structural level, so.
Speaker 1: It actually understands the logic of what you are writing.
Speaker 2: Yes, through a mechanism called syntax highlighting.
Speaker 1: Okay, what does that look like?
Speaker 2: Because HTML relies heavily on opening and closing tags to
Speaker 2: create structure, a missing bracket can break an entire web page.
Speaker 2: A code editor parses the logic of the document in
Speaker 2: real time. It visually color codes the tags, so if
Speaker 2: you open a paragraph tag but forget to close it,
Speaker 2: the editor makes that structural flaw immediately obvious just by
Speaker 2: the color alone, exactly. Additionally, these editors use monospaced.
Speaker 1: Fonts right where every single character, whether it's a skinny
Speaker 1: I or a YW, takes up the exact same amount
Speaker 1: of horizontal.
Speaker 2: Pixel space precisely. In coding, visual alignment is critical for debugging.
Speaker 2: Monospased fonts ensure that your nested code blocks line up perfectly.
Speaker 2: That allows your eye to scan for structural irregularities much
Speaker 2: much faster than in a proportionally spaced font.
Speaker 1: Okay, so we have our sterile, logic driven code editor
Speaker 1: to write the text and our browser to interpret and
Speaker 1: test it. So we have our local toolkit set up.
Speaker 1: We did, but having perfect code on your laptop is
Speaker 1: useless if it just sits there, I mean, nobody else
Speaker 1: can see it. We have to untether your site from
Speaker 1: your local machine, and this requires a transition into understanding
Speaker 1: the anatomy of the global network itself.
Speaker 2: And Cooper tackles this by breaking down how computers establish
Speaker 2: connections over the Internet. Beginning with the address.
Speaker 1: System, the URL, the uniform resource locator. We interact with
Speaker 1: them constantly without parsing the mechanics. Let's take the prefix
Speaker 1: of a standard URL right the HTTP colon slash slash.
Speaker 1: We know a stance our hypertext transfer protocol, but let's
Speaker 1: look at the mechanism. What does a protocol actually do?
Speaker 1: In this context?
Speaker 2: A protocol establishes the strict rules for transferring packets of
Speaker 2: data between two machines. Okay, when you type HTTP, you
Speaker 2: are instructing your browser to initiate a specific type of
Speaker 2: handshake with another computer. You're basically saying, I am requesting
Speaker 2: an HTML document, send it to me using the standard
Speaker 2: unencrypted data transfer rules.
Speaker 1: Unencrypted being the keyword.
Speaker 2: There right now. If you see HTTPS, the S stands
Speaker 2: for secure, meaning the protocol demands an encrypted tunnel for
Speaker 2: the data packets, which is essential when transmitting passwords or
Speaker 2: financial data.
Speaker 1: You definitely want that ass when you're buying something, absolutely so.
Speaker 1: After the protocol dictates the rules and engagement, you have
Speaker 1: the domain name like ny Times, and then the top
Speaker 1: level domain like dot com. Cooper notes that dot com
Speaker 1: originally denoted a commercial entity. Knowing the syntax of the
Speaker 1: address is step one. But what physically happens when you
Speaker 1: hit enter. Cooper uses this classic clients and Servers analogy
Speaker 1: to explain this transaction.
Speaker 2: It really is the foundational mental model of the Internet.
Speaker 2: Your computer, the machine running the web browser, is the client.
Speaker 2: It initiates the request right You tip the URL, and
Speaker 2: your client sends a message out into the network saying
Speaker 2: locate the machine with this address and request its homepage file.
Speaker 1: And in Cooper's analogy, the server is like a waiter
Speaker 1: at a restaurant, Your client places the order, the server
Speaker 1: receives it, goes into the kitchen or you know it's
Speaker 1: hard drive, retrieves the request at hgmeling file, and serves
Speaker 1: it back to your browser.
Speaker 2: Perfect analogy.
Speaker 1: But here's where it gets really interesting because that restaurant
Speaker 1: analogy breaks down completely when you introduce internet scale traffic.
Speaker 2: Oh completely right.
Speaker 1: If the server is a single waiter, what happens when
Speaker 1: a million clients walk through the front door at the
Speaker 1: exact same millisecond? A standard desktop computer attempting to act
Speaker 1: as a server would immediately crash under the memory load.
Speaker 2: What's fascinating here is how Cooper visually updates that analogy
Speaker 2: to match reality. A server is ultimately just a computer
Speaker 2: that listens for requests and serves files. It can be
Speaker 2: a dusty laptop in a.
Speaker 1: Closet, sure, theoretically, but to.
Speaker 2: Handle the scenario you just described, the comic reveals these
Speaker 2: images of massive, towering racks of specialized hardware. When you
Speaker 2: request a page from a high traffic site, request isn't
Speaker 2: going to a single machine. It is hitting a complex logistics.
Speaker 1: Center like a giant warehouse of computers.
Speaker 2: Exactly. Load balancers distribute the incoming request across hundreds of
Speaker 2: rack mounted servers, all working in tandem to prevent any
Speaker 2: single machine from failing. The underlying request and response logic
Speaker 2: remains identical, but the physical scale is industrial.
Speaker 1: In understanding that industrial scale triggers the core psychological shift
Speaker 1: of this entire learning process. Up until this point in
Speaker 1: your life, you have exclusively played the role of the client.
Speaker 1: You have been sitting at the table ordering.
Speaker 2: The food right, just asking for things.
Speaker 1: But by taking Web basics one oh one, Kim is
Speaker 1: learning how to construct the kitchen, you are learning how
Speaker 1: to operate as the server.
Speaker 2: You transition from requesting data to providing it.
Speaker 1: But practically speaking, I mean I cannot build an industrial
Speaker 1: server farm in my living room.
Speaker 2: Probably not.
Speaker 1: I don't have the hardware, the cooling systems, or the
Speaker 1: dedicated fiber optic lines to keep a machine connected to
Speaker 1: the global NETWORKED twenty four to seven. So the mechanical
Speaker 1: problem becomes, how do I acquire a server that never
Speaker 1: goes offline?
Speaker 2: Well, you rent the infrastructure. This introduces the concept of
Speaker 2: web hosting.
Speaker 1: Web hosts Okay companies.
Speaker 2: Known as web hosts operate those massive server farms. They
Speaker 2: absorb the costs of hardware, maintenance, security protocols. Redundant Power
Speaker 2: supplies all of that for a monthly fee. They partition
Speaker 2: a small segment of their hard drives exclusively for your files.
Speaker 1: According to Cooper, securing your place on the web requires
Speaker 1: two distinct mechanisms that beginners frequently conflate, and that's the
Speaker 1: domain registrar and the web host.
Speaker 2: They perform entirely different functions. First, you register a domain name.
Speaker 2: You pay a fee to an authoritative registry to claim
Speaker 2: exclusive rights to a specific string of characters, like you
Speaker 2: know your portfolio dot com.
Speaker 1: So what does this all mean? Mechanically speaking?
Speaker 2: Think? Is it like a business right?
Speaker 1: Registering a domain name is the equivalent of legally incorporating
Speaker 1: your business and claim the name Kim's Great Portfolio llc.
Speaker 1: You own the legal rights to the name, and you
Speaker 1: have an entry in the official directory, But owning the
Speaker 1: name does not give you a physical building. Your customers
Speaker 1: have an address to look up, but if they go there,
Speaker 1: it's just an empty dirt lot. Paying a web host
Speaker 1: is signing the commercial lease for the physical brick and
Speaker 1: mortar storefront.
Speaker 2: That's a great way to put it.
Speaker 1: You are paying for the physical server space, so that
Speaker 1: when the directory points a customer to your address, there
Speaker 1: is actually a building there holding your products.
Speaker 2: That separation is critical. The domain is the routing logic,
Speaker 2: the host is the physical storage. But that separation creates
Speaker 2: the final logistical problem. Okay, you have your meticulously crafted
Speaker 2: HTML files sitting on your local laptop, managed by your
Speaker 2: code editor, your rented storefront. Your web host is a
Speaker 2: server located in a data center hundreds of miles away. Right,
Speaker 2: how do you transport the data from the client to
Speaker 2: the server.
Speaker 1: Ah? We briefly touched on the solution when we deconstructed
Speaker 1: the URL protocols earlier we did.
Speaker 2: Alongside HTTP, there's FTP file transfer protocol. Yeah. While EAHTTP
Speaker 2: is designed to download files sequentially so a browser can
Speaker 2: render them visually, FTP is designed for bulk two way
Speaker 2: file management. Cooper introduces FTP client software, specifically highlighting an
Speaker 2: open source tool called file Zilla.
Speaker 1: So, if your web host is the rented storefront, your
Speaker 1: FDP client is the specialized moving truck.
Speaker 2: I love that. Yes, it's the moving truck and it
Speaker 2: bypasses the standard web browsing ports entirely. Oh really, Yeah,
Speaker 2: An FTP client opens a dedicated command channel directly to
Speaker 2: your server. It authenticates your credentials and then opens a
Speaker 2: separate daty channel to physically copy your local code files,
Speaker 2: encrypt them, transmit them across the network, and write them
Speaker 2: directly onto the web host's hard drive. It is a
Speaker 2: direct logistical pipeline, and.
Speaker 1: This final step cements the core philosophy of Cooper's curriculum.
Speaker 1: You cannot learn this system purely through theory.
Speaker 2: No, you really can't.
Speaker 1: You can memorize the definitions of FTP and DNS resolution
Speaker 1: all day long, but until you physically register a domain,
Speaker 1: configure the routing, connect an FTP client, and watch a
Speaker 1: file transfer from your desktop to a live server. While
Speaker 1: the mechanics remain completely.
Speaker 2: Abstract, the friction of actual implementation is where the learning occurs.
Speaker 2: You have to encounter the configuration errors and resolve them
Speaker 2: yourself to build true technical competency.
Speaker 1: Which brings our journey with Kim into sharp focus. We
Speaker 1: started with her leaving a yoga studio, resisting the easy
Speaker 1: distraction of an arcade in a concert, to sit in
Speaker 1: a classroom and confront her technical blind spots.
Speaker 2: And look how far we've come.
Speaker 1: Right by extracting the core concepts. From the first chapters
Speaker 1: of this comic, we've completely rebuilt our mental model of
Speaker 1: the Internet. We abandoned the word processors for specialized logic
Speaker 1: parts and code editors. We looked under the hood of
Speaker 1: browser rendering engines.
Speaker 2: We deconstructed the packet transfer rules of URLs. We scaled
Speaker 2: up the client server relationship from a single desk top
Speaker 2: to an industrial server farm, and we mapped the logistical
Speaker 2: pipeline of domains, hosts and FTP moving trucks.
Speaker 1: We have poured the concrete foundation. We possess the exact
Speaker 1: same toolkit that professional developers use, and we actually understand
Speaker 1: the global infrastructure that will distribute our code. Web literacy
Speaker 1: is no longer an esoteric dark art. It is the
Speaker 1: fundamental baseline for operating in the modern economy.
Speaker 2: It really is. And this raises an important question, Oh,
Speaker 2: I like where this is going? Well, if we trace
Speaker 2: the historical trajectory cooper outlines, the definition of basic literacy
Speaker 2: is accelerating rapidly. It expanded from reading physical lik on paper,
Speaker 2: to operating a graphical user interface and sending emails to
Speaker 2: now requiring a functional understanding of network protocols, server architecture
Speaker 2: and code syntax.
Speaker 1: The required baseline of knowledge is expanding, not shrinking exactly.
Speaker 2: So where does that expansion lead. If manipulating plaintext code
Speaker 2: and understanding server logistics is the new touch typing today,
Speaker 2: what will constitute basic literacy in another ten or twenty years?
Speaker 1: Wow?
Speaker 2: Will we be required to fluently write complex machine learning
Speaker 2: algorithms just to manage our personal finances? Or will the
Speaker 2: abstraction layer become so thick and artificial intelligence so predictive
Speaker 2: that the machines simply read our intentions, rendering the act
Speaker 2: of manually typing code as obsolete as a desk without
Speaker 2: a computer on it. Will we be speaking in code
Speaker 2: or will the machines just be reading our minds?
Speaker 1: From touch typing to telepathy. That is a massive paradigm
Speaker 1: shift to consider.
Speaker 2: It's a lot to think about, it really is.
Speaker 1: But until those abstraction layers become completely seamless, we are
Speaker 1: still required to understand the wiring. So to you listening,
Speaker 1: lean into the friction, keep learning, stay curious. Maybe take
Speaker 1: a page out of King's book, skip the arcade tonight
Speaker 1: and start sketching out the blueprints for your own digital
Speaker 1: real estate, Because that wall you hit earlier. It's not
Speaker 1: an impenetrable barrier. It's just logic and text, And now
Speaker 1: you know exactly how the underlying mechanic X operate to
Speaker 1: take it down.