Web Development — how a website becomes a web app, from the browser to production

The web is where most software meets its users. This module is the working developer's tour of how a web app is built — not a framework tutorial, but the durable ideas that outlast any framework. Start with how the browser and the client-server web actually work, learn the front-end trio of HTML, CSS, and JavaScript and how modern component frameworks build on them, then cross to the back end: HTTP servers, REST APIs, and the database behind them. From there you'll handle the parts that separate a page from a product — auth and sessions, real-time updates, web security, caching — and finish by shipping, measuring, and operating a real web app, using GopherTrunk's own web dashboard as the worked example. Pairs with the Networking, Databases, and Deployment modules; a little programming experience helps but no web background is assumed.

Start lesson 1 →Jump to glossary

The web is where most software meets its users. A web app is also one of the most satisfying things to build, because you can put it in front of anyone with a browser. This module is the working developer’s tour of how a web app is actually built — not a tutorial for one framework that’s fashionable this year, but the durable ideas that outlast every framework.

Who this is for. Developers who want to build for the web, whether you’ve never written a line of HTML or you’ve dabbled and want the whole picture to click. A little programming experience helps, but no web background is assumed. It builds directly on the Networking module (how requests move) and pairs with Databases & Data (where the data lives) and Containers & Deployment (how it ships).

How the module works. Six units take you from the browser to production. The first three cover the front end — how the browser works, the HTML/CSS/JavaScript trio, and how modern component frameworks build on them. The fourth crosses to the back end: HTTP servers, REST APIs, and the database behind them. The last two cover the parts that separate a page from a product — auth, real-time, and web security — and then shipping, measuring, and operating a real app, using GopherTrunk’s own web dashboard as the worked example. Mark lessons complete as you go — your progress is saved in your browser. New here? Start with lesson 1: What web development is

Unit 1 — How the Web Works (for Building)

The mental model every web developer needs: what web development is, how the browser renders a page, the client-server web, the anatomy of a web app, and static versus dynamic.

  1. What web development is The lay of the land — front end, back end, and full stack — and what actually happens between typing a URL and seeing a page. beginner 8 min
  2. How the browser works The most important program in web development — how a browser fetches, parses, and renders HTML, CSS, and JavaScript into the page you see. beginner 9 min
  3. The client-server web Every web interaction is a request and a response — the client-server model on the web, building on how a web request works under the hood. beginner 8 min
  4. Anatomy of a modern web app The pieces and how they fit — front end, back end, database, and the APIs between them — the map the rest of the module fills in. beginner 9 min
  5. Static vs. dynamic sites A file served as-is versus a page built on the fly — the spectrum from static sites to full web apps, and why this very site is static. beginner 8 min

Unit 2 — The Front-End Trio

The three languages of the browser and how a user interacts with them: HTML structure, CSS styling, JavaScript behaviour, the DOM, forms, and accessibility.

  1. HTML — structure & semantics The skeleton of every page — HTML elements, semantic markup, and why the right tag matters for meaning, accessibility, and search. beginner 9 min
  2. CSS — styling & layout How a page goes from plain text to designed — selectors, the box model, and the flexbox and grid layout systems modern sites are built on. beginner 10 min
  3. JavaScript in the browser The language that makes pages interactive — what JavaScript does in the browser, events, and where it runs versus server-side code. beginner 10 min
  4. The DOM — manipulating the page The live tree the browser builds from your HTML — the DOM — and how JavaScript reads and changes it to update the page without a reload. intermediate 9 min
  5. Forms & user input How the web takes input — forms, validation, and safely getting what a user types from the browser to your server. intermediate 9 min
  6. Accessibility basics Building for everyone — semantic HTML, keyboard use, contrast, and ARIA — the accessibility fundamentals that are also just good engineering. intermediate 9 min

Unit 3 — The Front End at Scale

