Web Basics: How the Web Works

The Core Components:

1. Browser (Client): Software that displays web content (Chrome, Firefox, Safari, Edge)

2. Server: A computer that stores websites and serves content upon request

3. HTTP/HTTPS: Protocol (rules) for communication between browser and server

The Request-Response Cycle:

1. User Action: You type a URL (e.g., https://example.com) in the browser

2. DNS Lookup: Browser finds the server's IP address (like 192.0.2.1)

3. HTTP Request: Browser sends "GET /index.html" to the server

4. Server Processing: Server processes the request (finds file, runs code if needed)

5. HTTP Response: Server sends back HTML + status code (200 = OK, 404 = Not Found)

6. Rendering: Browser displays the received content

Core Web Technologies

HTML (HyperText Markup Language)

• Purpose: Structure and content of a webpage

• Role: Skeleton of the webpage

• Example: Defines headings, paragraphs, images, links

html

<h1>Welcome</h1>
<p>This is a paragraph.</p>
<img src="photo.jpg" alt="A photo">

CSS (Cascading Style Sheets)

• Purpose: Styling and layout

• Role: Visual appearance (colors, fonts, spacing)

• Example: Makes HTML elements look attractive

css

h1 {
  color: blue;
  font-size: 24px;
}
p {
  color: gray;
}

JavaScript

• Purpose: Adds interactivity and dynamic behavior

• Role: Makes webpages interactive and responsive

• Example: Form validation, animations, dynamic content updates

javascript

document.getElementById("myButton").addEventListener("click", function() {
  alert("Button clicked!");
});

Frontend vs Backend

Frontend (Client-side)

• What: Everything users see and interact with directly

• Technologies: HTML, CSS, JavaScript

• Developers: Frontend Developers

• Responsibilities:

  • User interface design

  • Responsiveness across devices

  • Client-side validation

  • Interactive elements

Backend (Server-side)

• What: "Behind the scenes" logic, data storage, and processing

• Technologies: Python, Java, PHP, Node.js, Ruby, databases (MySQL, MongoDB)

• Developers: Backend Developers

• Responsibilities:

  • Server logic and APIs

  • Database management

  • User authentication

  • Server security

Communication: Frontend ↔ Backend via HTTP requests/responses (often using JSON data format)

Static vs Dynamic Websites

Static Websites

• Content: Fixed, same for all users

• How it works: Server sends pre-built HTML files

• Technology: HTML, CSS, maybe basic JavaScript

• Use Cases: Brochure sites, portfolios, documentation

• Pros: Faster loading, simpler to host, more secure

• Cons: No personalization, manual updates needed

Dynamic Websites

• Content: Changes based on user, time, or data

• How it works: Server generates HTML on-the-fly using programming logic

• Technology: HTML + CSS + JavaScript + Backend language + Database

• Use Cases: Social media, e-commerce, web applications

• Pros: Personalization, user accounts, real-time updates

• Cons: More complex, slower, requires more resources

Real-World Analogy

Think of a restaurant:

• HTML = The structure (tables, chairs, menu items listed)

• CSS = The decor (colors, lighting, furniture style)

• JavaScript = Interactive elements (call button for waiter, digital menu)

• Frontend = What customers experience (dining area)

• Backend = Kitchen operations (cooking, inventory management)

• Static site = A printed menu

• Dynamic site = A digital menu showing today's specials based on available ingredients

Modern Web Development Evolution

Today's websites often use:

• Frameworks (React, Angular, Vue) for complex frontends

• APIs for data exchange between frontend/backend

• Progressive Web Apps (PWAs) that work like native apps

• SPAs (Single Page Applications) that load once and update dynamically

This ecosystem allows for everything from simple informational sites to complex web applications like Gmail, Facebook, or online banking systems.