Beginner
Dark Mode
A flicker-free light/dark theme toggle built on CSS custom properties, a data-theme attribute, and localStorage.
Demos
Every Eleventy implementation pattern on this site, in one place — real, working, and self-contained.
Intermediate
Multi-level Navigation
A recursive, front-matter-driven navigation tree using @11ty/eleventy-navigation — no hand-maintained nav array.
Beginner
Tags
Auto-generated tag pages built from a custom collection — every demo tag gets its own page with zero…
Beginner
Syntax Highlighting
Build-time code highlighting with @11ty/eleventy-plugin-syntaxhighlight — zero client-side JavaScript.
Intermediate
Table of Contents
A heading-extraction filter that builds a page's table of contents from its own rendered HTML — no separate…
Advanced
Search
A hand-rolled, dependency-free client-side search: a build-time JSON index plus a small scored-match script.
Beginner
RSS
A standards-compliant Atom/RSS feed for the blog, generated with @11ty/eleventy-plugin-rss.
Beginner
Breadcrumbs
A tiny, explicit breadcrumb-trail macro used at the top of every demo and blog post.
Intermediate
Pagination
Splitting a big collection into numbered pages with Eleventy's built-in pagination feature.
Intermediate
Collections
A custom collection that merges two different content types into one sorted list.
Beginner
Contact Form
A working contact form on a static site, using Netlify Forms instead of a backend.
Intermediate
Responsive Images
Generating multiple image sizes and formats at build time with @11ty/eleventy-img.
Intermediate
Pagefind Search
Full-text search across the whole site, built by indexing the actual HTML after the build finishes.
Intermediate
Multi-format Images
Letting the browser pick between AVIF, WebP, and JPEG with a single <picture> element.
Intermediate
Live Lighthouse Scores
Real Lighthouse scores rendered as static badges, refreshed weekly by a scheduled GitHub Action, no client-side API calls.
Beginner
Reading Time
The 'N min read' shown on every demo and post here, computed at build time by eleventy-plugin-reading-time.
Intermediate
Live View Counter
A real page-view counter backed by a Netlify Function and Netlify Blobs, no third-party analytics account needed.
Beginner
Data Files
Eleventy's global _data files, explained using this site's own real data files as the example.
Beginner
Custom Filters
How this site turns a file into a Nunjucks filter automatically, using a new real pluralize filter as…
Beginner
Shortcodes
How a file becomes a Nunjucks shortcode on this site, using a real icon shortcode that replaced inline…
Intermediate
Image Gallery
A responsive image grid sourced from the Pexels API, processed at build time with @11ty/eleventy-img.
Beginner
Masonry Gallery
A Pinterest-style masonry layout using plain CSS multi-column layout — no JavaScript, no masonry library.
Beginner
Print Stylesheet
A real @media print stylesheet, loaded site-wide — strips chrome, forces light mode, and prints link URLs.
Beginner
Copy Code Button
A real copy button on every code block on this site, added by one script, with no per-page…
Intermediate
Accessibility
Three real accessibility techniques already running on this site: a skip link, visually-hidden text, and a genuine bug…
Intermediate
Sitemap
A real sitemap.xml with two genuine Eleventy gotchas baked into how it's built — one about pagination, one…
Intermediate
Schema.org / JSON-LD
Real structured data on every demo page and the listing page, with a script-injection risk most tutorials skip.
Intermediate
Unit Tests
Real tests for this site's pure filters, run live at build time and gating every real pull request.