How Does Web Development Actually Work? Explained Simply

# See the raw HTTP conversation (Windows 10+, macOS and Linux have curl)
curl -I https://example.com

# Typical response headers:
# HTTP/2 200
# content-type: text/html; charset=UTF-8
# ...

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

COMMON HTTP STATUS CODES

200 OK                   Request worked
201 Created              New item saved (e.g. after a form)
301 Moved Permanently    Page has a new address
304 Not Modified         Use your cached copy
400 Bad Request          The request was malformed
401 Unauthorized         You need to log in
403 Forbidden            Logged in, but not allowed
404 Not Found            Page or item does not exist
500 Internal Server Error  Bug or crash on the server

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My First Page</title>
  <style>
    body { font-family: sans-serif; margin: 2rem; }
    .price { color: green; font-weight: bold; }
  </style>
</head>
<body>
  <h1>Notebook</h1>
  <p class="price">₹120</p>
  <button id="buy">Add to cart</button>
  <p id="message"></p>
  <script src="app.js"></script>
</body>
</html>

// app.js — send data to a backend API when the button is clicked
document.querySelector("#buy").addEventListener("click", async () => {
  const response = await fetch("http://127.0.0.1:8000/cart", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ item: "Notebook", qty: 1 }),
  });
  const data = await response.json();
  document.querySelector("#message").textContent = data.message;
});

# server.py — pip install fastapi uvicorn
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel

app = FastAPI()
app.add_middleware(CORSMiddleware, allow_origins=["*"],
                   allow_methods=["*"], allow_headers=["*"])  # demo only

class CartItem(BaseModel):
    item: str
    qty: int

@app.post("/cart")
def add_to_cart(cart_item: CartItem):
    return {"message": f"Added {cart_item.qty} x {cart_item.item} to your cart"}

# Run: uvicorn server:app --reload   (serves on http://127.0.0.1:8000)

-- What the backend might store in a real app
CREATE TABLE cart_items (
  id SERIAL PRIMARY KEY,
  user_id INT NOT NULL,
  item TEXT NOT NULL,
  qty INT NOT NULL CHECK (qty > 0),
  added_at TIMESTAMP DEFAULT NOW()
);

INSERT INTO cart_items (user_id, item, qty)
VALUES (42, 'Notebook', 1);

SELECT item, qty FROM cart_items WHERE user_id = 42;

REQUEST TRACER (use browser DevTools > Network)

Website          : ____________________
First request    : ____  Status: ___  Time: ___ ms
Number of requests on load: ___
Largest file     : ____________ (___ KB)
Any API calls?   : ____________ (returns JSON? Y/N)
Any 4xx/5xx errors: ___
What I learned   : ____________________

BEGINNER ROADMAP

Step 1  HTML structure and forms
Step 2  CSS layout: Flexbox, Grid, responsive design
Step 3  JavaScript: DOM, events, fetch
Step 4  Git and GitHub
Step 5  One backend language (Python or Node.js)
Step 6  SQL and one database
Step 7  REST APIs: build and call them
Step 8  A frontend framework (e.g. React)
Step 9  Deploy a full project with HTTPS

FIRST PROJECT PLAN

Idea          : ____________ (e.g. recipe saver)
Pages         : home, list, add form
Frontend      : HTML, CSS, JavaScript
Backend       : ____________ (2-3 API routes)
Database      : one table: ____________
Deploy to     : ____________
Done when     : I can add an item and see it after refresh