General Assembly logo

Introduction to the Web and Developer Workflow

Session Time: 120 minutes

Table of Contents

  1. How the Web Works & the Client-Server Architecture
  2. Web Terminologies
  3. How Browsers Render the Web
  4. Introduction to Browser Developer Tools
  5. Leveraging AI to Understand the Web
  6. Lab: Exploring the Web Ecosystem
  7. Wrap-Up and Reflection

Learning Objectives

Upon completion of this session, participants will be able to:

  • Analyze how web requests and responses function within the client-server architecture.
  • Identify and explain browser developer tools used for inspecting code.
  • Utilize AI tools to evaluate and clarify network and rendering processes.

Session Breakdown

Segment Topic Duration (minutes)
1 How the Web Works & the Client-Server Architecture 15
2 Web Terminologies 15
3 How Browsers Render the Web 15
4 Browser Developer Tools & AI Integration 30
Practical Lab Lab: Exploring the Web Ecosystem 45
Total 120 minutes

1. How the Web Works

Learning objective: Analyze how websites function within the client-server architecture.

When we connect to the internet using any of our devices such as mobile phones or computers, we're actually accessing the World Wide Web (usually called the Web). It consists of a vast network of computers which are inter-connected (also known as the Internet). The internet can be accessed using web browsers such as Chrome, Safari, Firefox etc.

At its core, the World Wide Web operates on a client-server model.

  • The Client: This is usually your web browser (Chrome, Firefox, Safari) running on your computer or phone. The client requests information.

  • The Server: A powerful remote computer that stores web site files (HTML, CSS, Images). The server responds with information.

sequenceDiagram
    participant C as Client (Browser)
    participant S as Server (Remote Computer)

    Note left of C: User types www.example.com
    C->>S: 1. HTTP Request (GET)
    
    Note right of S: Server looks for files<br/>(HTML, CSS, Images)
    S-->>C: 2. HTTP Response (Status 200 OK)
    
    Note left of C: Browser receives data<br/>and begins rendering

The Client-Server Architecture (In-Depth)

A user's web browser (the client) initiates a request for information. This request travels across the internet, first resolving the human-readable web address into a machine-readable IP address using a Domain Name System (DNS) server. Once the location is known, the browser sends an HTTP request to the target web server. The server processes this request and sends back the website data (usually HTML, CSS, and images), which the browser then renders into a viewable page for the user.

sequenceDiagram
    autonumber
    actor User
    participant Browser as Client (Web Browser)
    participant DNS as DNS Server
    participant Server as Web Server

    User->>Browser: Enters URL (e.g., www.example.com)
    rect rgb(240, 248, 255)
    note right of Browser: Domain Resolution Phase
    Browser->>DNS: Request IP for "www.example.com"
    DNS-->>Browser: Returns IP Address (e.g., 93.184.216.34)
    end

    rect rgb(255, 250, 240)
    note right of Browser: Data Transfer Phase
    Browser->>Server: Send HTTP GET Request to IP Addr
    Note over Server: Server receives request,<br/>finds/generates the page
    Server-->>Browser: Send HTTP Response (HTML/Content with Status 200 OK)
    end

    Browser->>User: Renders final webpage onto screen

The Request-Response Cycle

This communication follows a strict set of rules called HTTP (HyperText Transfer Protocol).

  1. Request: You type www.example.com and hit enter. Your browser sends a message to the server asking for the page.
  2. Processing: The server receives the request, looks for the requested files, and prepares them.
  3. Response: The server sends the files back to the browser along with a Status Code.

Common Status Codes:

  • 200 OK: Success! Here is the page.
  • 404 Not Found: The server couldn't find what you asked for.
  • 500 Internal Server Error: Something went wrong on the server's side.

Analogy: The Restaurant

Think of the web like a restaurant:

  • You (Client): You look at the menu and order a dish (The Request).
  • Waiter (HTTP): Takes your order to the kitchen and brings the food back.
  • Kitchen (Server): Cooks the food (The Data/Files) and plates it.
  • The Food (Response): The actual website content delivered to your table.

2. Web Terminologies

Web Browser (The Client)
Software installed on your device (e.g., Chrome, Firefox, Safari) that acts as the interface between you and the internet. Its job is to request information and "render" (display) it in a readable format.
Web Server (The Host)
A powerful computer or software system that stores website files (images, text, code) and waits for requests from browsers. When it receives a request, it delivers the necessary files
HTTP (The Language)
Standing for HyperText Transfer Protocol, this is the standardized set of rules used for communication. It defines how messages are formatted and transmitted so the Browser and Server can understand each other.
HTML (The Structure)
HyperText Markup Language is the raw content of a webpage. It defines the structure and meaning of the content (e.g., "This is a headline," "This is a paragraph," "This is an image").
CSS (The Style)
Cascading Style Sheets determine how the HTML looks. It handles colors, fonts, layouts, and spacing (e.g., "Make the headline blue and center it").

