WebDev Track

bites, repositories, and references

About WebDev Repo
Figure 1. Static Web Site Code
"A user interface is like a joke. If you have to explain it, it’s not that good."
- Martin LeBlanc
Static web pages are built with three core technologies: HTML for structure, CSS for style, and JavaScript for behavior. HyperText Markup Language (HTML) is a declarative language that defines what appears on a page and, with some exceptions, where each element is rendered. Cascading Style Sheets (CSS) control the appearance and visibility of elements and, through flexbox and grid layouts, determine their local placement. JavaScript (JS) manipulates the page’s Document Object Model (DOM), handles user interactions, and enables communication between pages and frames.

1.0 — Introduction

The WebDev Track explores technologies used to build static websites: HTML, CSS, and JavaScript. Each topic is discussed in short “bites,” followed by practical examples.
Dynamic (non-static) sites generate pages on demand by combining stored components and data using frameworks such as ASP.NET.
Static sites, by contrast, use pages that are fully defined in advance. While they can respond to client-side events such as button clicks, those behaviors are predetermined in the JavaScript code delivered with the page and executed in the user’s browser.
This website is static and built with these technologies. Each example illustrates a technique developed to support content delivery. Some prototypes became part of the site, while others served only as experiments. These examples are presented because they demonstrate effective design ideas that may be useful for future work—both mine and yours. Overall, this site serves as a large-scale exemplar of static web development. The purpose of the WebDev Track is to describe its underlying technology in an organized and accessible way.

2.0 — Static Site Technologies

WebDev demonstrates methods for building static websites using HTML, CSS, and JavaScript. The primary goal is to develop ways of presenting text, diagrams, and code that enhance learning and make related materials—such as reference tables and examples—easy to locate. WebDev also experiments with practical techniques for managing page space: toggling code visibility, resizing diagrams and images, and using splitters that let users expand or contract panels interactively.

2.1 — Content Organization

The site organizes its materials into Tracks, Stories, Bites, and Examples. A row of buttons at the top of each page provides quick access to the various language and technology tracks. Each track is displayed in an Explorer—a two-panel web page in which the left panel lists resources and the right panel displays the selected content in an iframe. This page, the WebDev Explorer, currently shows the WebDev Track Summary in the right panel. Clicking the WebDev button in the top menu opens this page. You can navigate to other WebDev content using links in the left panel, and return to this summary view by selecting WebDev Home. Buttons at the bottom of each page provide navigation (“Next” and “Prev”) and display page information. The left panel’s Page Controls block offers similar options.

2.2 — Bite Structure

Most WebDev materials appear as “bites”—short, focused discussions about static web technologies:
  • HyperText Markup Language (HTML)
  • HTML Document Object Model (DOM)
  • Cascading Style Sheets (CSS)
  • JavaScript (JS)
  • Examples of HTML Models (Flow)
  • Sample Widgets (Link Navigator)

2.3 — Future Plans: Dynamic Site Technologies

Future updates to WebDev may introduce materials on building dynamic sites using ASP.NET and related frameworks. These topics are planned but not yet included.

3.0 - Static Website References

Resource (with Link) Description Comment
Core HTML/CSS/JS
HTML online editor Interactive editing and rendering of static web content Supports simple experiments
MDN: Learn Web DevelopmentCurriculum on HTML, CSS, JS with tutorialsBest all-round starting point
w3shools: Learn Web DevelopmentStep-by-step tutorialsbasics with interactive examples
web.dev: Learn HTMLStep-by-step HTML tutorial from GoogleGreat for structured basics
web.dev: Learn CSSGuided CSS tutorials with examplesExcellent for layouts & responsive design
MDN HTML ReferenceReference for HTML elementsAuthoritative & updated
MDN CSS ReferenceDetailed CSS properties referenceEssential for styling
MDN JavaScript ReferenceComprehensive JS objects & syntaxPrimary JS reference
HTML Living Standard (WHATWG)Official evolving HTML specificationCutting-edge definitions
DevDocsAggregated docs (MDN, frameworks, APIs)Fast & offline-capable
W3docslearning materials for web Technologiesorganized into courses
Layout & Responsive Design
CSS-Tricks Flexbox GuideVisual and code examples for FlexboxClassic quick reference
CSS-Tricks Grid GuideVisual and code examples for CSS GridHighly recommended
web.dev: Responsive ImagesTutorials on responsive <img>, srcset, pictureUp-to-date responsive techniques
MDN: Responsive ImagesHow-to guide for responsive image adaptationReliable reference
Advanced Technologies

Table 2.0 - Advanced Technologies

Resource (with Link) Description Comment
Static Site Generators
Eleventy DocsDocumentation for 11ty SSGMarkdown-friendly & flexible
Hugo DocsDocumentation for HugoExtremely fast builds
Hugo Quick StartTutorial to get Hugo site runningQuick hands-on intro
Jekyll DocsOfficial docs for JekyllGreat with GitHub Pages
Astro DocsDocs for Astro SSGModern islands architecture
Astro TutorialGuided tutorial: Build a blogHands-on practice
Docusaurus DocsDocs site generatorBest for documentation projects
MkDocsMarkdown-based documentation generatorSimple & effective
Jamstack OverviewConcepts behind JAMstackArchitectural context
Hosting & Deployment
GitHub Pages QuickstartGuide to GitHub Pages hostingFree & simple
Netlify Deploy OverviewDocs on deploys, previews, formsGit-based workflow
Vercel Deploy DocsDocs for deploying static appsEdge-optimized
Cloudflare Pages DocsDocs for Pages hostingEdge functions + hosting
Search, Forms, Analytics
PagefindDrop-in static search engineSSG-friendly
Lunr.jsFull-text browser search libraryGood for small sites
Netlify FormsBuilt-in forms for static sitesSimple setup
FormspreeForm submission servicePopular in JAMstack
Plausible AnalyticsLightweight, privacy-friendly analyticsGDPR compliant
Google Analytics 4Official GA4 docsIndustry standard
Performance, Accessibility, SEO
web.dev: Learn PerformanceGuides for performance optimizationIncludes Core Web Vitals
Core Web Vitals (web.dev)Web performance metrics overviewKey for SEO & UX
WebAIM WCAG ChecklistChecklist for accessibility compliancePractical tool
WebAIM Evaluation Quick RefQuick reference for accessibility evaluationGood for audits
WCAG Quick RefOfficial WCAG 2.1 referenceAuthoritative accessibility source
Google SEO Starter GuideBest practices for SEO fundamentalsGoogle’s official advice
Sitemaps OverviewGuide to XML sitemapsCore SEO reference
robots.txt IntroGuide for controlling crawlersSEO essential