01
Odin Recipes
Three recipes marked up as documents. The very first thing: headings, lists, links and nothing else.
Foundations
The first five. Documents, then layout, then the moment it starts responding to you.
-
-
02
Field Manual
A personal site built from the Odin design brief. Field-manual typography and one signal colour doing all the work.
-
03
Quartz, Parchment, Shears
Rock paper scissors as a cartoon park. Original artwork, synthesised sound, and the whole thing locked to the viewport.
-
04
Etch-A-Sketch
The toy, with knobs that turn. Steps derive from absolute rotation, so a slow turn and a fast one draw exactly the same line.
-
05
Coolculator
A printing adding machine on a workbench. The tape scrolls, and the bench it sits on is procedural CSS rather than a photograph.
Intermediate HTML & CSS
Forms, and laying a page out in two dimensions instead of one.
-
06
Quarry
A sign-up form for an invented stone company. Live validation using
:user-invalid, which waits until you have finished typing. -
07
Admin Dashboard
A dashboard laid out entirely in CSS Grid, built to practise a complex two-dimensional layout with no positioning hacks.
JavaScript
Objects and modules, then bundling, then asynchrony, then tests — and finally something worth testing.
-
08
The Ark
A library kept as spines on a shelf. Books coming back from storage are re-seated on their prototype, because JSON does not carry methods.
-
09
Tic-Tac-Toe
Three in a row, built on closures and the module pattern, with nothing at all hanging off the global object.
-
10
KOI
A restaurant site assembled entirely from JavaScript modules and bundled with webpack — no markup in the HTML file but a single div.
-
11
Things to do
A todo list with projects, dates and checklists. Model and interface live in separate folders and the model never touches the DOM.
-
12
Weather
A forecast that takes its colour from the conditions and the local time — eight kinds of weather across four phases of the day.
-
13
Testing Practice
Five functions and 58 tests, checked by deliberately breaking the code to find out which tests actually noticed. One did not.
-
14
Battleship
Written test first, on squared paper. 58 tests, none of which know what a pixel is, and an opponent that hunts rather than guesses.
Computer Science
Data structures built from nothing, each one used by the next. Three of them come with a page to watch them work.
-
15
Recursion
Fibonacci and merge sort, each written both ways — iteratively and by having the function call itself.
Notes terminal only
-
16
Linked Lists
A singly linked list with head, tail and size kept in step — and an iterator, added later so that the hash map could walk its buckets.
Notes terminal only
-
17
Buckets
A hash map with linked-list buckets, and a page to watch it double and redeal when it outgrows itself.
-
18
Two Trees
A balanced search tree raced against a degenerate one holding the same values. Ruling out a missing value costs 5 comparisons, or 31.
-
19
Knight's Travails
The shortest path a knight can take, found breadth-first. The board is never stored — a square's neighbours are worked out from the square.
React
Describing what the page should be for a given state, instead of updating it by hand.
-
20
CV Builder
Type on the left, the document redraws on the right. No DOM code anywhere in it, and it prints to a clean A4 page.
-
21
Don’t Click Twice
Drawn as the Pokédex. Click every card once, never twice — the board reshuffles and grows each level, so position is worthless.
-
22
Almgren
A shop with a basket, and 46 tests. Built twice on purpose: once threading the cart through props, then again with Context, to feel the difference.
Databases
Where the data stops being a JavaScript array and starts being enforced.
-
23
portfolio=#
Real SQLite compiled to WebAssembly, holding this portfolio as four tables. Query it from a terminal; twelve exercises build up to a three-table join.
NodeJS
Servers. These run locally with npm start rather than opening at a URL,
because GitHub Pages serves static files only.
-
24
A server, by hand
Four pages on the raw
httpmodule, each documenting the request that fetched it. No Express and no dependencies — 19 tests onnode:test.Notes runs locally
About this page
This is itself a project — the one at the end of Advanced HTML and CSS. There is no
JavaScript on it at all. The grid reflows on its own with
auto-fill and a minmax floor rather than by breakpoint, every
colour pair was measured against the 4.5:1 contrast requirement before being used, the
nineteen marks are inline SVG that inherit their colour, and all of the motion turns
itself off for anyone who has asked their system for less of it.
Source, and a written record of what went wrong in each project, at github.com/MasterRoachi/odin-projects.