How Computers and the Web Work
Understanding the foundational concepts of how computers process information and how the web functions under the hood.
Introduction
From Clicking to Computing
Real-world scenario: You've been building websites with HTML and CSS, but what actually happens when someone clicks a link on your site? How does the browser know what to display? And at the deepest level, how does a computer even understand your code?
People often think of computers as complex machines, but at their core, they are built on simple principles. Understanding how computers work can help you appreciate the technology that powers our daily lives and make you a more informed developer.
We often hear things about 0s and 1s, or binary. But what does that mean? And how does that relate to the web pages you're building?
What You'll Learn Today
- How computers actually process information (binary, processors, memory)
- What programming really means at a fundamental level
- Essential terminal commands for everyday development work
- How the web works: from URL to rendered page
- How browsers load and display websites
- The connection between these concepts and your future JavaScript work
Core Concept Overview
The Foundation: How Computers Think
The following video from Todd McLeod explains the concept of binary in a fun and engaging way.
From Binary to Human Language: UTF-8 and Unicode
Now that you understand how computers work with binary (1s and 0s), you might wonder: how do computers represent the letters, symbols, and characters we use every day? How does a computer know that a certain pattern of 1s and 0s represents the letter "A" or an emoji?
Key concepts you'll learn:
- How computers represent text characters as numbers
- The evolution from ASCII to Unicode
- Why UTF-8 became the web standard
- How emojis and international characters work
- The connection between character encoding and web development
Why this matters for web developers: Maybe it doesn't on a day to day basis, but hopefully you have an appreciation for the complexity behind something as simple as typing text on a webpage. Understanding this helps you avoid common character encoding issues.
Fun Fact: UTF-8 even includes constructed languages like Klingon from Star Trek! This universal approach to character encoding - representing all forms of human communication, real or imagined - is actually foundational to modern AI translation systems. When you use Google Translate or ChatGPT to translate between languages, those systems rely on the same Unicode standard that makes Klingon text possible. In a way, UTF-8's inclusivity is an early step toward the "universal translators" we see in science fiction!
What Programming Really Is
Before we dive deeper into JavaScript, it's worth understanding what programming actually means. This excellent introduction from Eloquent JavaScript provides crucial context:
Introduction: What is Programming?
Because computers are dumb, pedantic beasts, programming is fundamentally tedious and frustrating.
Marijn Haverbeke
Key takeaway: Programming is fundamentally about instructing computers to solve problems, step by step, in a language they can understand. It can be frustrating and requires patience and persistence, just like most things worth doing well.
Terminal Skills Reinforcement
Since you'll be using the terminal regularly in your development work, let's reinforce and expand your command line skills by working through these 3️⃣ sections of Mozilla's documentation 📝:
- Basic Built-in Terminal Commands
- After that section, you can skip down to Connecting Commands Together With Pipes.
- Continue on with A Slightly More Complex Example.
Focus areas: File navigation, directory creation, file manipulation, and understanding file paths.
How the Web Actually Works
Now that you understand how computers process information, let's explore how the web functions:
This will help you understand the journey from typing a URL to seeing a webpage.
How Browsers Load Websites
Finally, let's dive into the specific process of how browsers take your HTML, CSS, and (soon) JavaScript and turn them into the interactive websites users see:
Hands-On Application
HW: Connecting the Dots Exercise
Note: Now that you have learned about MD, I will no longer accept MS Word documents for your assignments. You are to use GitHub gists with a shared link 🔗, or you can use Dillinger or any thing else that renders Markdown and that you can share as a link 🔗. This applies to all documents, reflections or otherwise, going forward.
After reviewing all the resources above, complete this progression exercise:
-
Binary Reflection:
- Write a paragraph about what surprised you most in Todd's video
- Explain binary in your own words (pretend you're teaching a friend)
-
Terminal Practice:
- Try 5 new commands or variations of the examples from the MDN terminal guide. In other words, make up your own examples and/or use Warp to learn 5 additional even more advanced commands.
- Take a screenshot of what you did and/or make a brief video of what you did and what you learned from it.
-
Web Journey Mapping:
- Draw or describe (in text) the complete journey of what happens when you type "google.com" in your browser. If you do a drawing, you can just snap it on your phone and upload it to BrightSpace.
- Include: DNS lookup, server communication, file transfer, browser parsing, rendering
- For this one, you are to take a 'selfie style video,' as if you are answering a question in an interview. You should not be nor should you sound like you are just reading a script from the screen, so use your mobile device for this. Preferably, your video should be submitted as a link that I can open up, however you want to share it (e.g. private YouTube link 🔗). I should not have to download a whole video file to grade it.
-
Personal Connection:
- Write about how this knowledge changes your perspective on the websites you've built
- What questions do you now have about web development that you would like answered at some point in this course?
Advanced Concepts & Comparisons
Why This Knowledge Matters for JavaScript
Understanding these fundamentals will help you when we start writing JavaScript because:
- Variables store data in computer memory (now you know what that means)
- Functions are instructions we give the computer (building on programming concepts)
- DOM Manipulation changes how the browser renders pages (now you understand the rendering process)
- Events respond to user interactions (which you now know trigger browser processes)
Performance Implications
Now that you understand how browsers load websites, you can appreciate why:
- File size matters: Larger files take longer to download and parse
- Code organization matters: Browsers parse HTML, CSS, and JavaScript in specific orders
- Optimization techniques exist: Developers use various strategies to make sites load faster
Troubleshooting & Best Practices
Common Misconceptions
"Computers are magic": No - they're logical machines following precise instructions "The web is instant": Actually involves multiple steps and network communication "Programming is just typing code": It's really about problem-solving and logical thinking
Building Mental Models
Use these analogies to remember key concepts:
- Binary: Like a light switch (on/off, 1/0)
- Web requests: Like mailing a letter and getting a response
- Browser rendering: Like following assembly instructions to build furniture
Next Steps
In our next lesson, we'll start applying this foundational knowledge by diving into JavaScript fundamentals - variables, data types, and basic operations. You'll see how the binary concepts Todd explained translate into the code you write!
Remember: Every professional developer started (or should have started) by learning these fundamentals. Understanding how computers and the web work gives you the context to become not just a coder, but a true developer who understands something about the systems they're building on.