The Road To Dev currently has AI-generated placeholder content. This is temporary - content is being actively developed.

Back
content

The Web Fundamentals

Understanding how the internet and World Wide Web work

The Web Fundamentals

Understanding how the web works is crucial for every web developer. This lesson covers the fundamental concepts of the internet, web protocols, and how browsers communicate with servers.

Learning Objectives

By the end of this lesson, you will understand:

  • The difference between the Internet and the World Wide Web
  • How data travels across the internet
  • The request/response cycle between browsers and servers
  • HTTP/HTTPS protocols and status codes
  • Domain names, DNS, and how URLs work

The Internet vs The World Wide Web

Many people use these terms interchangeably, but they're different:

The Internet

  • A global network of interconnected computers
  • The physical infrastructure (cables, routers, servers)
  • Established in the 1960s-70s
  • Supports many protocols (HTTP, FTP, email, etc.)

The World Wide Web (WWW)

  • A system of documents and resources accessed via the internet
  • Uses HTTP/HTTPS protocols
  • Created by Tim Berners-Lee in 1989
  • What you access through web browsers

Think of the internet as the highway system, and the web as the cars that travel on it.

How the Web Works: The Request/Response Cycle

When you type a URL in your browser, here's what happens:

1. DNS Lookup

User types: www.example.com
├── Browser asks DNS: "What's the IP address?"
├── DNS responds: "192.168.1.100"
└── Browser connects to that IP address

2. HTTP Request

The browser sends a request to the server:

GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0...
Accept: text/html,application/xhtml+xml

3. Server Processing

  • Server receives the request
  • Determines what resource is being requested
  • Processes any server-side code
  • Prepares the response

4. HTTP Response

Server sends back a response:

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1234


<!DOCTYPE html>
<html>
<head>...

5. Browser Rendering

  • Browser receives HTML
  • Parses and renders the content
  • Makes additional requests for CSS, JavaScript, images
  • Displays the final webpage

HTTP/HTTPS Protocols

HTTP (HyperText Transfer Protocol)

  • Application protocol for distributed information systems
  • Stateless protocol (each request is independent)
  • Uses port 80 by default

HTTPS (HTTP Secure)

  • HTTP over TLS/SSL encryption
  • Encrypts data in transit
  • Uses port 443 by default
  • Essential for sensitive data (passwords, payments)

HTTP Methods

GET     // Retrieve data
POST    // Send data to server
PUT     // Update existing data
DELETE  // Remove data
PATCH   // Partial update

HTTP Status Codes

1xx: Informational
100 Continue


2xx: Success
200 OK
201 Created
204 No Content


3xx: Redirection
301 Moved Permanently
302 Found (Temporary Redirect)
304 Not Modified


4xx: Client Error
400 Bad Request
401 Unauthorized
403 Forbidden
404 Not Found


5xx: Server Error
500 Internal Server Error
502 Bad Gateway
503 Service Unavailable

Domain Names and DNS

Domain Name System (DNS)

DNS translates human-readable domain names to IP addresses:

www.example.com → 192.168.1.100

Domain Structure

https://www.example.com/path/to/page.html
│     │ │   │      │   │
│     │ │   │      │   └── Path
│     │ │   │      └── Top-level domain (.com)
│     │ │   └── Second-level domain (example)
│     │ └── Subdomain (www)
│     └── Protocol (https)

Common Top-Level Domains (TLDs)

  • .com - Commercial
  • .org - Organization
  • .edu - Educational
  • .gov - Government
  • .io - Input/Output (popular with tech companies)

Types of Websites

Static Websites

  • Content doesn't change based on user interaction
  • HTML, CSS, and JavaScript files served directly
  • Fast and simple
  • Examples: Portfolio sites, documentation

Dynamic Websites

  • Content changes based on user input or data
  • Server processes requests and generates responses
  • Uses databases and server-side languages
  • Examples: Social media, e-commerce sites

Single Page Applications (SPAs)

  • One HTML page with JavaScript handling navigation
  • Content updates without full page reloads
  • Modern approach using frameworks like React
  • Examples: Gmail, Twitter web app

Web Browsers

