WebDev Track Summary

WebDev Track Summary

story, bites, components, tests and repositories of static web code

"A user interface is like a joke. If you have to explain it, it's not that good."
- Martin LeBlanc

Figure 1. Static Web Site Code

1. What is WebDev?

Static web pages are built with three core technologies: HTML for structure, CSS for style, and JavaScript for behavior. No server-side rendering is involved - every page is a fully-defined file delivered directly to the browser.

Three defining technologies:

HTML (HyperText Markup Language) - a declarative language that defines what appears on a page and, with some exceptions, where each element is placed. Elements carry semantic meaning: <header>, <nav>, <main>, <section>, and <article> convey structure to browsers and assistive tools.
CSS (Cascading Style Sheets) - controls the appearance and visibility of elements and, through flexbox and grid layouts, determines their placement. CSS variables and the cascade allow a single theme file to govern an entire site.
JavaScript (JS) - manipulates the page's Document Object Model (DOM), handles user interactions, passes messages between iframes, manages cookies, and enables the custom Web Components used throughout this site.

This website is itself a large-scale exemplar of static web development. The WebDev Track describes its underlying technology in an organized and accessible way - making design decisions visible so they can be understood and reused.

2. Track Contents

The WebDev track offers focused reference material on each core technology, documented custom components, practical test pages, and example layouts.

Section	Description	Entry Point
HTML Story	A chapter-by-chapter guide to HTML. Covers document structure, text content, links, media (images, figures, video, audio), tables, forms, semantic elements, the head section and metadata, global attributes, the box and flow models, and the HTML DOM.	Prologue
CSS Story	A chapter-by-chapter guide to CSS. Covers selectors and the cascade, layout (flexbox and grid), features (custom properties, transitions, animations, media queries, fonts), positioning, style management (specificity discipline, cascade layers, naming conventions, design tokens), and a curated tutorials and references chapter.	Prologue
JS Story	A chapter-by-chapter guide to JavaScript. Covers the language summary and syntax, the execution engine (call stack, heap, task queue, microtask queue, event loop, Web Workers), objects and classes (prototype model, Object API, ES2015+ class syntax), DOM and styles, and async programming (callbacks, Promises, async/await, the Fetch API, and common patterns).	Prologue
WebDev Bites	Short, focused pages covering each static web technology: HTML elements and structure, the HTML Document Object Model, CSS styling and layout, JavaScript behavior and DOM manipulation, and an introduction to Web Components. Pages work as stand-alone references and also form an ordered sequence.	HTML
Components	Documented custom Web Components built for this site: Image Viewer, Code Viewer, Spacer, Splitter, and Two-Panel Viewer. Each page explains the component's design, interface, and usage, and links to the JavaScript source.	Introduction
Tests & Examples	Prototype pages and layout experiments: flow model, box model, and page model examples; message-passing, query-string parsing, cookie storage, link navigation, and stacked-content demos. Many were built as site prototypes - some shipped, some did not.	Tests
Repositories	Documented code repositories illustrating techniques developed for this site: web components, layout experiments, message-passing patterns, and more. Each page discusses the design and links to the GitHub source.	Repositories
Glossary	Definitions for HTML, CSS, and JavaScript terms used across the track.	Glossary
References	Curated external links - tutorials, language references, layout guides, hosting options, and performance resources. Organized into Core HTML/CSS/JS and Advanced Technologies sections.	Section 5

3. Key Technology Concepts

The track covers the areas below, roughly from foundational to advanced.

HTML - Structure and Semantics

HTML defines the skeletal structure of every page. Modern HTML5 emphasizes semantic elements that convey meaning rather than just appearance.

Document structure - <html>, <head>, <body>; metadata in <meta> and <title>
Semantic sectioning - <header>, <nav>, <main>, <section>, <article>, <footer>
Text content - headings, paragraphs, lists, tables, blockquotes, code blocks
Embedded content - <img>, <figure>, <iframe>, <details>/<summary>
Forms and interaction - inputs, buttons, labels, fieldsets

Pages: HTML Bites, HTML Models, Semantic Markup.

CSS - Styling and Layout

CSS controls every visual aspect of a page. The cascade, specificity, and inheritance govern which rule wins when multiple rules apply to the same element.