How They Relate

The diagram below illustrates the relationship: The Browser uses HTTP to talk to the Server. The Server replies with HTML (the skeleton) and CSS (the skin), which the Browser then assembles for the user.

Browser HTTP

3. How Browsers Render the Web

Learning objective: Analyze how web requests and responses function within the client-server architecture.

Once the browser receives the "food" (the HTML code) from the server, it has to "eat" (render) it so you can see a visual website.

What is the Document Object Model (DOM) ?

The Document Object Model (DOM) is the browser's internal map of a webpage.

When you write code, it is just text in an HTML file. However, when a browser (like Chrome) loads that file, it converts that text into a living, interactive structure in its memory. This structure is called the DOM.

Think of it like this:

  • The HTML file is the architectural blueprint (flat, static instructions).
  • The DOM is the actual 3D model of the house built from those blueprints.

If you want to move a window or paint a wall after the house is built (i.e., change the page using JavaScript), you don't change the blueprint; you change the model.

Key Characteristics

  1. It is a Tree: The DOM organizes the page hierarchically (a "tree structure"). The main "trunk" is the Document, which branches into the HTML tag, which branches into the Body, and so on.
  2. It is an Interface: The DOM acts as a bridge. It allows programming languages like JavaScript to connect to the webpage to change text, styles, or layout on the fly.
  3. It is Object-Oriented: Every part of the page (a paragraph, a link, an image) is converted into an "object" (a distinct item) that the browser can identify and manipulate.

The Browser and DOM Tree Relationship

The diagram below shows how the Browser takes static HTML, turns it into the DOM, and how that DOM creates the specific tree structure for the content.

graph TD
    subgraph Browser_Memory [Inside the Web Browser]
        direction TB
        
        %% The Process Flow
        HTML_File[<b>Static HTML File</b><br/>The Code] -->|Browser parses content| DOM_API
        DOM_API[<b>The DOM</b><br/>The Live Interface]
        JS[<b>JavaScript</b><br/>The Logic] -->|Selects & Changes| DOM_API
        
        %% The Resulting Tree Structure
        subgraph The_DOM_Tree [The DOM Tree Structure]
            direction TB
            Document((Document)) --> Root[html]
            Root --> Head[head]
            Root --> Body[body]
            
            Head --> Title[title]
            Title --> Text1["My Page"]
            
            Body --> H1[h1]
            Body --> P[p]
            Body --> Button[button]
            
            H1 --> Text2["Hello World"]
            P --> Text3["This is a paragraph"]
        end
        
        DOM_API -.->|Organizes data as| Document
    end

How to Read This Diagram

  1. Top Layer: Shows the workflow. The Browser reads the HTML file and constructs the DOM. JavaScript does not touch the file; it touches the DOM.
  2. Bottom Layer: Shows the structure.
    • Document: The starting point (root).
    • Nodes: Every box is a "Node." The <body> is the parent of the <h1> and <p> tags (which are siblings).
    • Text: Even the text inside a tag ("Hello World") is a leaf node at the very bottom of the branch.

The Rendering Path

Computers do not "see" websites; they read code. 

graph TD
    A[Raw HTML Text] -->|1. HTML Parsing| B(DOM Construction)
    B -->|2. Analysis| C{DOM Ready?}
    C -->|Yes| D[3. Layout / Reflow]
    D -->|Calculate Positions| E[4. Painting]
    E -->|Fill Pixels| F[Final Visual Website]
    
    style A fill:#f9f,stroke:#333,stroke-width:2px
    style F fill:#9f9,stroke:#333,stroke-width:2px

The browser performs several steps to convert text into pixels:

  1. HTML Parsing: The browser reads the HTML raw text.
  2. DOM Construction: It creates the Document Object Model (DOM). This is a tree-like structure representing every element on the page.
  3. Layout: The browser calculates how much space each element takes up and where it belongs on the screen.
  4. Painting: The browser fills in the pixels (colors, text, images).

Note: AI tools are incredibly useful here. You can paste a snippet of raw HTML code into an AI and ask, "Visualize how this code will be rendered in the DOM tree."

Sample AI output.

Here is the visualization of your specific HTML code snippet as a DOM tree.

The Code

<body>
  <div>
    <h1>My webpage</h1>
    <p>Let's learn html</p>
  </div>
</body>

The DOM Tree Visualization

In this diagram, the Tags (Elements) are represented by the square boxes, and the actual Content (Text Nodes) are represented by the rounded shapes at the bottom.

