How Websites Work

contain

What is a Website?

Think About It...

Open a few tabs and visit:

  • google.com
  • instagram.com
  • docs.google.com
  • babson.edu
  • Your username.github.io

What do they have in common? What's different?

Website vs Web App?

Website Web App
Mostly displays information Lets you do things
News sites, portfolios, blogs Gmail, Google Docs, Figma
Read-focused Interactive, task-focused
Static or simple dynamic Complex functionality

The line is blurry! Many "websites" are actually "web apps"

Discussion: What Can You Build?

Simple websites

  • Personal portfolio
  • Blog
  • Landing page
  • Documentation

Interactive web apps

  • Calculator
  • To-do list
  • Quiz game
  • Budget tracker

You'll be able to build ALL of these by the end of this course!

Explore: What's Under the Hood?

Exercise: Right-click on any webpage → "View Page Source"

  • What do you see?
  • Is it readable?
  • Can you find any text from the page?

Every website you visit is just text files that your browser interprets!

What Happens When You Enter a URL?

Anatomy of a URL

https://www.babson.edu/academics/index.html (just an example)

  • https:// - Protocol (secure HTTP)
  • www.babson.edu - Domain name (where to go)
  • /academics/index.html - Path (which page)

URL Examples

URL What it means
babson.edu Domain only (goes to default page)
babson.edu/about Path to "about" section
babson.edu/about/ Folder (usually shows index.html)
babson.edu/page.html Specific file

The domain tells you WHERE, the path tells you WHAT

The Journey of a Web Request

When you type https://www.babson.edu and press Enter:

  1. DNS Lookup - Find the server's IP address
  2. HTTP Request - Your browser asks for the page
  3. Server Response - The server sends back files
  4. Browser Rendering - Your browser displays the page

Step 1: DNS Lookup

DNS = Domain Name System (the "phone book" of the internet)

  • You type: www.babson.edu
  • DNS translates it to: 166.117.19.175 (IP address)

Computers use IP addresses, but humans prefer readable names.

Step 2: HTTP Request

HTTP = HyperText Transfer Protocol

Your browser sends a request to the server:

GET /index.html HTTP/1.1
Host: www.babson.edu

Common HTTP methods:

  • GET - retrieve data (loading a page)
  • POST - send data (submitting a form)

Step 3: Server Response

The server sends back a response:

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

<!DOCTYPE html>
<html>...

Status codes:

  • 200 - OK (success)
  • 404 - Not Found
  • 500 - Server Error

Demo: See What the Browser Downloads

curl -i https://example.com

This is exactly what your browser does - it downloads text!

The browser just makes it look pretty by interpreting the HTML/CSS/JS.

Step 4: Browser Rendering

The browser receives files and displays them:

  1. Parse HTML → build the DOM (structure)
  2. Parse CSS → apply styles
  3. Execute JavaScript → add interactivity
  4. Render → display to screen

The Big Picture

You (Browser)              Internet              Server
     |                        |                    |
     |-- DNS: babson.edu? --->|                    |
     |<- IP: 166.117.19.175 ->|                    |
     |                        |                    |
     |-- GET /index.html -----|----------------->  |
     |                        |                    |
     |<---- HTML, CSS, JS ----|------------------  |
     |                        |                    |
   [Render page]              |                    |

Demo: See the Network in Action

Your Computer's Network Info

Open Terminal (Mac) or Command Prompt (Windows):

# Windows
ipconfig

# Mac
ifconfig

Look for:

  • Your IP address
    • Often looks like 192.168.x.x or 10.x.x.x at home
    • On campus or corporate networks, it may be a public IP
  • Your active network adapter (Wi-Fi or Ethernet)

Demo: DNS Lookup

nslookup www.babson.edu

What you'll see:

  • The IP address that www.babson.edu resolves to
  • The DNS server that answered your query

Demo: Ping a Server

ping www.babson.edu

What you'll see:

  • Response time in milliseconds (ms)
  • Whether the server is reachable

Press Ctrl+C to stop

Demo: Trace the Route

# Windows
tracert www.google.com

# Mac
traceroute www.google.com

What you'll see:

  • Every "hop" (router) between you and the destination
  • How many steps it takes to reach the server
  • Response time at each hop

This shows the physical journey of your data across the internet!

What These Commands Show

Command What it does
ipconfig / ifconfig Your computer's network settings
nslookup Look up a domain's IP address
ping Test if a server is reachable
tracert / traceroute Show the path to a server

You don't need to memorize these - just know they exist for debugging!

Client vs Server

Client-Side vs Server-Side

Client-Side (Frontend) Server-Side (Backend)
Runs in the browser Runs on the server
HTML, CSS, JavaScript Python, Node.js, PHP, etc.
What users see and interact with Data processing, databases
This course focuses here We'll touch on this briefly

Static vs Dynamic Websites

Static website:

  • Same content for everyone
  • Just HTML, CSS, JS files
  • GitHub Pages, Netlify

Dynamic website:

  • Content changes (user accounts, databases)
  • Server generates HTML on request
  • Requires backend programming

We'll build static websites that feel dynamic using JavaScript!

The Three Languages of the Web

HTML, CSS, and JavaScript

Language Role Analogy
HTML Structure & Content The skeleton
CSS Styling & Layout The clothes
JavaScript Behavior & Interactivity The muscles

Every website uses these three together.

Chrome DevTools

Opening DevTools

Keyboard shortcuts:

  • F12
  • Ctrl + Shift + I (Windows)
  • Cmd + Option + I (Mac)

Or: Right-click → "Inspect"

DevTools Panels

Panel What it shows
Elements HTML structure & CSS styles
Console JavaScript errors & output
Network HTTP requests & responses
Sources All the code files

Elements Panel

  • Shows the HTML tree (DOM) of the page
  • Click any element to see its CSS
  • You can edit HTML and CSS live!
  • Changes are temporary (refresh to reset)

Try it: Right-click any element → Inspect → change its color!

Network Panel

  • Shows every file the browser downloads
  • See HTTP requests and responses
  • Check status codes (200, 404, etc.)
  • See how long files take to load

Try it: Open Network → refresh the page → watch the requests!

Console Panel

  • Shows JavaScript errors (red)
  • Shows warnings (yellow)
  • You can run JavaScript here
  • Great for debugging

Try it: Type document.title and press Enter

Quick Reference

What you want Where to look
See HTML structure Elements panel
See/edit CSS Elements → Styles
Find JS errors Console panel
See HTTP requests Network panel
Test JS code Console panel

Learn More