COURSE - 00 / SCHEMATIC

Web & Web Development,
drawn out in full.

What the web actually is, why it matters more than ever, how a site gets built end to end, the APIs and tech stacks that hold it together - and how AI now changes the way you build all of it. (We are now preparing a better Web Development course designed for you, starting from the basics. We are coming soon with it !!)

Jump to build steps Skip to cheat sheets

Index

01 What is the Web / Web Dev 02 Why it matters now 03 How a website works 04 Building a site, step by step 05 APIs, explained 06 Tech stacks 07 Building with AI 08 Things to keep in mind 09 Cheat sheets 10 FAQ

01Foundations

What is the Web, and what is Web Development?

Two different things people mix up constantly — worth separating clearly before anything else.

The Web

The World Wide Web is a system of linked documents and applications that live on servers around the world and are accessed over the internet using a browser. It runs on a few core technologies — HTTP/HTTPS to transfer data, HTML to structure content, URLs to address it, and DNS to turn human-readable names into machine addresses. The internet is the network; the Web is one thing that runs on top of it (email and gaming servers are others).

Web Development

The craft of building things that live on the Web: websites, dashboards, e-commerce stores, social platforms, internal tools. It splits into frontend (what the user sees and clicks), backend (the logic and data behind the scenes), and increasingly a blurred middle layer of full-stack frameworks that handle both.

02Why it matters

Why the Web matters now — and what breaks without it

It's easy to take for granted precisely because it works so well. Strip it away and the gap is obvious.

With the Web

→ A business is reachable 24/7, from anywhere, without a physical storefront.
→ Anyone can publish, sell, teach, or organize at near-zero distribution cost.
→ Software updates instantly for every user — no install required.
→ Services scale from one user to millions on the same core system.
→ Information, education, and remote work become accessible globally.

Without it

→ Every business is limited to local foot traffic or paid ads offline.
→ Software ships on disks/files — updates are slow and manual.
→ No real-time collaboration, no instant messaging, no live data.
→ Discovery depends entirely on word of mouth or print media.
→ Remote work, global teams, and online learning mostly don't exist.

Knowing how to build for the Web means you can turn an idea into something anyone, anywhere, can use — without needing a factory, a warehouse, or a distributor. That leverage is why it's one of the most durable, in-demand skills to have today.

03Under the hood

How a website actually works

Three pieces talking to each other, every single time you load a page.

Zoomed in: the request lifecycle, one page load at a time

User clicks / types URL

DNS resolves domain → IP

Browser opens TLS connection

HTTP request sent

Server runs logic, queries DB

Server sends response

Browser parses HTML/CSS/JS

Page painted, interactive

04The build

Building & running a website, step by step

From a blank idea to a live URL — the same order applies whether it's a personal blog or a startup.

011–3 days

Plan & Define Scope

Write down the site's purpose, target users, and core pages. List required features vs 'nice to have'. Sketch a sitemap (Home → About → Products → Contact) before touching code.

✓ output: Sitemap, feature list, rough content outline

021–5 days

Wireframe & Design

Lay out each page's structure (header, hero, sections, footer) as boxes — pen and paper or Figma both work. Pick a type scale, a small color palette (3–5 colors), and spacing rules before you design pixel-perfect.

✓ output: Wireframes, color palette, typography scale, component list

03half a day

Choose Your Stack

Pick a frontend framework, a styling approach, and decide if you need a backend/database at all. For most content sites, a static site generator is enough. For apps with logins and data, you need a backend.

✓ output: Confirmed tech stack, repo initialized

04days–weeks

Build the Frontend

Turn wireframes into real markup and components: semantic HTML, CSS/Tailwind for layout, JS/TS for interactivity. Build mobile-first, then expand up to desktop breakpoints.

✓ output: Working UI, responsive across breakpoints

05days–weeks

Build the Backend & APIs

Design your data models, build REST or GraphQL endpoints, add authentication if needed, and connect your database. Keep business logic on the server; never trust data coming from the client.

✓ output: API routes, database schema, auth flow

06days

Connect Frontend ↔ Backend

Wire up fetch/axios calls or a data-fetching library to your API. Handle loading states, empty states, and errors — not just the happy path.

✓ output: Fully functional app end-to-end

07ongoing

Test

Manually click through every flow. Add unit tests for logic, integration tests for API routes, and at least a few end-to-end tests for critical user journeys (signup, checkout, submit form).

✓ output: Test suite, bug list resolved

081–2 days

Optimize

Compress images, lazy-load below-the-fold content, check Lighthouse scores, minimize JS bundle size, and add meta tags for SEO and social sharing.

✓ output: Lighthouse score 90+, fast load time

09hours

Deploy

Push to a host (Vercel, Netlify, Cloudflare Pages, a VPS, etc.), connect your domain, set environment variables, and enable HTTPS (usually automatic now).

✓ output: Live URL, custom domain, SSL

10forever

Maintain & Iterate

Monitor errors (Sentry, logs), watch analytics, patch dependencies regularly, back up your database, and ship improvements based on real user feedback.