How Browsers Work

  1. Parse HTML: Create Document Object Model (DOM)
  2. Parse CSS: Create CSS Object Model (CSSOM)
  3. Render Tree: Combine DOM and CSSOM
  4. Layout: Calculate positions and sizes
  5. Paint: Draw pixels on screen

Popular Browsers

  • Chrome: Google's browser, based on Chromium
  • Firefox: Mozilla's open-source browser
  • Safari: Apple's browser for Mac/iOS
  • Edge: Microsoft's modern browser

Browser Developer Tools

Essential for web development:

  • Console: Debug JavaScript and view errors
  • Elements: Inspect and modify HTML/CSS
  • Network: Monitor HTTP requests and responses
  • Performance: Analyze page load times
  • Application: Manage cookies, storage, service workers

Web Servers

What is a Web Server?

  • Software that serves web content to browsers
  • Handles HTTP requests and responses
  • Can serve static files or run server-side applications

Popular Web Servers

  • Apache: Open-source, widely used
  • Nginx: High-performance, good for static content
  • IIS: Microsoft's web server for Windows
  • Node.js: JavaScript server environment

Client-Side vs Server-Side

Client-Side (Frontend)

  • Runs in the user's browser
  • HTML, CSS, JavaScript
  • User interface and experience
  • Limited by browser capabilities

Server-Side (Backend)

  • Runs on web servers
  • Languages: Python, JavaScript (Node.js), PHP, Java, etc.
  • Database operations, business logic
  • Can access system resources

Security Considerations

Common Web Vulnerabilities

  • Cross-Site Scripting (XSS): Malicious scripts in web pages
  • SQL Injection: Malicious database queries
  • Cross-Site Request Forgery (CSRF): Unauthorized actions
  • Man-in-the-Middle: Intercepting communications

Security Best Practices

  • Always use HTTPS for sensitive data
  • Validate and sanitize user input
  • Keep software updated
  • Use secure authentication methods

Performance Considerations

Factors Affecting Website Speed

  • File sizes: Large images, CSS, JavaScript
  • Number of requests: Too many files to download
  • Server response time: Slow database queries
  • Network latency: Distance to server

Performance Optimization

  • Optimize images and compress files
  • Minimize HTTP requests
  • Use Content Delivery Networks (CDNs)
  • Enable caching

Practical Exercise: Inspect a Website

Let's examine how a real website works:

  1. Open Developer Tools (F12 in most browsers)
  2. Visit a website (try wikipedia.org)
  3. Go to Network tab and refresh the page
  4. Observe the requests:
    • What files are being downloaded?
    • What are the response codes?
    • How long do requests take?

Understanding URLs in Depth

URL Components

https://user:pass@www.example.com:443/path/to/page?name=value&foo=bar#section
│     │    │    │              │   │           │                  │
│     │    │    │              │   │           │                  └── Fragment
│     │    │    │              │   │           └── Query String
│     │    │    │              │   └── Path
│     │    │    │              └── Port
│     │    │    └── Host
│     │    └── Password
│     └── Username
└── Scheme/Protocol

Web Standards and Organizations

W3C (World Wide Web Consortium)

  • Develops web standards
  • HTML, CSS, accessibility guidelines
  • Ensures cross-browser compatibility

WHATWG (Web Hypertext Application Technology Working Group)

  • Develops HTML Living Standard
  • Focuses on practical web development needs

The Future of the Web

Emerging Technologies

  • Progressive Web Apps (PWAs): App-like web experiences
  • WebAssembly: High-performance code in browsers
  • Web Components: Reusable custom elements
  • HTTP/3: Next generation of HTTP protocol

Summary

Understanding how the web works provides the foundation for everything you'll build as a web developer. Key takeaways:

  • The web is a system of documents accessed via the internet
  • HTTP/HTTPS protocols govern how browsers and servers communicate
  • DNS translates domain names to IP addresses
  • Browsers parse HTML, CSS, and JavaScript to render web pages
  • Security and performance are crucial considerations

Next Steps

Now that you understand how the web works, you're ready to learn the command line tools that will make you a more efficient developer. In the next module, we'll master the terminal and command line interface.

Lesson Complete!

Great job! You've finished this lesson. Ready to continue?

Back to Module OverviewModule Overview