How real front ends are built today: component frameworks, state, fetching data from the browser, the build toolchain, and responsive design.

  1. Front-end frameworks Why React and its peers exist — the problem of keeping a complex UI in sync with data, and what a framework does that hand-written DOM code doesn't. intermediate 10 min
  2. Components & state The building block of modern UIs — a component — and the idea of state that drives what it shows, the core mental model of every framework. intermediate 10 min
  3. Fetching data from the front end How a page pulls fresh data without reloading — fetch, JSON, async requests, and talking to an API from the browser. intermediate 9 min
  4. Build tools & bundlers What turns your source into what the browser downloads — bundlers, transpiling, and why modern front ends have a build step at all. intermediate 9 min
  5. Responsive design One site, every screen — fluid layouts, media queries, and the mobile-first mindset that keeps a page usable from phone to desktop. intermediate 9 min

Unit 4 — The Back End

The server side of a web app: what a back end does, HTTP servers and routing, building a REST API, the database behind it, rendering strategies, and templating.

  1. What a back end does The work that can't happen in the browser — business logic, data, auth, and secrets — and why a web app needs a server behind it. beginner 9 min
  2. HTTP servers & routing How a server answers the web — listening for requests, routing a URL and method to the right handler, and returning a response. intermediate 9 min
  3. Building a REST API The contract between front and back end — resources, HTTP verbs, status codes, and JSON — assembled into an API a front end can consume. intermediate 10 min
  4. The back end & its database Where the server meets the data layer — how a back end reads and writes a database safely, and where the boundary belongs. intermediate 9 min
  5. SSR vs. SPA vs. static Three ways to build a page — rendered on the server, in the browser, or ahead of time — what each is good at, and how to choose. intermediate 10 min
  6. Templating & static site generators Generating HTML from templates and data — server-side templating and static generators like the Jekyll build behind this very site. intermediate 9 min

Unit 5 — Auth, Sessions & Real-Time

The features that make a web app real and safe: authentication and sessions, cookies and tokens, live updates over WebSockets, web security, and caching.

  1. Authentication & sessions Knowing who a user is across stateless requests — logging in, sessions, and the difference between authentication and authorization on the web. intermediate 10 min
  2. Cookies, tokens & JWTs How the browser remembers you between requests — cookies, bearer tokens, and JWTs — and the tradeoffs and pitfalls of each. intermediate 9 min
  3. WebSockets & real-time updates When request-response isn't enough — pushing live data to the browser over WebSockets, the way a live scanner dashboard updates. intermediate 9 min
  4. Web security essentials The vulnerabilities every web dev must know — XSS, CSRF, and CORS — how they work and the defenses that stop them. advanced 11 min
  5. Caching & CDNs Making the web fast — browser caches, HTTP cache headers, and content delivery networks that serve your site from close to the user. intermediate 9 min

Unit 6 — Shipping a Web App

From working locally to running for users: deploying, measuring performance, monitoring, choosing a stack, and a look at GopherTrunk's own dashboard.

  1. Deploying a web app Getting your app onto the internet — build, host, and serve the front end and back end, connecting to the deployment module's toolkit. intermediate 9 min
  2. Performance & Core Web Vitals What "fast" means on the web and how it's measured — load, interactivity, and layout stability — and the levers that move them. intermediate 9 min
  3. Monitoring & analytics Knowing what your app does in the wild — error tracking, uptime, and privacy-respecting analytics — after it ships. intermediate 8 min
  4. Choosing your web stack A practical framework for the endless "what should I use" question — matching front end, back end, and hosting to the project in front of you. intermediate 9 min
  5. The GopherTrunk web dashboard A worked example — how a live dashboard for a scanner is built, from the API that serves decoded calls to the browser that shows them in real time. advanced 10 min
  1. Glossary of web-development terms Plain-language definitions for every term in the module — front end, back end, HTML, CSS, DOM, framework, component, state, REST API, SSR, SPA, session, cookie, JWT, WebSocket, XSS, CSRF, CORS, CDN, and more — cross-linked to the lessons.