graph TD
    %% Nodes
    Body[<b>body</b><br/>Parent]
    Div[<b>div</b><br/>Child of Body]
    H1[<b>h1</b><br/>Sibling A]
    P[<b>p</b><br/>Sibling B]
    
    %% Text Nodes
    Text1("My webpage")
    Text2("Let's learn html")

    %% Relationships
    Body --> Div
    Div -->|Contains| H1
    Div -->|Contains| P
    
    H1 -.->|Text Node| Text1
    P -.->|Text Node| Text2
    
    %% Styling to distinguish types
    style Text1 fill:#e1f5fe,stroke:#01579b
    style Text2 fill:#e1f5fe,stroke:#01579b
    style Body fill:#fff3e0,stroke:#e65100

Key Relationships in this Snippet

  1. The Container: The <div> is the Parent of both the <h1> and the <p> tags.
  2. The Siblings: The <h1> and <p> are Siblings because they live inside the same parent (div).
  3. The Leaves: The text "My webpage" and "Let's learn html" are the Text Nodes (leaves). They are the children of their respective tags.

4. Introduction to Browser Developer Tools

Learning objective: Identify and explain browser developer tools used for inspecting code.

Every modern web browser comes with a built-in suite of tools for developers called DevTools. These allow you to look "under the hood" of any website.

Key Panels in DevTools

To access DevTools: Right-click any element on a webpage and select Inspect.

Tab/Panel Purpose Use Case
Elements Shows the HTML (DOM) and CSS currently on the page. Modifying text or colors live to test changes.
Console Shows JavaScript logs and errors. Debugging broken interactivity.
Network Shows all requests (images, files) loading in the background. Checking if an image failed to load or how fast the site is.

The Role of AI in Debugging

Learning objective: Utilize AI tools to evaluate and clarify network and rendering processes.

DevTools give you data, but AI helps you understand it.

Example Scenario: You open the Network Tab and see a red text that says 403 Forbidden.

  • Without AI: You might search Google for "403 error meaning."
  • With AI: You can describe the context: "I am trying to load an image on my website, but the Network tab shows a 403 Forbidden status. What does this mean and how do I fix it?"

The AI will explain that 403 usually means the server knows who you are but you don't have permission to access the resource, often due to file permission settings.

5. Lab: Exploring the Web Ecosystem

Learning objective: Investigate how websites load and render using browser DevTools. Use an AI assistant to explain HTTP requests, responses, and HTML rendering, documenting insights in a brief technical report.

Overview

In this lab, you will act as a "Web Detective." You will use browser DevTools to inspect a live website and use an AI assistant to interpret the technical data you find.

Part 1: Inspecting the DOM

Inspecting the Wikipedia DOM using Chrome

  1. Open a browser (Chrome is recommended) and navigate to a simple website (e.g., wikipedia.org).
  2. Right-click on the main logo or heading and select Inspect.
  3. The Elements panel will open. Hover over the HTML tags and watch how the browser highlights the corresponding section on the page.
  4. Action: Double-click a text section inside the HTML pane and change the text to your name. Press Enter.
    • Observation: Notice the webpage changes instantly. (Note: This only changes it on your computer, not the real Wikipedia!)

Part 2: Analyzing Network Traffic

Analyzing Network Traffic

  1. Click the Network tab in DevTools.
  2. Refresh the page (Cmd+R or Ctrl+R).
  3. Watch the waterfall of requests. You will see .html, .png, .css, and .js files appearing.
  4. Click on the very first item in the list (usually the name of the website).
  5. Look for the Headers section on the right/bottom. Find the Status Code.

Part 3: AI-Assisted Analysis

  1. Take a screenshot or copy the headers from the Network request you found in Part 2.
  2. Open your AI assistant (ChatGPT, Claude, Gemini, etc.).
  3. Prompt the AI:

    "I am a student learning web development. I am looking at the network headers for a request to Wikipedia. The status code is 200 and the Request Method is GET. Can you explain in simple terms what happened between my browser and the server to generate this result?"

  4. Challenge: Find a file in the network tab that isn't the main HTML (like an image). Ask the AI: "How does the browser know where to place this image if it loads separately from the HTML?"

Deliverable: Technical Report

Write a short (1-2 paragraph) report summarizing your findings. Include:

  • What happens when you modify the DOM in the Elements panel.
  • What a "200 OK" status code implies.
  • The AI's explanation of how the browser handles separate image files.

5. Wrap-Up and Reflection

Discussion Questions:

  1. Why do you think the Elements panel shows the "DOM" and not just the original HTML file you wrote? (Hint: Think about what happens when you use JavaScript to change things).
  2. How did the AI help clarify the technical terms found in the Network tab?
  3. What is the difference between a Client and a Server in the context of ordering food at a restaurant?

Resources