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 page content is defined with HTML markup, styled with CSS, and animated with JavaScript. Hyper Text Markup Language (HTML) is a declarative language specifing what will be placed on a page and, with some exceptions, where it will be rendered. Cascading Style Sheets (CSS) control the appearance, visibility, and with the use of flex and grid displays, local placement of HTML elements. JavaScript manipulates a page's HTML Document Object Model (DOM), sends messages between pages and their frames, and responds to user events.

1.0 - Introduction

WebDev explores static web development technologies: HyperText Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript (JS). Each of these are explained in separate bites, followed by examples.
Dynamic [non-static] sites assemble pages from components and data stored on a server for each request using a framework like Asp.Net.
Static sites use pages that are completely defined in advance. They may invoke dynamic responses to client events like button clicks, but the range of those responses is defined in advance by predefined JavaScript code that is delivered with the response and runs on the client's machine.
This website is static, built from these technologies. Each of the examples record one technique that was intended to support content delivery and, may or may not have made it into the site code base. They are essentially prototypes for services needed by the site. Some were appropriate for use, and some where not. They are presented here because I think they are effective and want to easily recall their designs for later use. I hope you will find them useful as well. Essentially, this site is a large exemplar for use of static web development technologies. The purpose of this WebDev Track is to present the site technology in an orderly fashion.

2.0 - Static Site Technologies

WebDev explores ways of building static websites with HTML, CSS, and JavaScript. The main goal is to develop ways to present text, diagrams, and code that enhance learning and make reference ideas, tables, and examples easy to find. WebDev tests practical methods for managing page space: toggling code visibility, resizing diagrams and images, and using vertical splitters that let users expand overflowing code panels left or right.

2.1 - Content Organization

The site organizes information into Tracks, Stories, Bites, and Examples. A row of buttons at the page top gives access to various language and technology tracks. Each track uses an explorer: A web page in which its left panel lists resources, while the right panel displays selected content in an iframe. This page is the WebDev Explorer which currently shows its Track Summary in the right panel. Clicking the WebDev button in the top menu displays this page. You can navigate to other WebDev content using links in the left panel, and return to this view clicking on the "WebDev Home" link. Links at the bottom of each page provide page information and let users move through related material using "Next" and "Prev" buttons.

2.2 - Bite Structure

Most WebDev content appears 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 - Plans for Dynamic Site Technologies

WebDev plans to add discussions on building dynamic pages with Asp.Net in the future; no such materials appear yet.

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