What Is Web Development? Beginner's Guide Explained (2026)

# See the raw HTTP response headers from a website
curl -I https://example.com

# Find the IP address behind a domain
nslookup example.com

1. You type example.com and press Enter
2. DNS returns the server's IP address
3. Browser sends: GET / over HTTPS
4. Server runs code, maybe queries a database
5. Server replies: 200 OK + HTML
6. Browser loads CSS, JavaScript and images
7. Page appears; JavaScript makes it interactive

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My First Page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hello, web!</h1>
  <button id="btn">Click me</button>
  <p id="msg"></p>
  <script src="script.js"></script>
</body>
</html>

/* style.css */
body { font-family: sans-serif; max-width: 600px; margin: 40px auto; padding: 0 16px; }
button { padding: 8px 16px; cursor: pointer; }

// script.js
document.getElementById("btn").addEventListener("click", () => {
  document.getElementById("msg").textContent = "You clicked the button!";
});

// npm init -y && npm install express
const express = require("express");
const app = express();

app.get("/api/hello", (req, res) => {
  res.json({ message: "Hello from the back end" });
});

app.listen(3000, () => console.log("http://localhost:3000"));

// In the browser: load data from the API
fetch("/api/hello")
  .then(response => response.json())
  .then(data => {
    document.getElementById("msg").textContent = data.message;
  });

Step 1: HTML + CSS - build 3 static pages
Step 2: Responsive design - flexbox, grid, media queries
Step 3: JavaScript - DOM, events, fetch
Step 4: Git + GitHub - push every project
Step 5: One back-end stack - Node.js or Python
Step 6: A database - SQL basics or MongoDB
Step 7: Full project - login, CRUD, deployment
Step 8: A framework - React (front end) if targeting jobs

1. Personal profile page (HTML/CSS)
2. Responsive landing page for a local shop
3. To-do list with JavaScript and localStorage
4. Weather or quiz app using a public API
5. Notes app with a back end and database
6. Portfolio site listing all of the above

# Project name
Live link: ______   Code: ______
## What it does
One or two lines.
## Built with
HTML, CSS, JavaScript (+ back end if any)
## What I learned
- ...
## Screenshots
(add 1-2 images)