Syntaxia
An interactive programming book with live code editors and quizzes built into its lessons.
What it is
Syntaxia is an interactive, author-written programming book covering languages, frameworks, and dev tools. Every lesson is a Markdown page that can embed a live code editor and a quiz, so you read a concept and try it in the same place.
What’s inside
The HTML curriculum runs 18 pages, from writing your first file to a profile-page mini project and a final quiz.
A separate IDE section of 10 lessons covers what an IDE is, choosing and setting one up, the terminal, and debugging.
The web lessons pair HTML, CSS, and JavaScript editors with a sandboxed live preview.
Standalone intro lessons cover CSS, JavaScript, and Python.
Take a look
Syntaxia's home page is the pitch: one headline, one clear way into the lessons, and nothing else competing for attention.
Landing pages like this are the same kind of work I take on through front-end development, where the goal is always to get a visitor to the one action that matters, not to show off everything a site could do.
The 3D cube next to the headline is decorative, not load-bearing: it announces the subject before a visitor reads a word, and it degrades gracefully if a browser can't render it.
Every lesson pairs the idea with a live CodeMirror editor and a Run button, so a reader tries what they just read instead of taking it on faith.
Nothing leaves the browser: the editor, the run step, and the rendered result all happen client-side, so a lesson works the same on a slow connection as a fast one.
It's the same instinct behind Fingerdash, another project built around learning by doing instead of reading.
Each lesson ends with a short multiple-choice quiz, so a reader finds out what actually stuck before moving on to the next page.
The questions are written per lesson rather than pulled from a generic bank, so a quiz on CSS specificity actually tests CSS specificity instead of something adjacent.
Building a feature this specific, a quiz tied to one lesson's content, is the kind of scoped, custom work I take on through custom software development.
On a phone the code editor and its live preview stack into one column instead of sitting side by side, so a lesson stays usable one-handed instead of demanding a wide screen.
That's not a simplified mobile version. It's the same lesson, the same editor, the same Run button, just laid out for the screen it's actually on.
Building layouts that hold up at every width is part of the accessibility commitment behind every project on this site, this one included.
