WebDev Story Prologue

0.0 Prologue

Web Development is the practice of building applications and content that run in a web browser. The core technologies are HTML for structure, CSS for styling, and JavaScript for behavior. Together they form the foundation of every website and web application.

Why Web Development?

Web pages are delivered over the internet to any device with a browser — no installation needed on the client.
The browser platform is universal: the same HTML/CSS/JS runs on Windows, macOS, Linux, iOS, and Android.
HTML, CSS, and JavaScript are interpreted — short feedback loops let you see changes instantly in the browser.
Browser DevTools provide live inspection, editing, and debugging of any page without leaving the browser.
A large ecosystem of libraries (React, Vue, Svelte) and tools (Vite, npm, Webpack) builds on the three core technologies.
Modern CSS (Grid, Flexbox, custom properties, container queries) and JavaScript (ES2022+, modules, async/await, Web Components) make sophisticated applications achievable without frameworks.

This story is intended to help you get started or deepen your understanding of web development fundamentals, beginning with HTML.

0.1 Getting Started

To get started you need: a text editor, a browser, and the willingness to start before you know everything.

Choose an editor:
VS Code is the standard choice. Install the Live Server extension (ritwickdey.liveserver) for instant browser refresh on every save.
Open Browser DevTools:
Press F12 (or right-click → Inspect) in Chrome, Firefox, or Edge. The Elements panel shows the live DOM; the Console lets you run JavaScript; Network shows resource loads.

Create your first page:

Create a file index.html with the structure below, then open it with Live Server or directly in a browser.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, Web!</h1>
  </body>
</html>

0.2 Story Content

This story orders content from this site into a sequence of chapters about HTML structure, the DOM API, and HTML rendering models. Each chapter is a single web page accessible from the Pages list at the lower right.

Chapters:

Prologue
Motivation for, and layout of, the WebDev story.
HTML Elements
HTML markup, inline and block elements, events, and the complete tag reference.
HTML DOM
The Document Object Model API: element access, mutation, traversal, and events.
HTML Models
Page model, flow model, and box model — how browsers lay out and render content.
HTML Forms
Form structure, input types, constraint validation, and JavaScript submission with FormData.
JavaScript Summary
Language model, types, functions, closures, modules, and the event loop.
JavaScript Objects
Prototype model, classes, inheritance, getters/setters, and mixins.
JavaScript DOM & Styles
DOM queries, mutation, event handling, delegation, and computed styles.
JavaScript Async
Callbacks, Promises, async/await, the Fetch API, error handling, and common async patterns.
CSS Summary
Cascade, specificity, inheritance, selectors, pseudo-classes, and pseudo-elements.
CSS Layout
Flexbox, Grid, positioning, and stacking context.
CSS Features
Custom properties, transitions, animations, and media queries.
CSS Positioning
position values, offset properties, containing block, stacking context, z-index, and overflow.

0.3 References

Reference	Description
MDN HTML Reference	Comprehensive documentation for HTML elements, attributes, and guides.
HTML Living Standard	The official HTML specification maintained by WHATWG.
w3schools HTML Tutorial	Quick reference with interactive examples — beginner to intermediate.
web.dev: Learn HTML	Concise modern HTML lessons from the Chrome team.
MDN DOM Reference	Full reference for the DOM API used to manipulate HTML with JavaScript.
jsFiddle (online sandbox)	Browser-based HTML/CSS/JS sandbox — try snippets without installing anything.