Chapter 1: Internet as a Consumer 🌐
"Understanding how the web works from a user's perspective is the first step to becoming a developer."
What happens when I type "youtube.com"? 🔍
When you enter a website address in your browser and press Enter, a complex series of events unfolds in milliseconds:
Step-by-Step Breakdown:
- DNS Lookup: Your browser needs to find where "youtube.com" is located on the internet
Domain Name: youtube.com ➡️ IP Address: 208.65.153.238
- HTTP Request: Your browser sends a message to YouTube's servers
GET / HTTP/1.1 Host: youtube.com User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) Accept: text/html,application/xhtml+xml,application/xml
- Server Processing: YouTube's computers receive your request and prepare a response
- HTTP Response: The server sends back the requested data
HTTP/1.1 200 OK Content-Type: text/html; charset=utf-8 Content-Length: 128000 <!DOCTYPE html> <html> <head>...</head> <body>...</body> </html>
- Rendering: Your browser processes the HTML, CSS, and JavaScript to display the YouTube page
Learn fundamental concepts 📚
To truly understand the internet, familiarize yourself with these core concepts:
URLs (Uniform Resource Locators)
A URL is the address of a specific resource on the web. Let's break down a YouTube video URL:
https://www.youtube.com/watch?v=dQw4w9WgXcQ
└─┬─┘ └───┬───┘ └─┬─┘ └────────┬────────┘
scheme host path query string
- Scheme:
https://- The protocol used (secure HTTP)
- Host:
www.youtube.com- The domain name of the website
- Path:
/watch- The specific page or resource
- Query String:
?v=dQw4w9WgXcQ- Additional parameters (the video ID)
HTTP (HyperText Transfer Protocol)
HTTP is the language that browsers and servers use to communicate:
Common Request Methods:
| Method | Purpose | Example Use |
| GET | Request data | Loading a webpage |
| POST | Submit data | Submitting a form |
| PUT | Update data | Editing your profile |
| DELETE | Remove data | Deleting a comment |
Response Status Codes:
// Common HTTP status codes and their meanings
const statusCodes = {
200: "OK - Request succeeded",
301: "Moved Permanently - Resource has a new URL",
400: "Bad Request - Server couldn't understand the request",
404: "Not Found - The resource doesn't exist",
500: "Server Error - Something went wrong on the server"
};
// You'll see these in the Network tab of developer tools
Core Web Technologies
The modern web is built on three fundamental technologies:
- HTML - Structure and content
<!DOCTYPE html> <html> <head> <title>My First Webpage</title> </head> <body> <h1>Hello World!</h1> <p>This is a paragraph.</p> </body> </html>
- CSS - Styling and layout
/* This makes the heading red and centered */ h1 { color: red; text-align: center; } /* This gives paragraphs a light gray background */ p { background-color: #f0f0f0; padding: 10px; }
- JavaScript - Interactivity and behavior
// This code runs when you click a button document.querySelector('button').addEventListener('click', function() { alert('You clicked the button!'); });
Cookies and Storage
Websites store information in your browser:
// Setting a cookie
document.cookie = "username=john_doe; expires=Fri, 31 Dec 2025 23:59:59 GMT";
// Using localStorage
localStorage.setItem('theme', 'dark');
const savedTheme = localStorage.getItem('theme');
Open the developer console 🔧
Modern browsers include powerful developer tools that let you inspect and interact with websites:
How to access the developer console:
- Windows/Linux: Press
F12orCtrl+Shift+I
- macOS: Press
Cmd+Option+I
- Alternative: Right-click anywhere on a webpage and select "Inspect" or "Inspect Element"
Exploring the developer console tabs:
Elements Tab
The Elements tab shows you the HTML structure and CSS styles of the current page:
<!-- This is what you might see in the Elements tab -->
<div class="video-container">
<video src="cat-video.mp4" controls></video>
<div class="video-info">
<h2>Cute Cat Compilation</h2>
<p class="views">1.2M views</p>
</div>
</div>
Try this: Right-click on any element on a webpage and select "Inspect" to jump directly to it in the Elements tab.
Console Tab
The Console tab lets you execute JavaScript and see error messages:
// Try these commands in the Console tab
document.title // Shows the page title
document.querySelectorAll('img').length // Counts images on the page
console.log('Hello, World!') // Outputs text to the console
Try this: Visit a website and type document.body.style.backgroundColor = 'lightblue' in the Console tab, then press Enter.
Network Tab
The Network tab shows all requests between your browser and web servers:
Try this: Open the Network tab and refresh a webpage. Watch how many requests are made and how long each one takes.
Application Tab
The Application tab lets you examine cookies, local storage, and other data stored by websites:
// Checking localStorage in the Application tab
// You can view and modify these values directly in the interface
{
"theme": "dark",
"volume": "75",
"recentSearches": "[\"javascript tutorial\",\"how to code\"]"
}
Try this: Look at what cookies are stored by your favorite websites in the Application tab.
Practice exercises:
- Visit three different websites and open the developer console
- Compare how many requests each site makes in the Network tab
- Find a form on a website and inspect its HTML structure
- Look for JavaScript errors in the Console tab
- Check what data websites store in your browser using the Application tab
Pro Tip: The developer console is your window into how websites work. Get comfortable using it - it's a crucial tool for debugging and learning web development.
What you've learned:
- How browsers communicate with web servers
- The fundamental technologies of the web
- How to use the developer console to peek behind the scenes
Coming up next: In Chapter 2, we'll explore the internet from a developer's perspective, building on these consumer concepts.