Selectors - element, class, id, attribute, pseudo-class, pseudo-element, and combinator selectors
Box model - content, padding, border, margin; box-sizing: border-box vs. default
Flexbox - one-dimensional layout; row or column direction; alignment and spacing
Grid - two-dimensional layout; named areas, fractional units, auto-placement
CSS variables (--name: value) - site-wide theming without preprocessors
Media queries - responsive layouts that adapt to viewport width
Transitions and animations - smooth visual state changes in pure CSS

Pages: CSS Bites, Flow Model, Box Model, Page Model.

JavaScript - Behavior and DOM

JavaScript makes pages interactive. In this site it also handles inter-iframe communication, cookie-based state persistence, and custom element registration.

DOM API - document.querySelector, getElementById, element creation, class list manipulation, attribute access
Events - addEventListener, event bubbling and capture, CustomEvent
PostMessage - window.postMessage and message event listener for cross-iframe communication; used in this site for URL display updates, menu state, and navigation
Cookies - read/write via document.cookie; SameSite=Lax and URI encoding for safety
Modules and scripts - defer/async loading, ES modules, encapsulation with closures and IIFE patterns

Pages: JavaScript Bites, HTML DOM.

Web Components

Web Components are a browser-native standard for encapsulated, reusable custom elements. This site uses them extensively - the two-panel explorer, splitter, image viewer, code viewer, and spacer are all custom elements.

Custom Elements API - customElements.define; extending HTMLElement; connectedCallback and lifecycle hooks
Shadow DOM - encapsulated subtree with isolated styles; attachShadow({mode:'open'})
Slots - <slot> elements let light DOM content appear inside the shadow tree; named slots for multiple insertion points
Attributes and properties - observedAttributes, attributeChangedCallback, reflected properties
Composition - components hosting other components; e.g., the two-panel viewer hosting a splitter-container inside its shadow DOM

Pages: Web Components Bites, Component Introduction, Two Panel Component.

Layout Models and Site Architecture

This site is built on an iframe-based two-level architecture that separates navigation from content delivery.

PageHost - top-level page containing a track explorer iframe plus URL bar and status indicator
Explore*.html - per-track two-panel explorer; left panel = navigation tree, right panel = content iframe; resizable via the splitter component
Content pages - standalone HTML pages that auto-redirect into their explorer when opened directly via ExploreWebDev.html?src=page
Theming - CSS variables defined in reset.css are overridden per track by theme files such as ThemeWebDev.css
Cookie-based UI state - menu visibility (sections, pages, about, keys) persists across page navigations via cookies.js

Pages: Flow Model Example, Page Model Example, Splitter Component.

4. Getting Started

Recommended first steps for someone new to the WebDev track:

Open the HTML Bites page and read through the element overview. HTML is the foundation; the other technologies build on it.
Read CSS Bites next. Pay particular attention to the box model, flexbox, and CSS variable sections - these appear throughout the site code.
Read JavaScript Bites for DOM manipulation and event handling, then HTML DOM for the object model that JS operates on.
Open an example layout to see how the three technologies combine: Flow Model, Box Model, or Page Model. Each QuadView shows the rendered result alongside its HTML, CSS, and JS.
Explore the Components section to see how Web Components encapsulate reusable behavior. Start with the simpler Spacer or Splitter before tackling the Two-Panel Viewer.
Use the online playground html-css-js.com for quick live experiments without a local server. MDN is the best authoritative reference for any element, property, or API.

5. References

Resource	Description
MDN Web Docs	The authoritative reference for HTML elements, CSS properties, and JavaScript APIs - maintained by Mozilla.
HTML Living Standard	The official evolving HTML specification maintained by WHATWG - the definitive source for element behavior.
web.dev Learn	Google's guided courses on HTML, CSS, JavaScript, performance, and accessibility - well-structured and up to date.
CSS-Tricks Flexbox Guide	Visual and code examples for every flexbox property - the classic quick reference.
CSS-Tricks Grid Guide	Visual and code examples for CSS Grid layout - highly recommended.
HTML/CSS/JS Playground	Browser-based live editor for static web content - supports quick experiments without a local server.
MDN Web Components	Complete reference for custom elements, shadow DOM, HTML templates, and slots.
WebAIM WCAG Checklist	Practical checklist for web accessibility compliance - useful during page design and review.
web.dev: Learn Performance	Guides for page performance optimization including Core Web Vitals - key for SEO and user experience.
DevDocs	Aggregated documentation from MDN, framework docs, and language APIs in a single fast, offline-capable interface.
Track Glossary	Definitions for HTML, CSS, and JavaScript terms used across this track.