WebDev Story

WebDev Story Prologue

starting, story content, references

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?
  1. Web pages are delivered over the internet to any device with a browser — no installation needed on the client.
  2. The browser platform is universal: the same HTML/CSS/JS runs on Windows, macOS, Linux, iOS, and Android.
  3. HTML, CSS, and JavaScript are interpreted — short feedback loops let you see changes instantly in the browser.
  4. Browser DevTools provide live inspection, editing, and debugging of any page without leaving the browser.
  5. A large ecosystem of libraries (React, Vue, Svelte) and tools (Vite, npm, Webpack) builds on the three core technologies.
  6. 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.
  1. Choose an editor:
    VS Code is the standard choice. Install the Live Server extension (ritwickdey.liveserver) for instant browser refresh on every save.
  2. 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.
  3. 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:
  1. Prologue

    Motivation for, and layout of, the WebDev story.
  2. HTML Elements

    HTML markup, inline and block elements, events, and the complete tag reference.
  3. HTML DOM

    The Document Object Model API: element access, mutation, traversal, and events.
  4. HTML Models

    Page model, flow model, and box model — how browsers lay out and render content.
  5. HTML Forms

    Form structure, input types, constraint validation, and JavaScript submission with FormData.
  6. JavaScript Summary

    Language model, types, functions, closures, modules, and the event loop.
  7. JavaScript Objects

    Prototype model, classes, inheritance, getters/setters, and mixins.
  8. JavaScript DOM & Styles

    DOM queries, mutation, event handling, delegation, and computed styles.
  9. JavaScript Async

    Callbacks, Promises, async/await, the Fetch API, error handling, and common async patterns.
  10. CSS Summary

    Cascade, specificity, inheritance, selectors, pseudo-classes, and pseudo-elements.
  11. CSS Layout

    Flexbox, Grid, positioning, and stacking context.
  12. CSS Features

    Custom properties, transitions, animations, and media queries.
  13. 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.