PLAINFINCH learn by building
Paste your own codePaste code
About

Learn the web by building it

PlainFinch is a free place to learn how websites are made. You write real code, watch the page change, and Finch explains what your change actually did.

courses
10
interactive lessons
324
diagrams
324
sign-ups needed
0

What is PlainFinch?

PlainFinch is a set of short, hands-on lessons for people who want to understand how websites really work. Every lesson gives you one small task, a live workspace and a result that changes as you type. You make the change yourself, so the idea sticks.

When you press Check my work, Finch, the small bird who guides you, tells you whether the task is done and explains what your change did in plain English. Below each workspace is a full explanation with a diagram, so you can go as deep as you like.

Ten courses, one path

40 lessons

HTML

The structure of every page: headings, links, images, tables and forms.

40 lessons

CSS

How pages look: colour, type, spacing, flexbox, grid and responsive layouts.

40 lessons

JavaScript

Make pages react: clicks, forms, data, timers and fetching from servers.

35 lessons

SQL

Ask questions of real data: filter, sort, count, join tables and change records.

24 lessons

Git

Save every version of your work, try ideas on branches and put your site online.

24 lessons

Building with AI

Ask an AI assistant well, then read, test and fix what it gives back.

34 lessons

Servers and APIs

Build the server side: routes, JSON APIs, a database, logins and safety.

30 lessons

Accessibility

Make pages that work with screen readers, keyboards, zoom and every kind of form.

28 lessons

Testing

Write tests that prove your code works, and catch the bugs before visitors do.

29 lessons

Web performance

Make pages load fast and stay still on a phone, and measure it honestly.

Tools

Tools and references

A playground, an HTML explainer and a reference page for every course, all on one page.

Sitemap

Every lesson on one page

The full list of lessons in every course, grouped the way the courses teach them.

Each course starts from zero and ends with milestone projects that pull the pieces together: a restaurant menu, a quiz, a sales report, a published website and more. Every course also has a reference page, such as every HTML element or every Git command.

How a lesson works

  1. Read the taskOne clear job you can finish in a few minutes, with hints that get more specific if you are stuck.
  2. Do it for realType in a live editor, a practice terminal, a practice server or a pretend AI assistant. The result updates beside you.
  3. Check your workFinch confirms the task and lists what changed, line by line, and why it matters.
  4. Break ItFix a broken version of the same idea. Finding bugs is how real developers learn.
  5. Go deeperA plain-English explanation, a diagram, field notes, common mistakes and answers to the questions people ask.

What makes it different

Real code, real results

HTML and CSS render live, JavaScript really runs, SQL runs on a real database engine, and Express servers run on a practice server, all in your browser.

Plain English

No jargon without an explanation first. Each lesson is written for someone who has never done this before.

Break It challenges

Every lesson has a broken version to fix, so you practise reading and debugging, not only typing.

Private by design

No accounts and no cookies. Your progress stays in your own browser. How privacy works.

Original lessons

Every lesson, example and diagram is written for PlainFinch, set in its own small world of bakeries, bird clubs and bike shops.

Tested every time

Automated tests run every task, answer and Break It challenge, so what a page tells you matches what the code does.

Where should I start?

HTML

New to all of this

Start with the first HTML lesson. It takes a few minutes and you will have a working page.

CSS

You know a little HTML

Make it look good with CSS, then make it react with JavaScript.

Git

You want your site online

Save your work with Git and publish it, step by step.

AI

You already use AI tools

Learn to ask clearly and to check every line that comes back.

Servers

You know some JavaScript

Build the server side: routes, a JSON API, a database and logins.

SQL

You work with data

Ask real questions of tables with SQL, from your first SELECT to joins.

Or browse every lesson on the sitemap.

Meet Finch

Finch is the small blue bird beside every task. Finch never does the work for you. Instead it nudges you with hints, explains what your code did, and asks good questions. If you use an AI tool of your own, Ask Finch on every lesson writes a careful prompt you can copy, one that asks for help without asking for the answer.

Questions people ask

Is PlainFinch really free?

Yes. Every lesson, tool and reference page is free, with no paid tier, no trial and no sign-up.

Do I need to install anything?

No. Everything runs in your web browser, including the SQL database, the Git practice terminal, the practice Node.js server and the AI lessons' pretend assistant.

Do I need an account?

No. Your progress and saved work are kept in your browser on your device. Using a different browser or device starts fresh.

Can I learn on a phone?

Yes. Every lesson works on a phone, with Learn, Code and Result tabs. A laptop is more comfortable for longer sessions.

Which course should I take first?

HTML, because every web page starts there. After that, CSS and JavaScript follow naturally; SQL, Git and Building with AI can be taken in any order, and Servers and APIs is easiest once you know some JavaScript.

Can teachers use PlainFinch in class?

Yes. You can use the lessons for teaching without asking. See the terms of use for the details.