✓ output: Update cadence, monitoring dashboard

05Connective tissue

APIs, explained

An API (Application Programming Interface) is a contract — a defined way for one piece of software to ask another for data or actions, without needing to know how it works internally.

A typical REST call

request

GET /api/users/42 HTTP/1.1
Host: example.com
Authorization: Bearer <token>
Accept: application/json

response — 200 OK

{
  "id": 42,
  "name": "Asha Verma",
  "email": "asha@example.com",
  "createdAt": "2026-01-14T10:22:00Z"
}

REST vs GraphQL vs WebSockets

REST — fixed endpoints per resource (/users, /posts), simple and cacheable.
GraphQL — one endpoint, the client asks for exactly the fields it needs, nothing more.
WebSockets — a persistent two-way connection for real-time data (chat, live scores, notifications).

HTTP status codes — quick reference

200: OK — success
201: Created — new resource made
301 / 302: Redirect, permanent / temporary
400: Bad Request — client sent something invalid
401 / 403: Unauthorized / Forbidden
404: Not Found
429: Too Many Requests — rate limited
500: Internal Server Error

06What to build with

Tech stacks, category by category

You don't need all of these — pick one from each row you actually need for the project.

HTML / CSS / JavaScript

The actual foundation — everything else compiles down to this

React

Component-based UI library, huge ecosystem

Next.js

React framework: routing, SSR/SSG, API routes built in

Vue / Nuxt

Gentler learning curve, very popular outside the US

Svelte / SvelteKit

Compiles away — smaller, fast runtime

Tailwind CSS

Utility-first styling, pairs well with components

TypeScript

JavaScript + types — catches bugs before runtime

07Built differently now

Building websites with AI

AI doesn't replace understanding the fundamentals above — it removes the boilerplate so you spend your time on decisions instead of typing.

Claude Code / Claude Cowork

Delegate whole features: 'add a login page with email auth' and it writes, tests, and edits the files across your repo.

AI code editors (Cursor, VS Code + Copilot)

Autocomplete, inline chat, and multi-file edits right inside your editor as you type.

AI page/UI builders (v0-style tools, Claude Design)

Describe a screen in plain English, get a working component back to refine.

AI for debugging

Paste an error + surrounding code, get a root-cause explanation instead of guessing.

AI for docs & APIs

Ask 'how do I paginate this endpoint with cursor-based pagination' instead of digging through docs alone.

AI in the browser (Claude in Chrome)

An agent that can click through your live site to test flows or fill out forms for QA.

A good AI-assisted workflow: describe the feature in plain language → let the AI draft the code → read every diff before accepting it → run it yourself and test the edge cases → ask the AI to explain any part you don't understand yet. Speed is only useful if you still understand what got shipped.

08Don't skip these

Important things to keep in mind

The six areas that separate a hobby project from something you can trust in production.

Never trust client-side data — validate again on the server.
Hash passwords (bcrypt/argon2), never store them in plain text.
Use parameterized queries to prevent SQL injection.
Sanitize user-generated HTML to prevent XSS.
Keep secrets in environment variables, never in the repo.

09Quick reference

Cheat sheets

Pin these - the things you look up again and again until they're muscle memory.

HTML - semantic tags

<header> <nav> <main> <section> <article> <aside> <footer>Semantic layout tags
<h1>…<h6>Headings, one <h1> per page
<button> vs <a>button = action, a = navigation
<img alt='…'>Always include alt text
<form> <input> <label>Wrap inputs with labels for accessibility
<meta name='viewport'>Required for responsive mobile layout

CSS - flexbox, grid & responsive

display: flex; justify-content: center; align-items: center;Center anything, one axis at a time
display: grid; grid-template-columns: repeat(3, 1fr);3 equal columns
gap: 1rem;Space between flex/grid children
position: sticky; top: 0;Sticky header on scroll
@media (min-width: 768px) { … }Mobile-first breakpoint
clamp(1rem, 2vw, 2rem)Fluid, responsive sizing in one line

Git - everyday commands

git init / git clone <url>Start or copy a repo
git checkout -b feature/xNew branch for a feature
git add . && git commit -m '…'Stage & save a snapshot
git push origin feature/xSend branch to remote
git pull --rebaseGet latest changes cleanly
git merge / git rebaseCombine branch history

Pre-launch checklist

☐ Lighthouse score checked (performance, a11y, SEO)
☐ Meta title/description on every page
☐ 404 page exists
☐ Forms validate on client AND server
☐ Environment variables set on host, not committed
☐ HTTPS enforced, favicon added
☐ Tested on mobile + at least 2 browsers
☐ Analytics/error monitoring wired up
☐ Backups configured for the database

10Loose ends

Frequently asked

No. A brochure site, portfolio, or blog can be entirely static — HTML/CSS/JS with no server logic. You need a backend once you have user accounts, dynamic data that changes per request, or anything that must stay private (like API keys or business logic).

All Categories

Web & Web Development,drawn out in full.