52 weeks/10 phases/12 projects/Beginner, no experience assumed
The Full-Stack Year
A twelve-month programme in web development, from your first line of HTML to an application running on the internet with your name on it.
Prepared by John AyodeleAerospace software & embedded systems engineer
Week 1Each mark is a project you finishWeek 52
Welcome
You're about to spend a year learning to build software that works all the way down, from
the thing people click on to the database underneath it. Twelve projects. One application you will put
on the internet.
I've written this so you know what's coming. Read it once now, then come back to whichever phase
you're in. You don't need to memorise any of it.
Four things I want to say plainly before you start.
Some of this is hard on purpose. There are four weeks near the beginning where you write HTML
and aren't allowed to make it look like anything. Three weeks after that where your code runs in a
terminal and nothing shows up on a screen at all. There's a week around month four where one idea takes
twice as long as you expect it to. Everybody finds those weeks hard. It says nothing about whether
you're any good at this.
School comes first. The hours here are a ceiling, not a target. During exams, or a heavy term,
or a week where life is just a lot, we cut the schedule back or pause it. Tell me early, while there's
still time to change the plan. Falling quietly behind is the only version of this that goes badly.
You won't be judged on how much code you write. You'll be judged on whether you understand it,
whether you can fix it when it breaks, and whether you can explain it to somebody who wasn't there.
A small program you can account for beats a big one you copied.
Getting stuck is the job. Not a sign you've gone wrong. Professional developers spend a large
part of every week stuck, and the difference between them and a beginner is mostly what they do in the
first ten minutes of it. You'll learn that here too.
John Ayodele
https://johnayodele.dev/
What the year looks like
Fifty-two weeks, ten phases. Each phase ends with something you built and can demonstrate.
The first half is the browser: structure, styling, then programming. The second half is everything
behind it: version control, how applications talk to each other over the internet, component-based
interfaces, servers, databases, and finally all of it joined into one system that you deploy.
Roughly seven to nine hours a week, about four of them with me. That's a normal school-term load and
it's meant to fit around everything else you do.
You'll finish with twelve projects, a public portfolio, a year of commit history, and one full-stack
application running at a real address.
Why the order looks strange
You will, at some point in the first two months, want to skip ahead. Everyone does. So here is the
reasoning, and you can hold me to it.
Fundamentals before frameworks. An abstraction is easy to trust once you know what it's
hiding. React takes about an afternoon to understand if you've already spent fifteen weeks keeping a
page in step with a variable by hand, because you'll recognise the problem it solves. Meet React first
and you learn a set of rules you can't reason about, which is why so many people can build a tutorial
app and nothing else.
Four weeks of HTML with no CSS. If you learn to reach for HTML when you want something to
look different, you write pages that can't be restyled and can't be read by anything except a browser.
Four weeks of structure on its own is what stops that habit forming. In week 4 you'll find out who all
that structure was actually for, and it isn't you.
Three weeks of JavaScript with nothing on screen. Variables, functions and data shapes are
worth being fluent in before buttons and clicks start competing for your attention. Week 14 is when
things start moving, and it goes fast because of the three weeks before it.
Databases last, not first. By the time you meet PostgreSQL you'll have spent six weeks losing
all your data every time you restart your server. It's genuinely annoying, and that's the point.
You'll arrive at databases wanting one.
None of the weeks are padding. If a week feels slow, tell me and we'll talk about it, but the order
itself isn't negotiable.
What you'll be able to do by the end
Not "have heard of". Be able to do, on your own, with documentation and no tutorial.
- Write semantic, accessible HTML and explain what a browser does with it.
- Build an interface that works properly on a phone, a tablet and a laptop.
- Write JavaScript to solve a problem you've never seen before.
- Debug something that's broken without changing things at random.
- Use Git and GitHub the way a team does: branches, pull requests, honest history.
- Read the documentation for an API nobody has taught you and build something with it.
- Build an interface out of React components and say where each piece of state belongs.
- Build a REST API in Node and Express, with real validation and real login.
- Design a relational database and get answers out of it with SQL.
- Store passwords so that losing your database isn't a disaster for the people in it.
- Put an application on the internet and work out why it broke there and not on your laptop.
- Write documentation somebody else can follow without asking you a single question.
- Explain any of the above out loud to somebody who wasn't there when you built it.
Being honest about what this is: a strong beginner foundation. It doesn't make you an
expert and it isn't a job qualification. What it gives you is the ability to keep going without a
teacher, which is worth more than either.
How your week works
Three sessions with me, and some work on your own in between.
| When | What | How long |
| Tuesday Designated Time | Lesson. New material, a demonstration, then
you writing code with me watching. | 90 min |
| Wednesday to Friday | Your own work. Practice, reading, and the week's project
task. Three separate jobs, each with something to show at the end. | 2–3 hrs |
| Saturday Designated Time | Build session. The week's project, plus
debugging, testing and getting it committed. | 2 hrs |
| Sunday Designated Time | Review. You show me what you did, we look at
what's stuck, and I set up the week ahead. | 45 min |
The midweek work is about two and a half hours spread over three days, not one long sitting. Little
and often beats a panic on Friday night, and you'll remember more of it.
On Tuesdays, you type. I'll point at the screen. I won't touch the keyboard. If it takes you
ninety seconds to find a bracket, it takes ninety seconds. This is deliberate and it's the fastest way
to learn.
We fix the exact times when you start, around your school timetable. If they need
to move later, say so early rather than just missing a session.
What I expect, and what you can expect from me
From you
- Turn up ready. Laptop charged, last week's work where you can find it.
- Have a go before you ask. Ten minutes of genuine effort, then ask.
- Bring evidence when you're stuck, not just "it doesn't work".
- Keep your own notes. Not for me, for you in three months.
- Do the practice work honestly. Copying an answer costs you the week.
- Use Git from the week we start it, every week after.
- Read documentation, not only tutorials.
- Look after your passwords, your API keys and your personal information.
- Explain your own work at reviews. Out loud, without notes.
- Tell me when the schedule needs to change. Don't go quiet.
From me
- Teach it in an order that works, and tell you why the order is what it is.
- Keep examples small enough to hold in your head.
- Care more about your questions than your typing speed.
- Give feedback that's specific and that you can act on. No vague praise.
- Be straight with you about where you are. I won't tell you something is mastered when it isn't.
- Adjust the workload around school and around you.
- Never let AI do your thinking, including mine.
How you're assessed
There's no exam. Assessment runs all year and it exists to find out what you actually understand, so
that I know what to teach next.
Every Sunday we do a short review. Once a month there's a longer checkpoint where we look at the
whole picture. Both are conversations, not tests, and you can't fail them.
What's being measured
| Area | Roughly | Meaning |
| Understanding | 25% | Can you say why a solution works? |
| Building | 35% | Can you turn a requirement into working code and finish it? |
| Debugging | 20% | Can you read the evidence and get yourself out of trouble? |
| Project quality | 15% | Is it organised, usable, accessible and documented? |
| Explaining | 5% | Can you talk somebody through what you built? |
How topics get marked
- ✅ Mastered. You can use it on your own, cold, without looking it up.
- 🟢 Good. You can use it with documentation to hand.
- 🟡 Needs practice. You get there, but it's slow or you need prompting.
- 🔴 Needs reteaching. Something underneath it is missing. We go back.
Nothing gets marked mastered because you finished a tutorial. Mastery means evidence that you can use
it independently, which usually means doing it once with nobody helping.
Going back to a topic is normal and expected. A week ending on the calendar isn't a reason to move on
if the foundation under it is shaky, and I'd rather spend an extra week now than have you struggling in
month six.
Getting unstuck
You'll be stuck a lot. That's not a problem, it's most of the job. But there's a good way and a bad
way to be stuck, and the good way is worth learning early.
Before you ask anyone
- Read the error. All of it, out loud if it helps. Beginners skip past error messages, and
they're usually the answer.
- What did you expect, and what happened instead? Say both in words before you touch anything.
- What's the smallest test that would tell you which of your guesses is right?
- Check the documentation. Not a tutorial, the actual reference.
- Ten minutes. Then stop. Being stuck for an hour on your own isn't noble, it's just slow.
When you ask
Bring three things and you'll usually get a useful answer in one message instead of five:
- The exact error message, copied, not described.
- What you expected to happen.
- What you already tried.
This works on me, on Stack Overflow, on a forum and on your future colleagues. A question with
evidence attached gets answered. "It's broken" doesn't.
Using AI while you're learning
AI tools are good at explaining a concept a different way, decoding an error message, and suggesting
what to investigate. They're also very good at handing you a finished answer that looks exactly like
understanding until somebody asks you a question about it.
So the rule here is learning first, in this order:
- Try it yourself.
- Check the documentation.
- Investigate the error.
- Ask for a hint.
- Ask for an explanation.
- Write the fix yourself.
- Be able to explain what you wrote.
Fine
- Explaining something in plainer language when a page hasn't landed.
- Asking for a hint with the answer withheld.
- Working out what an error message means and what usually causes it.
- Reviewing code you wrote and suggesting improvements.
- Pointing you at the right documentation or some practice problems.
- Generating revision questions.
Not fine
- Finishing work you don't understand.
- Producing whole applications you paste in without reading.
- Standing in for learning the fundamentals.
- Claiming work you didn't do.
- Pasting in passwords, API keys or anyone's personal information. Ever.
The test I'll use: if AI helped with anything beyond a trivial task, you should be able to tell me
what the code does, what you changed, why it works, and how you know. Sometimes I'll ask you to rebuild
a small piece of it with nothing open. If you can, the AI helped you learn. If you can't, it did the
work and you're now behind without knowing it.
Staying safe online
From week 10 you'll have a GitHub account and your code will be public. That's a good thing and it
needs a few rules, which we'll set up together with a parent or guardian before the account exists.
What never goes in a repository
- Your home address, your school's name, or your timetable.
- Your phone number or any identity document.
- Photographs that show where you live or study.
- Passwords, API keys or tokens. Not once, not temporarily, not in a branch you plan to delete.
That last one matters more than it looks. Git remembers everything. Deleting a file doesn't remove it
from the history, and a public repository is copied and indexed by other people within minutes. If a key
ever gets committed, tell me straight away and treat it as burnt. We generate a new one. Nobody will be
cross with you about it, but hiding it makes it worse.
Accounts
- Strong, unique password. Not one you use anywhere else.
- Multi-factor authentication on, the same day you make the account.
- A username you'll still be happy with at twenty-five.
Being online generally
- Be civil with people, including strangers who are wrong.
- Careful with downloads, browser extensions and code from places you don't know.
- If an online interaction feels off, tell an adult. You don't need to be sure first.
- Never meet an online contact in person without an adult involved and a plan.
- What you publish stays online for years. Publish accordingly.
Looking after yourself
Coding should be one part of a reasonable week. Nothing here is worth staying up until two in the
morning for.
- Break up long sessions. Stand up, look at something far away.
- Sit comfortably, with decent light. Your back will thank you in ten years.
- Keep normal sleep. Tired debugging is worse than no debugging, and you'll undo your own work.
- Balance the screen against exercise, friends, schoolwork and rest.
A missed session can be made up. Your health, your sleep, your schoolwork and your safety come first,
and I mean that as an instruction rather than a nicety.
If you're finding a week genuinely miserable rather than just hard, say so. Sometimes the fix is
slowing down, sometimes it's a different explanation, and occasionally it's taking a fortnight off.
All three are fine. Quietly hating it is the only bad option.
What you'll build
Twelve projects. Each one reuses everything before it and adds exactly one new difficulty, which is
what makes the later ones possible.
| # | Week | Project | The new difficulty |
| 1 | 5 | Personal profile site | Structure, links, images, an accessible form |
| 2 | 10 | Responsive portfolio | It has to work on a phone, and it goes online |
| 3 | 14 | Calculator | Responding to a person |
| 4 | 15 | To-do app | Data that survives a refresh |
| 5 | 16 | Weather app | Data from another computer, arriving later |
| 6 | 17 | Quiz app | Nobody shows you the shape. You build it alone. |
| 7 | 18 | Expense tracker | Data with several dimensions, and filtering |
| 8 | 28 | Movie explorer | Search, paging, and every way it can fail |
| 9 | 34 | Student dashboard | Components, state, and live data in React |
| 10 | 40 | School REST API | You write the server this time |
| 11 | 45 | School database | Data that outlives the program |
| 12 | 49 | Full-stack system | All three layers, joined, with real login |
Every finished project gets a short README: what you built, what you built it with, what it still
can't do, and what you learned making it. Without that last part a repository is a folder of code
nobody can account for, including you.
The one in week 49 is your capstone. It gets deployed in week 51 and you present it in week 52.
What "finished" means
"It works on my laptop" isn't finished. We build this list together as the year goes, and from the
week each item appears it applies to everything you make after it.
- It works when somebody else opens it, on a different machine.
- The HTML validates with no errors.
- Every image has alt text that does the image's job.
- Every input has a real label.
- You can reach everything with the keyboard, and see where you are.
- The links still work after you move the folder.
- There's a README somebody else could follow.
- It works at phone, tablet and laptop widths.
- Every bit of text has enough contrast against its background.
- Loading, error, empty and success are all handled, not just success.
- No secrets anywhere in the repository.
- The commit history reads like a story, and it was merged through a pull request you reviewed.
Items 1 to 7 arrive in week 5, and the rest turn up as you learn what they mean. By the capstone
there are sixteen, plus a separate list for the API.
Phase 00/Week 1
Getting set up
Orientation and your development environment
Week 1Week 52
Before a language, a machine you can drive. One week on the four programs you'll live in for
the next year, and what each of them actually does. No HTML yet.
By the end of this phaseYou'll be able to
- Explain what the browser, the editor, the terminal and the runtime each do
- Make folders and files from the terminal instead of clicking around
- Open a project, run it, change it and see the change
- Find your way around your own filesystem
What you buildYour development environment, and a page called Hello Web
Nothing clever. A page with your name on it, typed by hand, before you know what any of
it means. Keep this file. Don't tidy it up, don't delete it, don't come back and improve it later.
Week01
The four tools
Your laptop is about to stop being a thing you use and start being a thing you drive. Four
programs, four jobs: the editor writes, the browser draws, the terminal navigates, and the runtime
runs JavaScript outside a page.
By the end of the week
- Say what each of the four programs does, and what it doesn't do
- Create a folder and a file from the terminal without touching the mouse
- Open a page in a browser and change it
- Find a message in the browser console
Topics
What programming is · files, folders and paths · VS Code · the terminal · browser developer tools · an introduction to Node.js
Your own work, between sessions
| Terminal drills, and write down every command in your own words | Saturday · 45 min |
| Install Node and check it runs | Saturday · 20 min |
| Read the MDN pages on how the web works, then draw it on paper | Sunday · 45 min |
| Build your Hello Web page | Saturday · 45 min |
What you hand in
- A folder called 01-hello-web with index.html in it
- notes/commands.md, with each command explained in your own words
- A hand-drawn diagram of a page load, and three words you couldn't define
Watch out for
- Saving the file as index.html.txt without noticing. Turn on file extensions before you start.
- Editing the file and forgetting to save, or saving and forgetting to refresh.
- Making the file in the wrong folder. Run pwd when something has gone missing.
Carried into the next phaseWhat sticks
- Edit, save, refresh. The loop you'll run about ten thousand times.
- The browser fixes broken HTML quietly, so what you see isn't always what you typed.
- Silence usually means a command worked. Most of them say nothing when they succeed.
Phase 01/Weeks 2 to 5
Structure first
HTML and web fundamentals
Week 1Week 52
Four weeks of HTML with no styling at all. Your pages will be black text on white and that's
correct. HTML says what something is; CSS says what it looks like. Keeping those separate in your
head now saves you months later.
In week 4 you find out who all this structure was for, and it turns out not to be you.
By the end of this phaseYou'll be able to
- Write a valid HTML document from memory and explain it as a tree
- Build a multi-page site whose links survive being moved to another computer
- Write alt text that carries what the image carried
- Build a form where every input is labelled and everything works from the keyboard
- Use the validator and a browser accessibility audit without being told to
- Record your work in Git as small, named save points
What you buildPersonal profile website
Three or four pages about you: who you are, what you're learning, what you've made. It's
the first thing in your portfolio and the first thing you'll show anyone.
Because it's about you, you can't fill it with placeholder text without noticing. That's deliberate.
Vague content hides structural problems; real content exposes them.
Week02
The page is a tree
Elements nest inside elements, the browser turns that nesting into a tree, and nearly every HTML
rule you'll meet follows from it. You'll also meet the validator, which is a free, tireless critic
that tells you the truth.
By the end of the week
- Write a valid HTML skeleton from memory
- Say why head and body are separate
- Read the element tree in developer tools
- Run a page through the validator and fix what it finds
Topics
Elements, tags and attributes · void elements · nesting and the document tree · head versus body · headings as an outline · paragraphs · strong and em · comments · whitespace · character entities · the W3C validator
Your own work, between sessions
| Rebuild Hello Web from memory, then list what you forgot | Saturday · 40 min |
| Extend the place page, and validate everything you've made | Saturday · 40 min |
| MDN: basic HTML syntax, headings and paragraphs | Sunday · 25 min |
| Start the profile site: index.html, structure only | Saturday · 45 min |
What you hand in
- place.html with three sections and no validator errors
- 02-profile-site/index.html with real content, structure only
- Your rebuilt Hello Web page and the list of what you forgot
Watch out for
- Closing tags in the wrong order. The browser hides it, the validator doesn't.
- Thinking indentation shows up on the page. It doesn't.
- Choosing heading levels by how big they look. They're an outline, not font sizes.
- Smart quotes pasted from a word processor. The attribute fails silently.
Week03
Addresses, again
A link is an address, and it's the same kind of address you typed into the terminal in week 1.
Once relative paths click, the multi-page web stops being mysterious and starts staying working when
you move the folder.
By the end of the week
- Write the right href from one page to another without guessing
- Write alt text that would still be useful if the image never loaded
- Build a table with a caption and proper headers
- Move your whole project folder and have everything still work
Topics
a and href · relative versus absolute paths · ./ and ../ and / · img with src and alt · image formats and file size · ul, ol and li · nested lists · table with caption, thead, tbody and th scope
Your own work, between sessions
| Paths drill: a deep folder tree, then move the whole project | Saturday · 45 min |
| MDN: creating links, images in HTML | Sunday · 40 min |
| Profile site: about and projects pages | Saturday · 45 min |
| Tab through your site and list what you can't reach | Saturday · 15 min |
What you hand in
- A three-page site with six working links and an images folder
- Two images with alt text you can defend out loud
- One table with a caption, one real list
- Your list of everything the keyboard couldn't reach
Watch out for
- Absolute paths like C:/Users/... They work for you and nobody else.
- Backslashes. The web only uses forward slashes.
- Wrong capitalisation. Invisible on your laptop, fatal on a server. This one costs people days.
- alt="image" or alt="photo of...", which tells the reader nothing new.
- Links that say "click here".
Week04
Meaning over appearance
This is the week HTML stops being decoration. Semantic elements and labelled inputs exist so that
somebody who never sees your page can still use it, and the keyboard test makes that real in about
two minutes.
By the end of the week
- Build a form where every input is labelled and reachable by keyboard
- Structure a page with landmarks and justify each one
- Run an accessibility audit and understand what it's telling you
- Explain to a non-technical adult why labels matter
Topics
header, nav, main, article, section, aside, footer · when a div is still right · forms · label paired with id · input types · required · textarea, select, button · fieldset and legend · focus order · title and meta description
Your own work, between sessions
| Rebuild the form from memory, then break it three ways and note the cost | Saturday · 45 min |
| MDN web forms and accessibility; the WebAIM introduction | Sunday · 45 min |
| Profile site: landmarks on every page, plus the form | Saturday · 45 min |
| Triage every accessibility finding into fixed, deferred or not-understood | Saturday · 20 min |
What you hand in
- The profile site with semantic landmarks and one main per page
- A working, fully labelled contact form
- accessibility-notes.md with every finding triaged
- A short list of things you can't fix until you learn CSS
Watch out for
- Using a placeholder instead of a label. It disappears the moment you type.
- A for attribute pointing at a class instead of an id. Looks right, does nothing.
- A clickable div instead of a button. Identical on screen, invisible to the keyboard.
- Two main elements, or none.
- Every input set to type="text", which costs you free validation and the right phone keyboard.
Week05
Finish it, and start keeping receipts
A project isn't done when it works. It's done when it validates, survives the keyboard, has a
README somebody could follow, and exists in a history you can go back through. This is also the week
your work starts having a past.
By the end of the week
- Say what finished means, and check it
- Make a save point of your whole project and give it a name
- Get back a file you broke
- Write a README somebody else could use
Topics
The definition of finished · the validator as a gate · an accessibility pass · README as a kind of writing · Git: init, status, add, commit, diff, log, restore · commit messages · .gitignore
Your own work, between sessions
| Put two older projects under version control; practise recovery three times | Saturday · 45 min |
| Pro Git chapter 1; draft your README | Saturday · 40 min |
| Finish the site against the definition of finished | Saturday · 50 min |
| Bring your fix-in-phase-2 list up to date | Sunday · 10 min |
What you hand in
- The finished profile website, validated and keyboard-complete
- A Git repository with eight or more meaningful commits and a .gitignore
- A README: what it is, how to open it, what it can't do, what you learned
Watch out for
- One enormous commit called "stuff". Everyone does this once.
- Running git add . without looking at what's in it.
- Not reading what git status says. It's written in English and it tells you what to do next.
- Panicking at the editor that opens when you forget -m. Learn how to get out of it first.
- Expecting it to appear online. There's no GitHub yet, that's week 10.
Carried into the next phaseWhat sticks
- The definition of finished, seven items long by week 5.
- Three checks before anything is done: keyboard, validator, developer tools.
- Lowercase filenames with hyphens, always. This one bites hard in week 51 if you skip it.
- Small commits with names that say what changed.
Phase 02/Weeks 6 to 10
Making it look right
CSS and responsive web design
Week 1Week 52
CSS gives you a visible result for every line you write, which is motivating and also the
trap. It's the easiest phase to spend five weeks on and learn nothing durable.
So the order is deliberate: week 6 is about predicting, not decorating. Week 7 replaces taste with a
system. Layout only arrives once you can describe what you're building instead of nudging it into
place.
By the end of this phaseYou'll be able to
- Predict how big an element will be before you measure it
- Say which rule won and why
- Build a set of design tokens and restyle a whole site by editing one block
- Check any text against its background and fix what fails
- Lay out a row or column with Flexbox, and a grid with Grid, and know which to reach for
- Write mobile-first CSS with breakpoints chosen from your content
- Publish a repository to GitHub safely
What you buildResponsive personal portfolio
The site you'll actually point people at, and the one that has to survive the whole
year. Decisions you make carelessly now get lived with until week 52, which is the most honest argument
there is for building a proper system.
Week06
Every box is a box
CSS is three things: pick something, name a property, give it a value. The syntax takes ten
minutes. What takes a week is that everything on the page is a rectangle with four layers, and that
two rules can both apply while only one wins.
By the end of the week
- Predict an element's width before you measure it
- Explain why one rule beat another
- Read the styles panel, including the rules with lines through them
- Fix the focus ring you couldn't fix in week 4
Topics
Selector, property, value · the three ways to attach CSS · element, class and id selectors · the cascade · specificity as a count · inheritance · the box model · box-sizing · block versus inline · margin collapse
Your own work, between sessions
| Box model drills: five specifications, verified, plus written predictions | Saturday · 45 min |
| MDN: the box model, handling conflicts | Sunday · 45 min |
| Portfolio: reset, base typography, spacing | Saturday · 45 min |
| Clear three more items from your phase 2 list | Saturday · 20 min |
What you hand in
- One external stylesheet with a deliberate order and no !important
- A card built to an exact specification, proved in developer tools
- Your written predictions, marked right or wrong
Watch out for
- The stylesheet isn't linked, or the filename is wrong. It fails completely silently.
- Using ids to style things. They win fights they should lose.
- Reaching for !important to end an argument. The argument comes back bigger.
- Assuming width includes padding. It doesn't, until you set box-sizing.
- Nudging numbers until it looks right without knowing which property did the work.
Week07
A system instead of taste
Pages that look considered aren't made by good taste applied one decision at a time. They're made
by choosing a small set of values once and then refusing to use anything else.
By the end of the week
- Build a token block with custom properties
- Restyle a whole site by changing only those values
- Check any text and background pair for contrast and fix what fails
- Say why you chose the colours you chose
Topics
Font stacks and fallbacks · web fonts · rem versus px · unitless line-height · measure · a type scale · hex, rgb and hsl · contrast ratio · a spacing scale · CSS custom properties · :root
Your own work, between sessions
| Type and spacing pass on one long page, plus the memory test | Saturday · 45 min |
| MDN: styling text, custom properties; audit three sites you like | Sunday · 45 min |
| Portfolio: full token block, contrast passing | Saturday · 45 min |
| Write up your contrast audit with the actual ratios | Saturday · 20 min |
What you hand in
- A :root block: colours, spacing scale, type scale, all named for what they're for
- A stylesheet with no stray hex values and no arbitrary spacing
- A written contrast audit: every pair, its ratio, pass or fail
Watch out for
- Pure black on pure white. Harsh to read at length.
- Body text sized in px, which overrides what a reader set in their own browser.
- Light grey text that looks elegant on your laptop and vanishes on a phone outdoors.
- Twelve nearly identical greys, which is the sign the system doesn't exist yet.
- More than two typefaces.
Week08
One dimension at a time
Flexbox arranges things along a single axis. Almost every flexbox problem in the world is
confusion about which axis is which, and one demonstration fixes it permanently.
By the end of the week
- Build a navigation bar and a card row that behave at any width
- Say which axis justify-content works on, for any direction
- Tell a container instruction from an item instruction
Topics
display: flex · container versus item properties · main and cross axes · justify-content and align-items · gap · flex-wrap · flex-grow, flex-shrink, flex-basis · align-self · order, and why it's risky
Your own work, between sessions
| Axis drills: eight layouts, property predicted before trying | Saturday · 45 min |
| MDN Flexbox; Flexbox Froggy; write down what flex: 1 means | Sunday · 40 min |
| Portfolio: nav, card row and footer in Flexbox | Saturday · 45 min |
| Note every layout failure at 360px width | Saturday · 15 min |
What you hand in
- Nav, project cards and footer all laid out with Flexbox
- Your drill sheet, marked for how often you picked the right property first time
- A list of everything that breaks at phone width
Watch out for
- Putting a flex property on the wrong element. Silent, and the number one cause of "flexbox doesn't work".
- Margins where gap belongs.
- Mixing up justify and align. The direction-swap demo cures this.
- Forgetting flex-wrap, then wondering why things squash instead of wrapping.
- Treating flex: 1 as magic rather than three properties with defaults.
Week09
Mobile first is an order of operations
Grid handles two dimensions at once, which is a different job from Flexbox rather than a better
one. And responsive design isn't something you add at the end. It's the order you write the CSS
in.
By the end of the week
- Build a layout that works at phone, tablet and laptop widths
- Explain what the viewport meta tag does
- Choose a breakpoint from where your content breaks, not from a list of devices
- Take apart the one-line responsive grid and say what each piece does
Topics
display: grid · grid-template-columns · the fr unit · repeat, minmax, auto-fit · grid versus flex · the viewport meta tag · media queries · mobile-first and min-width · relative units · the device toolbar
Your own work, between sessions
| Grid drills: six layouts, with grid-or-flex justified for each | Saturday · 45 min |
| MDN: grid, responsive design; check three sites on two devices | Sunday · 45 min |
| Portfolio: full responsive pass at three widths | Saturday · 50 min |
| Check the tab order still makes sense in every reflowed layout | Saturday · 15 min |
What you hand in
- The portfolio working at 360, 768 and 1200 with no sideways scrolling
- Mobile-first CSS: narrow styles as the default, min-width queries adding to them
- A note of why each breakpoint sits where it does
Watch out for
- Forgetting the viewport meta tag. Nothing else matters until it's there.
- Desktop-first max-width queries, which make the complicated layout the default.
- Fixed pixel widths, the most common cause of a sideways scrollbar.
- Images with no max-width: 100%, the second most common.
- Naming breakpoints after devices. There's no standard phone width.
Week10
Put it online
The portfolio gets finished and your work goes on the internet for the first time. That's a
technical step and a safety conversation in equal measure, and the second one matters more.
By the end of the week
- Push a repository to GitHub and serve a site from it
- Say what must never go into a public repository, and why deleting it later isn't enough
- Work out why something works locally and breaks live
- Write a README with screenshots and honest limitations
Topics
Finishing · responsive and accessibility checks · creating a GitHub account safely · the online safety rules · remotes and git push · .gitignore · README with screenshots · GitHub Pages
Your own work, between sessions
| Push two older projects with READMEs; tidy your profile | Saturday · 45 min |
| GitHub docs and multi-factor authentication; run the checks against the live site | Saturday · 40 min |
| Finish and polish; read the whole site aloud | Saturday · 50 min |
| Write the README as a case study, with a screenshot | Saturday · 30 min |
What you hand in
- The portfolio live at a public URL, meeting all nine points on the deployed site
- A GitHub account with multi-factor authentication on
- Three repositories pushed, each with a README
- A note of anything that only failed in production
Watch out for
- Making the account before the safety conversation. Do it in the right order.
- Leaving multi-factor authentication for later. It never gets turned on later.
- Capitalisation breaking the live site. Week 3 warned you about this.
- A README that only says the project name.
- Assuming the live site updated instantly. Give it a minute and hard-refresh.
Carried into the next phaseWhat sticks
- Design tokens. Every project from here starts with a :root block.
- Container or item? The first question to ask any layout that won't behave.
- Your live site is a second environment. "It works on my machine" stops being an argument.
- Check what's tracked before your first push. Five seconds, and it saves you in week 16.
Phase 03/Weeks 11 to 18
Real programming
JavaScript
Week 1Week 52
Eight weeks, the longest block of the year, and the one where people most often stall. So
here's the warning up front: the first fortnight is harder than anything before it. CSS gave you
something to look at for every line you wrote. JavaScript gives you a blank screen and an error message.
That's the shape of the phase, not a verdict on you.
Weeks 11 to 13 stay in the terminal with nothing on screen at all. From week 14 the pace picks up
sharply, because by then every project is the same three ideas applied to a different thing.
By the end of this phaseYou'll be able to
- Predict what a short program does before you run it
- Write a function from a description, and explain returning versus printing
- Model real information as a list of objects and answer questions about it
- Change a page in response to what somebody does
- Keep data so it survives a refresh
- Get data from another computer and explain why your code doesn't wait for it
- Handle loading, error, empty and success as four things you always build
- Improve working code without changing what it does
What you buildFive projects: calculator, to-do, weather, quiz, expense tracker
Each one reuses everything before it and adds exactly one new difficulty. The
calculator teaches the pattern. The to-do proves it survives saving. The weather app proves it survives
waiting. The quiz proves you can do it with nobody showing you the shape. The tracker proves it scales to
real questions.
Week11
Telling the machine what to do
For ten weeks you've described things. Now you give instructions. The change is bigger than the
syntax makes it look. Everything runs in a terminal this week, which is deliberate.
By the end of the week
- Predict the output of a short program before running it
- Choose the right comparison operator and say why
- Explain what happens when JavaScript compares two different types
Topics
Where JavaScript runs · let and const, and why not var · strings, numbers, booleans, null, undefined · template literals · operators · === versus == · type coercion · typeof · if, else if, else · truthiness · console.log
Your own work, between sessions
| Thirty predictions in predictions.js, plus five conditionals | Saturday · 45 min |
| MDN variables, maths and decisions; Eloquent JavaScript chapter 1 | Sunday · 45 min |
| Three small Node programs, solved on paper first | Saturday · 45 min |
| Write an explanation of type coercion in your own words | Sunday · 15 min |
What you hand in
- A javascript-practice repository under version control
- predictions.js: thirty predictions in comments, honestly marked
- Eight small programs, with the paper plan for each kept
Watch out for
- Using = where === belongs in a condition. It assigns, so the condition is always true.
- Running code to find out what it does instead of predicting first. Break this habit now.
- Not reading the error message. Read it out loud before you touch anything.
- Trusting the line number on a syntax error. It's where the parser noticed, not where you went wrong.
Week12
Naming a recipe
A function is a named recipe: things go in, one thing comes back. The hard part isn't the syntax,
it's return, which almost everybody confuses with console.log for about a week.
By the end of the week
- Write a function from a plain-language description
- Explain the difference between returning and printing
- Choose the right loop without trial and error
Topics
Function declarations · parameters and arguments · return versus console.log · arrow functions · one function, one job · naming · for...of · the classic for loop · while · arrays, indexing and length · push, includes, indexOf, slice
Your own work, between sessions
| Eight functions from descriptions, each tested with three inputs | Saturday · 45 min |
| MDN functions and loops; Eloquent JavaScript chapter 3 | Sunday · 45 min |
| Rewrite last week's programs using functions | Saturday · 30 min |
| Array practice: five questions about your own marks | Saturday · 45 min |
What you hand in
- Sixteen or more functions, each returning, each tested with three inputs
- Last week's programs rewritten with functions, which is your first refactor
- A growing edge-case list, unfixed, saved for week 17
Watch out for
- Printing instead of returning. The symptom shows up as undefined somewhere else entirely.
- Off-by-one errors from <= in a classic for loop.
- An infinite loop because nothing inside moves the condition. Learn Ctrl+C.
- Functions that do three things. You can usually tell from the name.
- Writing five functions before running any of them, then having five bugs at once.
Week13
Boxes with labels
A list of objects is the shape almost all real data arrives in: from an API in week 16, from a
database in week 41, from a form in week 15. Learn to model something real and get at the parts of
it.
By the end of the week
- Model something real as a list of objects
- Answer questions about it with filter and map rather than hand-written loops
- Explain why const doesn't stop you changing an object
Topics
Objects and properties · dot versus bracket notation · nested objects · arrays of objects · const does not mean unchangeable · block scope · map, filter, find · sort · naming, single responsibility, and comments that earn their place
Your own work, between sessions
| Data drills: ten questions about a dataset | Saturday · 45 min |
| MDN objects and array methods; Eloquent JavaScript chapter 4 | Sunday · 45 min |
| A naming pass over everything you've written this phase | Saturday · 25 min |
| Clean up your longest program without changing what it does | Saturday · 40 min |
What you hand in
- A dataset you care about: six or more objects, four properties each
- Five functions answering real questions, tested against normal, empty and broken input
- An older program cleaned up: better names, functions extracted, useless comments gone
Watch out for
- Two parallel arrays kept in step by hand. This is the problem objects exist to solve.
- Expecting const to stop you changing what's inside an object.
- Reaching past the end of a list, which gives "cannot read properties of undefined".
- Comments that just restate the code. A comment should say why, not what.
Week14
Changing the page while it's open
The page in memory isn't the file on disk. JavaScript changes the model, the browser redraws, and
your file never moves. Three weeks of invisible work start showing up on screen, and you build the
first project of the phase.
By the end of the week
- Find elements, change them, and respond to clicks
- Explain why the file on disk doesn't change
- Keep the data in one place and draw the screen from it
Topics
The DOM as a live tree · querySelector and querySelectorAll · textContent versus innerHTML · classList · creating and appending elements · addEventListener · the event object · keeping state in a variable
Your own work, between sessions
| DOM drills, plus three small widgets: a counter, a toggle, a colour picker | Saturday · 45 min |
| MDN DOM scripting and events; write down why innerHTML with user input is risky | Sunday · 45 min |
| Calculator: arithmetic, clear, styled with Grid | Saturday · 50 min |
| Add every edge case you find to your running list | Saturday · 15 min |
What you hand in
- A working calculator: digits, four operators, equals, clear, deployed with your portfolio
- State kept in variables, with exactly one function writing to the page
- A documented edge-case list, with at least one fixed properly
Watch out for
- The script running before the elements exist, so querySelector returns null and nothing works.
- Writing to the page from six different places. It works for three features and collapses on the fourth.
- Reading state back off the screen instead of keeping it in a variable.
- Using innerHTML by habit because it's shorter. Use textContent.
- String concatenation instead of arithmetic, so 5 + 3 shows as 53.
Week15
Making it survive a refresh
Everything your calculator knew disappeared when you reloaded. This week the data moves somewhere
that outlives the page, and the pattern from week 14 becomes the backbone of a real application.
By the end of the week
- Build a form that adds things to a list
- Save data so it's still there tomorrow
- Say where the truth lives in your application
Topics
Forms in JavaScript · the submit event and preventDefault · reading input values · validating before saving · localStorage · storage holds strings only · JSON.stringify and JSON.parse · unique ids · state and render
Your own work, between sessions
| Storage drills, plus a page that remembers your name | Saturday · 45 min |
| MDN localStorage, forms and JSON; look at what three sites store | Sunday · 45 min |
| To-do app: complete, delete, validation, empty state | Saturday · 50 min |
| Style it using the token system you already have | Saturday · 20 min |
What you hand in
- A working to-do app: add, complete, delete, and it survives a refresh
- Validation, an empty state, and text rendered safely
- One array of truth, one render function, nothing else touching the page
Watch out for
- Forgetting preventDefault. Everything works for a fraction of a second, then the page reloads.
- Storing an object without stringify, which gives you the useless text [object Object].
- Not handling the first visit, when nothing is stored yet.
- Deleting by position instead of by id. It works until the list gets sorted.
- Removing the element from the page instead of changing the array.
Week16
Work that finishes later
Some work takes time and your program can't stand still waiting for it. Asynchronous code is the
hardest idea in the phase and the one that unlocks everything after it. Expect this week to be
slow.
By the end of the week
- Fetch data from a public API and put it on the page
- Explain why the logs come out in an order that looks wrong
- Say honestly why an API key in frontend code isn't secret
Topics
Synchronous versus asynchronous · why a frozen page is the alternative · promises · fetch · async and await · reading JSON · try/catch around await · API keys and .gitignore
Your own work, between sessions
| Fetch drills: three public APIs, with the response shapes written down | Saturday · 50 min |
| MDN network requests and promises; write the ordering explanation in your own words | Sunday · 45 min |
| Weather app: search, fetch, render, style | Saturday · 50 min |
| List every way you manage to break it | Saturday · 15 min |
What you hand in
- A weather app that searches by city and shows real data
- Your API key in an ignored file, confirmed untracked before you push
- A written explanation of why the logs come out 1, 3, 2
Watch out for
- Forgetting await, then finding a pending promise where the data should be.
- Forgetting the second await for .json().
- Assuming the response shape instead of logging it and looking.
- Expecting fetch to throw on a 404. It doesn't, and week 17 explains why.
- Committing your API key. Check what's tracked before every push from now on.
Week17
The other two thirds
Everything you've built works when the input is valid, the network is fast and the server is up.
That describes almost none of the real conditions software runs in. This week is the rest of
reality, and you also build a project with nobody showing you the shape.
By the end of the week
- Handle a request that fails, times out or returns nothing
- Build all four states of any screen that fetches data
- Write an error message that helps the person reading it
- Build a working application from a blank file
Topics
try, catch, finally · throw and error objects · why fetch does not reject on a 404 · response.ok and status codes · loading, error, empty, success · defensive rendering · input validation · guard clauses
Your own work, between sessions
| Break the to-do app and the calculator five ways each; fix the three worst | Saturday · 50 min |
| MDN error handling and status codes; use three apps with the network off | Sunday · 45 min |
| Quiz app: scoring, feedback, restart, and surviving broken data | Saturday · 50 min |
| Weather app: all four states working | Saturday · 25 min |
What you hand in
- A quiz application you built without being shown the structure
- The weather app handling loading, error, empty and success
- Two older projects improved after you deliberately broke them
Watch out for
- Assuming try/catch covers a 404. It doesn't. Check response.ok yourself.
- Catching an error and doing nothing with it. An empty catch is worse than none.
- Showing the raw error object to the user. Detail to the console, a message to the person.
- No loading state, so slow looks exactly like broken.
- An empty state that looks like an error. "No results" and "something went wrong" are different things.
Week18
Make it yours
One more project pulling everything together, then the part that actually makes it stick: going
back over five projects and improving code that already works.
By the end of the week
- Model data with more than one dimension
- Improve working code without changing what it does, and know that you haven't
- Say what all five of your projects have in common
Topics
Data modelling for a real application · filtering and totals · dates · refactoring · extracting functions · naming · the JavaScript definition of finished
Your own work, between sessions
| Refactor two more projects, with the behaviour verified unchanged | Saturday · 50 min |
| READMEs and screenshots for all five projects; portfolio updated | Saturday · 45 min |
| Expense tracker: delete, filter, totals, empty state | Saturday · 45 min |
| Write your own honest assessment: can do, can do with docs, still hard | Sunday · 20 min |
What you hand in
- An expense tracker: add, delete, filter by category, totals, and it persists
- Five working JavaScript projects, deployed and linked from your portfolio
- At least three of them refactored, with the behaviour checked against a written list
- A README with screenshots for every project
Watch out for
- Refactoring and adding features at the same time, so you can't tell which broke it.
- No written list of what the app should do, so "it still works" is a feeling rather than a check.
- Making five changes before checking. Slower overall, always.
- Money stored as a decimal, which is where 0.1 + 0.2 starts to matter.
- Skipping the refactor because everything already works. That's the week where it sinks in.
Carried into the next phaseWhat sticks
- Data, render, actions. The pattern behind all five projects, and the thing React automates later.
- Loading, error, empty, success. Four states, every time data can fail.
- Predict before you run. It's the only habit that catches a logic error.
- Keep an edge-case list. Start it in week 12 and never stop adding.
Phase 04/Weeks 19 to 22
Keeping history
Git and GitHub
Week 1Week 52
A deliberately lighter four weeks after the hardest stretch of the year. You've been
committing since week 5 and pushing since week 10 without anybody explaining what either does. That turns
out to be an advantage: every part of the model has something to attach to.
By the end of this phaseYou'll be able to
- Say which of Git's three areas any file is in
- Split a session's work into commits that tell a story
- Explain what a branch actually is, and make them freely
- Resolve a merge conflict without panicking
- Get back committed work from any point
- Write a README a stranger can follow
- Take a change through branch, pull request, review and merge
What you buildPublishing and documenting everything you've already built
No new application. Every project from weeks 2 to 18 brought up to a publishable
standard and republished properly. You need seven repositories to practise on and you already have
them.
Week19
What Git has been doing all along
You've been committing for fourteen weeks without knowing what a commit is. That's the right way
round: everything you learn now attaches to something you've already done.
By the end of the week
- Say which of the three areas a file is in
- Read git diff and git log fluently
- Split one afternoon's work into commits that tell a story
Topics
Why version control exists · working directory, staging area, repository · commits as snapshots · git diff and git diff --staged · atomic commits · commit messages · git log · git show · git blame
Your own work, between sessions
| Staging practice across three projects; try git add -p twice | Saturday · 45 min |
| Pro Git chapter 2; audit every commit message you've written since week 5 | Sunday · 40 min |
| Rewrite the last three messages of each project, as an exercise | Saturday · 40 min |
| Find the commit that introduced a bug in a repository | Saturday · 25 min |
What you hand in
- Three projects with work split into deliberate, single-purpose commits
- A written audit of your own commit messages, marked useful, vague or useless
- Four answers found from history alone, without opening a file
Watch out for
- git add . without looking. That's the habit the staging area exists to replace.
- Committing without checking what's actually staged.
- Messages that describe files ("updated index.js") rather than changes.
- One commit per session regardless of what's in it.
- Wanting to go back and rewrite your old bad commits. Don't. An honest dull history beats a tidied one.
Week20
A branch is a label
Nearly everything confusing about branches comes from imagining they're copies of your folder.
They aren't. A branch is a movable label pointing at a commit, and once that lands, merging and
conflicts stop being frightening.
By the end of the week
- Work on a branch and merge it back
- Resolve a merge conflict
- Get back committed work from any point in the history
Topics
Branches as movable pointers · git branch, switch, checkout · merge and fast-forward · merge conflicts and how to read them · git log --graph · git restore and git revert
Your own work, between sessions
| Branch reps: five branches, various merges, two conflicts resolved | Saturday · 45 min |
| Pro Git chapter 3; Learn Git Branching; draw a merge from memory | Sunday · 40 min |
| A real feature on a branch, merged, with three or more commits | Saturday · 45 min |
| Practise all four recovery situations on a scratch repository | Saturday · 25 min |
What you hand in
- At least four merge conflicts resolved, two of them on your own
- A real feature built on a branch and merged into a live project
- A drawing, from memory, of what a merge does to the labels
Watch out for
- Believing a branch is a copy of the folder. It's the root of nearly all branch anxiety.
- Leaving conflict markers in the file. The ======= line is the one people miss.
- Switching branches with uncommitted work and losing track of which version is on screen.
- Panicking at a conflict and deleting the branch. Conflicts are normal and expected.
- Branch names like test, test2, new. Useless within a week.
Week21
A repository a stranger can use
Your code is public and none of it explains itself. Writing the documentation turns out to be the
fastest way to notice what you don't actually understand.
By the end of the week
- Write a README somebody could follow with no help
- Set up .gitignore properly
- Spot what's missing from somebody else's documentation
Topics
Remotes · fetch versus pull · README as a kind of writing · screenshots and relative paths · .gitignore patterns · repository descriptions and topics · issues · licences · your GitHub profile
Your own work, between sessions
| A proper README for every remaining project, with screenshots | Saturday · 50 min |
| GitHub docs on READMEs and .gitignore; read two real ignore files | Sunday · 40 min |
| Tidy your GitHub profile within the rules we agreed | Saturday · 40 min |
| Assess three open-source projects' documentation and rank your own | Saturday · 30 min |
What you hand in
- A seven-section README with a screenshot for every project
- Repository descriptions, topics and sensible .gitignore files throughout
- Written assessments of three real projects' documentation
Watch out for
- A README containing only the project name. That's the default state of most repositories.
- Broken screenshot paths, which is usually capitalisation again.
- No limitations section, out of modesty or from not having looked.
- Setup instructions that assume things the reader doesn't know.
- Treating documentation as optional because the code works.
Week22
Working like a team of one
The branch-and-pull-request workflow is how essentially every software team works, and you can
practise all of it on your own repositories before you ever join one.
By the end of the week
- Take a change from branch to pull request to merge
- Review your own work as though somebody else wrote it
- Leave a review comment that's useful rather than blunt
Topics
The feature-branch workflow · pushing a branch · opening a pull request · writing a description · reviewing your own diff · merge, squash and rebase · linking issues · protecting main
Your own work, between sessions
| Publish three projects through the full pull request workflow | Saturday · 50 min |
| GitHub docs on pull requests; read a real merged pull request conversation | Sunday · 40 min |
| Finish the catalogue; update your portfolio with every link | Saturday · 40 min |
| Review a pull request and leave line comments | Saturday · 25 min |
What you hand in
- Every project published through branch, pull request, review and merge
- At least seven pull requests, each with a real description
- Branch protection turned on for at least one repository
Watch out for
- Pushing straight to main out of habit.
- Pull request descriptions that just say "updates".
- Merging without reading the diff, which removes the whole point.
- Enormous pull requests with four unrelated changes in them.
- Review comments phrased as verdicts. Ask a question where you're unsure.
Carried into the next phaseWhat sticks
- Every feature on a branch, from week 23 onwards. No exceptions.
- Read the diff before you merge. Reviewing catches what writing never does.
- git diff --staged before every commit. Five seconds, and it keeps debug lines out of your history.
- revert, never reset --hard. It leaves an honest history and it can't lose your work.
Phase 05/Weeks 23 to 28
Talking to other computers
Frontend applications and APIs
Week 1Week 52
You already used fetch in week 16, so this isn't an introduction. It's the difference between
using something and understanding it. By the end you can be handed documentation for a service nobody has
taught you and build something with it, which is the point of the whole phase.
By the end of this phaseYou'll be able to
- Take a URL apart and say what a request and a response contain
- Diagnose a failure from its status code before reading any of your own code
- Read an unfamiliar API's documentation and construct the right request
- Build a search that fires one request instead of seven
- Design what a screen shows while loading, when it fails, and when there's nothing
- Handle more data than fits on one screen
- Say what each of your decisions traded away
What you buildMovie explorer
A search interface over a film database. It's the standard shape of a data-driven
frontend, which is exactly why it's worth building: nearly every application you meet afterwards is a
variation on it. It's also the first project where a naive version is visibly wrong rather than just
inelegant.
Week23
What actually travels
In week 16 fetch was a magic word that produced data. This week you open the envelope: a request
is a method, a path and some headers; a response is a number, some headers and a body.
By the end of the week
- Take a URL apart and name every piece
- Describe what a request and a response actually contain
- Read the network panel well enough to debug with it
Topics
The anatomy of a URL · scheme, host, path, query string, fragment · request method, headers and body · response status, headers and body · GET, POST, PUT, PATCH, DELETE · statelessness · the network panel · curl
Your own work, between sessions
| Network panel practice: five sites, five requests each, in a table | Saturday · 45 min |
| MDN HTTP overview, methods and URLs; three curl requests | Sunday · 45 min |
| Get a movie API key, read the documentation, make one request work | Saturday · 45 min |
| Write down the response shape for reference | Saturday · 15 min |
What you hand in
- A table of twenty-five real requests you observed
- A movie API key, ignored, with one working request
- One URL built from documentation on paper, then verified
Watch out for
- Debugging in the console when the answer is in the network panel.
- Not reading the API's own error body, which usually says what's wrong in plain English.
- Query parameters spelled wrong. Most APIs ignore unknown ones silently.
- Unencoded characters in a query string, like a space or an ampersand.
Week24
The numbers mean things
Status codes are a vocabulary, not noise. Learning the five families turns "it didn't work" into
"the server says I asked for something that doesn't exist", which is the difference between
guessing and diagnosing.
By the end of the week
- Say what any status code family means
- Tell from a failure whether the fault is yours or the server's
- Read an unfamiliar API's documentation well enough to use it
Topics
Status code families · the codes worth knowing · request and response headers · Content-Type and Accept · Authorization and API keys · query string encoding · rate limits · reading API documentation · terms of use
Your own work, between sessions
| Status code drills both ways; find a real 4xx and a real 5xx in the wild | Saturday · 45 min |
| MDN status codes and headers; answer the eight questions for two more APIs | Sunday · 45 min |
| Movie explorer: search, render, status handling | Saturday · 50 min |
| Write every error message before you write the code that shows it | Saturday · 15 min |
What you hand in
- Status code drills in both directions, with screenshots of a real failure
- The eight documentation questions answered for three different APIs
- An unfamiliar API used successfully from its documentation alone
Watch out for
- Treating every failure the same. A 401 and a 500 need completely different responses.
- Hunting through your own code when the status code already named the problem.
- Forgetting to encode a search term, where the symptom is a wrong result rather than an error.
- Assuming field names from a tutorial rather than from the actual response.
Week25
Searching without melting the server
Search is the first feature where a naive version is visibly wrong. Typing seven letters fires
seven requests, results come back out of order, and the app is both slow and incorrect. Working and
correct turn out to be different standards.
By the end of the week
- Build a search that fires one request instead of seven
- Explain why the wrong results sometimes appear, and stop it
- Put the search term in the URL so a search can be shared
Topics
Search as you type versus search on submit · debouncing · setTimeout and clearTimeout · race conditions and out-of-order responses · AbortController · filtering and sorting on the client · URLSearchParams
Your own work, between sessions
| Three debounced widgets; break each by removing clearTimeout | Saturday · 45 min |
| MDN AbortController and URLSearchParams; estimate three sites' debounce delays | Sunday · 45 min |
| Movie explorer: debounce, stale results, filter, sort, URL state | Saturday · 50 min |
| Decide a minimum search length and be able to defend it | Saturday · 10 min |
What you hand in
- Search that fires once, can't show stale results, and lives in the URL
- Three debounced widgets built from scratch
- A defended decision on your debounce delay
Watch out for
- Forgetting clearTimeout, so every keystroke queues a search instead of replacing one.
- Treating a cancelled request as a real error and showing a message on every keystroke.
- Asking the server to filter data you already have in memory.
- sort changing the array in place and destroying your original order.
Week26
Four states, properly
You met the four states in week 17 as error handling. This week they become design: what each one
looks like, what it says, and how somebody who can't see the screen finds out that anything
happened.
By the end of the week
- Design a loading, error, empty and success state for any screen
- Write an error message worth reading
- Announce changes to a screen reader
- Reach any state on demand for testing
Topics
Loading states: spinners versus skeletons · perceived performance · error copy · empty versus error · aria-live · focus management · making every state reachable
Your own work, between sessions
| Study five apps with the network slow and off; screenshot the best and worst | Saturday · 45 min |
| MDN live regions and reduced motion; ten minutes with a screen reader | Sunday · 45 min |
| Movie explorer: four designed states with announcements | Saturday · 50 min |
| Go back and add all four states to the weather app and the quiz | Saturday · 40 min |
What you hand in
- Three applications with four designed states each
- Announcements that actually work, tested with a real screen reader
- A way to force any state on demand, so you can test it in thirty seconds
Watch out for
- No loading state, so slow is indistinguishable from broken.
- An empty state written like an error, which teaches people your app is unreliable.
- Generic messages when you know the specific cause.
- Loading never cleared on failure, so the spinner runs forever.
- Nothing announced, so anyone not looking at the screen learns nothing.
Week27
More than fits
Four thousand results won't go on one screen and shouldn't be requested at once. How you deal with
more data than fits is a design decision with real trade-offs, and every option costs something.
By the end of the week
- Handle a large result set with an approach you chose and can defend
- Cache results so going back makes no request
- Say what each of your decisions traded away
Topics
Pagination, load more and infinite scroll · the trade-offs · reading paging information from a response · caching in memory · when a cache is wrong · keeping the page in the URL · accessibility of each approach
Your own work, between sessions
| Study five sites' paging, including keyboard-only tests | Saturday · 45 min |
| The API's paging docs; focus management; write your decision down | Sunday · 40 min |
| Movie explorer: paging, cache, URL, edge cases, focus | Saturday · 50 min |
| Try prefetching, then write down what it cost | Saturday · 25 min |
What you hand in
- A chosen paging approach, cached, in the URL, fully keyboard-usable
- Every paging edge case handled
- A written note explaining why you chose the approach you did
Watch out for
- Not resetting the page when the search changes. Almost everybody ships this once.
- Losing the search term when the page changes.
- No handling of the last page, so Next asks for a page that doesn't exist.
- Focus left at the bottom after paging, which strands anyone using a keyboard.
- Picking infinite scroll by default without considering what it costs.
Week28
An API you've never seen
The phase closes with the only test that matters: given documentation for a service nobody has
taught you, can you build something with it? Everything else has been preparation for that.
By the end of the week
- Finish and deploy a real application
- Build a feature against an API you've never used, from documentation alone
- Write up an integration so somebody else could repeat it
Topics
Finishing · the accessibility list · performance basics: request count and image size · independent API integration · writing an integration up
Your own work, between sessions
| Clear the twelve-point list on the deployed site; audit two older apps | Saturday · 50 min |
| README with all four states screenshotted; write up the API integration | Saturday · 45 min |
| Finish the unfamiliar-API feature | Saturday · 40 min |
| Compare your self-assessment against the one from week 18 | Sunday · 20 min |
What you hand in
- Movie explorer finished and deployed, meeting all twelve points on the live site
- A feature built against an API you'd never used, with no help
- A README with all four states screenshotted, plus an integration write-up
Watch out for
- Searching for example code instead of reading the documentation. That's the habit this phase replaces.
- Running your checks locally rather than against the deployed site.
- Full-size images in small cards, which is the most common beginner performance problem.
- Only screenshotting the success state.
- Calling it finished without the keyboard pass.
Carried into the next phaseWhat sticks
- Eight questions to ask of any API before you use it.
- Status code first. Diagnose from the number before reading your own code.
- Four states, designed and announced, not just handled.
- Make conditions worse to make a bug visible. Throttling is a debugging tool.
- Name the trade-off. Every decision from here comes with what it cost.
Phase 06/Weeks 29 to 34
Components
React
Week 1Week 52
React is usually taught as a set of rules to follow. Here it's taught as the answer to a
problem you've personally had: five projects of keeping a screen in step with a variable by hand.
That framing matters. Knowing what React replaces is what lets you tell when it's helping and when
it's getting in the way, which is the difference between using a tool and being used by one.
By the end of this phaseYou'll be able to
- Explain why React exists, using your own earlier code as the example
- Build components, compose them, and defend where you drew the boundaries
- Pass data down as props and events up as functions
- Hold changing data in state and update it correctly
- Render lists with keys that mean something
- Fetch data without your app looping forever
- Pull repeated logic out into something reusable
- Explain how your application is put together, under questioning
What you buildStudent management dashboard
The first project big enough that React earns its keep. A to-do list doesn't need
components; a dashboard with filters, a form, a detail panel and shared state does. It's also the same
subject as the API in phase 7 and the database in phase 8, so you stop re-learning the problem and start
learning the layers.
Week29
The thing you've been doing by hand
For fifteen weeks you've kept data in a variable and written a render function to draw the screen
from it. React is that idea, automated. Naming what you already do is what makes the rest of the
phase obvious.
By the end of the week
- Set up a React project and understand what each part of it does
- Write components that return markup
- Say what React does for you, and what it doesn't
Topics
Why React exists · describing the result versus listing the steps · setting up with Vite · the project structure · JSX and its rules · className, closing tags, one root, expressions in braces · components as functions · React developer tools
Your own work, between sessions
| Ten small static components; break each one and read the error | Saturday · 50 min |
| The React docs quick start and the JSX pages; draw two apps' component trees | Sunday · 45 min |
| Dashboard: a static shell, styled with your existing tokens | Saturday · 50 min |
| Draw component boundaries on a real interface and defend them | Saturday · 20 min |
What you hand in
- A working project with node_modules ignored
- Your portfolio home page rebuilt as static components
- The dashboard shell: named components matching a plan you drew on paper
Watch out for
- Writing class instead of className. Everybody, once.
- Returning two root elements with no fragment around them.
- Lowercase component names, so React treats them as HTML tags and renders nothing.
- Committing node_modules. Check before your first push.
- Building on top of the starter template instead of clearing it, so half your code is unexplained.
Week30
Data down, events up
Props flow down and are read-only. State belongs to one component and changes only through its
setter. Nearly every React bug a beginner writes breaks one of those two sentences.
By the end of the week
- Pass data into components
- Hold changing data in state
- Explain why you replace state instead of changing it
- Decide where a piece of state belongs
Topics
Props, and why they are read-only · destructuring · children · useState · state as a snapshot · updating objects and arrays without mutating · event handlers · passing functions down
Your own work, between sessions
| Eight small stateful components, three of them using arrays or objects | Saturday · 50 min |
| The React docs on props and state; check your own updates for mutation | Sunday · 45 min |
| Dashboard: props, search state, delete through events-up | Saturday · 50 min |
| Rebuild your week 15 to-do app in React and compare the two | Saturday · 45 min |
What you hand in
- The dashboard rendering data through props, with search and delete working
- Your to-do app rebuilt in React, with a written comparison
- A drawing of your component tree with the state marked on it
Watch out for
- Changing state instead of replacing it. The data updates, the screen doesn't, and nothing errors.
- Trying to change a prop inside a child component.
- State placed too low, so a sibling can't reach it, or too high, so everything redraws.
- Writing onClick={handleClick()} with brackets, which calls it immediately instead of on click.
- Reading state straight after setting it and finding the old value.
Week31
Keys, conditions and controlled inputs
Three everyday things, each with a trap in it. Lists need a key that means something, conditional
rendering has four forms and one of them prints a stray zero, and an input in React has to be told
what it contains.
By the end of the week
- Render lists with keys that survive reordering
- Choose the right way to show something conditionally
- Build a form where React owns every field
Topics
Rendering lists with map · keys, and why the index is usually wrong · conditional rendering · the falsy-zero trap · controlled inputs · one state object versus several · form submission · validation and error display
Your own work, between sessions
| Five list drills including reordering and stateful rows; three forms | Saturday · 50 min |
| The React docs on lists, conditionals and shared state | Sunday · 45 min |
| Dashboard: form, validation, combined filters, sorting | Saturday · 50 min |
| Check every list for a stable key and every && for a possible zero | Saturday · 15 min |
What you hand in
- The dashboard with a working form, validation, combined filters and sorting
- Stable keys throughout, with no warnings left in the console
- Three forms of increasing complexity, all usable from the keyboard
Watch out for
- Using the array index as a key. Fine until something reorders, then silently wrong.
- A stray 0 appearing on the page from && on a length. Compare with > 0.
- An input with value and no onChange, which freezes.
- Scrolling past the key warnings in the console. React tells you clearly.
- Dropping labels because a tutorial's example didn't have them.
Week32
Talking to the outside
useEffect is the most misused thing in React, mostly because it's taught as "code that runs after
render" rather than what it's for: keeping your component in step with something that isn't React.
By the end of the week
- Fetch data in a component without it looping
- Cancel a request when the component goes away
- Say what the dependency array is actually for
- Recognise when you don't need an effect at all
Topics
What effects are for · the dependency array · the infinite loop · cleanup functions · fetching in an effect · the four states in React · race conditions again · why your effect appears to run twice in development
Your own work, between sessions
| Five effect drills; break each dependency array and record what happens | Saturday · 50 min |
| The React docs on effects, and the page called "you might not need an effect" | Sunday · 45 min |
| Dashboard: real data, four states, cleanup | Saturday · 50 min |
| Rebuild the weather app in React | Saturday · 45 min |
What you hand in
- The dashboard loading real data with four states and correct cleanup
- The weather app rebuilt in React
- An audit of your own effects, with the unnecessary ones deleted
Watch out for
- An infinite loop from a missing dependency array with a state update inside.
- A missing dependency, so the effect doesn't re-run and your data goes quietly stale.
- No cleanup, so stale responses and dead timers pile up.
- Using an effect for something you could just work out during render.
- Passing an async function straight to useEffect. Declare it inside and call it.
Week33
Packaging the repetition
By now three of your components contain nearly the same fetching code. A custom hook is just a
function that uses other hooks. It's the week 12 lesson about extracting functions, applied to
behaviour instead of arithmetic.
By the end of the week
- Pull repeated logic into a custom hook
- Decide where state belongs across a bigger tree
- Recognise prop drilling without immediately reaching for a library
Topics
Custom hooks · the rules of hooks and why they exist · lifting state up · prop drilling and when it's actually a problem · composition as an alternative · useContext, carefully · when to split a component
Your own work, between sessions
| Four hooks written from requirements, each used in a real component | Saturday · 50 min |
| The React docs on custom hooks, the rules, and context | Sunday · 45 min |
| Dashboard: extract hooks, split large components, reduce prop drilling | Saturday · 50 min |
| Build a hook that tells a component whether the browser is online | Saturday · 25 min |
What you hand in
- A useFetch hook used by every component that fetches
- At least four more custom hooks, one built from a requirement with no example
- Your largest component split up, with the behaviour unchanged
Watch out for
- Calling a hook inside a condition or a loop. React catches it; understanding why is the lesson.
- Extracting a hook that's only used once. That's not abstraction, it's indirection.
- Reaching for context for everything, which makes the data flow invisible.
- Splitting components by size rather than by what they're responsible for.
- Reaching for a state-management library at this scale. You don't have that problem yet.
Week34
A dashboard you can explain
The phase ends with a real application and one question: can you walk through it and say why each
decision was made? Six weeks of React is worth nothing if the answer is that it works and you're not
sure how.
By the end of the week
- Finish and deploy a React application
- Keep it usable from the keyboard when content appears and disappears
- Build for production and deploy the build
- Explain your architecture and survive follow-up questions
Topics
Finishing · React and accessibility · keyboard navigation in a component tree · announcing changes · building for production · deploying a built application
Your own work, between sessions
| A full keyboard and screen reader pass, with the findings written down | Saturday · 50 min |
| React accessibility docs; write the README including an architecture section | Saturday · 45 min |
| Finish and deploy against all sixteen points | Saturday · 50 min |
| Screenshots of every state; answer the questions you wrote in week 29 | Sunday · 20 min |
What you hand in
- The dashboard deployed: components, state, hooks, live data, filters, forms, keyboard-complete
- A README with an architecture section and screenshots of every state
- The weather app and to-do app converted to React, both deployed
Watch out for
- Leaving console warnings because the app works anyway.
- Dropping accessibility because no React tutorial mentioned it.
- Focus lost when a panel closes, which strands anyone using a keyboard.
- Only ever testing in development and never against the build.
- A README with no architecture section, which is the part that matters at this size.
Carried into the next phaseWhat sticks
- Data down, events up. It explains most of what React does.
- Replace state, never modify it. This one is silent when you get it wrong.
- If you can work it out from what you already have, work it out. Don't store it twice.
- Being able to explain your structure out loud. You'll do this again for the capstone.
Phase 07/Weeks 35 to 40
Writing the server
Node.js and Express
Week 1Week 52
For twelve weeks you've been the one asking. Now you write the computer that answers, and
the change of position is what makes it click: every status code you choose, you've previously received.
Every validation rule you write, you've previously been rejected by.
Also: the API key problem from week 16 finally gets solved, in week 36.
By the end of this phaseYou'll be able to
- Run and structure a Node program
- Define routes, read parameters and bodies, and write middleware
- Keep a secret on the server and prove the browser never sees it
- Build conventional REST endpoints with status codes you can justify
- Validate every input and return all the errors at once
- Store passwords so that losing your database doesn't reveal them
- Separate who somebody is from what they're allowed to do
- Write documentation another developer can use without asking you anything
What you buildSchool management REST API
The server behind the dashboard you built in phase 6. Same subject, different layer.
Your data lives in memory this phase and moves to a real database in phase 8, which means you'll lose
everything on every restart for six weeks. That's deliberate, and by week 41 you'll want a database
rather than merely being told about one.
Week35
The same language, somewhere else
Node is JavaScript with a different set of things around it. No window, no page, no user, but a
filesystem, a process, and the ability to listen for requests instead of making them.
By the end of the week
- Run and structure a Node program
- Use npm without it being mysterious
- Read and write files from code
- Say what a server is doing while nobody is using it
Topics
Node versus the browser · ES modules, import and export · npm and package.json · semantic versioning · node_modules and the lockfile · the fs and path modules · process.argv and process.env · .env files
Your own work, between sessions
| Five Node drills; split one into modules | Saturday · 50 min |
| Node's fs and modules docs; read two real package.json files | Sunday · 45 min |
| A command-line tool that summarises student data, with three error cases | Saturday · 50 min |
| Set up the API project with its structure and ignore rules | Saturday · 20 min |
What you hand in
- A command-line tool handling three different failure cases
- A bare server built with no framework, run and inspected
- A school-api project set up, with .env and node_modules both ignored
Watch out for
- Reaching for document or window out of habit. Neither exists here.
- Forgetting "type": "module", which makes import fail with a confusing message.
- Leaving the .js off an import. Node needs it.
- Committing .env. This is the one that actually matters.
- Hard-coding a key "just for now" and then committing it.
Week36
Routing, middleware, and an old problem
Express is a thin layer over what you built by hand last week: it matches paths to functions and
runs a pipeline around them. And in the same session, the API key problem you've been carrying since
week 16 gets solved.
By the end of the week
- Define routes and read parameters and bodies
- Write middleware and understand why the order matters
- Hold a secret on the server and prove the browser can't see it
Topics
Express and what it adds · routes and the request and response objects · route parameters versus the query string · request bodies · middleware as a pipeline · next() · order of registration · a proxy endpoint that holds an API key · CORS
Your own work, between sessions
| Ten route drills; three middleware functions | Saturday · 50 min |
| Express routing and middleware docs; build an API client collection | Sunday · 45 min |
| School API: read routes for three resources | Saturday · 50 min |
| Point your weather app at your own proxy and check the key is gone | Saturday · 25 min |
What you hand in
- Read routes for students, teachers and courses
- A working proxy endpoint holding your weather API key
- An API client collection covering every route
Watch out for
- Forgetting next(), which makes the request hang silently with no error at all.
- Registering the body parser after your routes, so req.body is undefined.
- Forgetting a return before an early response, which gives the headers-already-sent error.
- Route parameters are strings. Comparing one to a number fails.
- Opening CORS to everything because a search result said to.
Week37
Sending the status codes
For fourteen weeks you've read status codes other people chose. Now you choose them, and you find
out that a REST API is mostly naming and numbering conventions that exist so nobody has to guess.
By the end of the week
- Build a full set of create, read, update and delete endpoints
- Choose status codes you can justify by convention
- Predict the endpoints of an API you haven't seen
Topics
REST resource naming · the standard set of endpoints · POST, PUT, PATCH and DELETE with a real body · choosing the status code to send · 201 and 204 · idempotency · controllers separated from routes
Your own work, between sessions
| Full CRUD for a new resource; break each endpoint and check the code | Saturday · 50 min |
| MDN on PUT, PATCH, 201 and 204; check a real API against the conventions | Sunday · 45 min |
| School API: full CRUD for three resources, routes and controllers separated | Saturday · 50 min |
| A status code table for every endpoint and outcome | Saturday · 25 min |
What you hand in
- Full CRUD for three resources, plus at least one nested route
- Routes and controllers in separate files
- A status code table covering every endpoint and every outcome
Watch out for
- Returning 200 for everything, including failures.
- Verbs in your paths, like /createStudent. The method is the verb.
- Using PUT where PATCH is meant, which silently wipes the fields you left out.
- No 404 on routes that take an id.
- Testing only the success paths.
Week38
Trust nothing that arrives
Every value in a request came from outside and none of it can be assumed. Validating at the
boundary is the first real security habit of the year, and this is also the week your API gets tests
so that changing it stops being frightening.
By the end of the week
- Reject bad input with a message that helps
- Handle errors in one place
- Write tests, and prove they'd catch a real break
Topics
Never trust the client · validating types, ranges, required fields and lengths · validation as middleware · useful error responses · 400 versus 404 · central error handling · not leaking internals · automated testing with Node's built-in runner
Your own work, between sessions
| Validation for five shapes of data, with boundary tests | Saturday · 50 min |
| Express error handling, Node's test runner, and OWASP on input validation | Sunday · 45 min |
| School API: validation, one error handler, a test suite | Saturday · 50 min |
| Send your own API the worst input you can think of and write down what happens | Saturday · 30 min |
What you hand in
- Validation on every endpoint that accepts data, collecting all the errors at once
- Central error handling that logs detail and returns something safe
- Fifteen or more tests, each one verified by deliberately breaking the code
Watch out for
- Relying on frontend validation. Anyone can send a request straight to your API.
- Returning on the first validation failure, so people fix one field at a time.
- Testing the middle of a range but never the boundaries.
- Sending a stack trace to the client, which tells a stranger your file paths.
- Copying whatever arrived straight into your stored record, extra fields and all.
Week39
Who you are, and what you may do
Authentication and authorisation are two different questions, and confusing them causes most
access-control failures. This is also the week you learn why nobody stores a password.
By the end of the week
- Build a login that hashes passwords properly
- Protect routes and add roles
- Explain the difference between proving who you are and being allowed to do something
Topics
Authentication versus authorisation · why passwords are never stored · hashing, salting and bcrypt · why hashing is not encryption · sessions and tokens · what a JWT is and is not · auth middleware · roles · 401 versus 403
Your own work, between sessions
| Register and login from scratch with bcrypt; look at the stored hashes | Saturday · 50 min |
| OWASP on password storage; MDN on HTTP authentication; the jwt.io introduction | Sunday · 45 min |
| School API: auth, roles, protected routes, tests for all four cases | Saturday · 50 min |
| Try to get past your own protection, and write down what you find | Saturday · 30 min |
What you hand in
- Register and login with hashed passwords and no password stored anywhere
- Every route protected according to a written policy
- Tests covering no token, a bad token, the wrong role and the right one
Watch out for
- Storing the password anywhere, even temporarily, even in a log.
- Reading somebody's role from the request body instead of the verified token.
- Different messages for a wrong email and a wrong password, which tells a stranger who has an account.
- Putting anything sensitive in a JWT. They're signed, not secret, and anyone holding one can read it.
- Thinking this is production-ready. It isn't, and knowing why is the point.
Week40
An API somebody else could use
In phase 5 you read a lot of other people's API documentation and formed opinions about it. Now
you're on the other side, and the test is whether somebody can use yours without asking you
anything.
By the end of the week
- Document every endpoint, including how it fails
- Add a health endpoint and request logging
- Hand your API to somebody and watch them use it
Topics
Finishing the API · writing API documentation · endpoint reference format · documenting errors and authentication · example requests and responses · a health endpoint · logging
Your own work, between sessions
| Full documentation in the seven-part format, errors included | Saturday · 50 min |
| Read two well-documented APIs as a writer rather than a user | Sunday · 45 min |
| Clear the nine-point backend list; health endpoint, logging, tests green | Saturday · 50 min |
| Point your React dashboard at your own API for one resource | Saturday · 35 min |
What you hand in
- The school API: CRUD for three resources, validation, error handling, auth, roles, tests
- Documentation covering every endpoint, its parameters, responses and errors
- Your React dashboard reading and writing through your own API
Watch out for
- Documenting only the success cases. Failures are what people can't guess.
- Assuming the reader knows how your auth header works.
- Inconsistent error shapes across different endpoints.
- No example requests, which is what most readers actually copy.
- Skipping the health endpoint because it looks pointless. It isn't, in week 51.
Carried into the next phaseWhat sticks
- Anything a client sends is a claim. Anything the server checked is a fact.
- Validate at the boundary, every time, whatever the frontend already checked.
- Log the detail, return the summary. Never send internals to a client.
- A test you haven't seen fail isn't a test yet.
- Document the errors, not just the successes.
Phase 08/Weeks 41 to 45
Where data lives
SQL and PostgreSQL
Week 1Week 52
You arrive here having lost your data on every server restart for six weeks, which is the
best possible preparation. PostgreSQL is the answer to a problem you've personally had.
The first week is design rather than SQL, because a bad schema is far more expensive to fix than bad
code. Code you can rewrite in an afternoon. A schema with six months of data in it, you can't.
By the end of this phaseYou'll be able to
- Design a set of tables from a description and say why each fact belongs where it does
- Write the four basic statements, and never a destructive one without a WHERE
- Connect tables and know when a join is hiding rows from you
- Summarise data and check the numbers by hand
- Decide whether an index is worth it by measuring both sides
- Use a transaction so a multi-step change can't half-happen
- Connect an API to a database safely
What you buildSchool database, connected to your API
The storage layer for the system you've been building since week 29. It's also the
first time a decision you make will be genuinely expensive to reverse, which is worth meeting once at a
scale where the consequences are only educational.
Week41
Where should this fact live?
A relational database is an argument that every fact should be written down once, in one place.
Most of the skill is deciding what a table is and what belongs in it.
By the end of the week
- Design tables from a description in plain English
- Say what a primary key is for
- Explain why repeating a fact in two places is a problem
Topics
Why relational databases exist · tables, rows and columns · column types · primary keys · NOT NULL and UNIQUE · defaults · one fact in one place · installing PostgreSQL · psql basics · CREATE TABLE
Your own work, between sessions
| Four design drills on paper; build one in SQL and try to break it | Saturday · 50 min |
| The PostgreSQL tutorial chapters 1 and 2, plus SQLBolt lessons 1 to 4 | Sunday · 45 min |
| School database: three tables with constraints, all in schema.sql | Saturday · 50 min |
| Write down why each column has the type it has | Saturday · 20 min |
What you hand in
- PostgreSQL installed with a database you can reach
- Three tables with sensible types and constraints
- A schema.sql that rebuilds the whole thing from nothing
Watch out for
- One wide table with everything in it. That's the instinct carried over from a JavaScript array.
- A comma-separated list in a column. That's a table you haven't made yet.
- Using an email or a name as the primary key. Both change.
- Making everything TEXT, which throws away every check the database could do for you.
- Designing in the editor instead of on paper.
Week42
The most dangerous statement
Getting data in and out is the easy half. The hard half is that UPDATE and DELETE without a WHERE
clause change every row in the table, immediately, with no confirmation and no undo.
By the end of the week
- Write the four basic statements confidently
- Filter precisely
- Never run a destructive statement without checking it first
Topics
INSERT · SELECT with column lists · WHERE with AND, OR, IN, BETWEEN, LIKE · NULL and why = NULL never works · UPDATE · DELETE · the missing WHERE · RETURNING · ORDER BY and LIMIT
Your own work, between sessions
| Thirty query drills; five updates and two deletes, each checked first | Saturday · 50 min |
| SQLBolt lessons 5 to 12; the PostgreSQL docs on WHERE and NULL | Sunday · 45 min |
| Populate the school database; twenty queries answering real questions | Saturday · 50 min |
| Take a backup and practise restoring it | Saturday · 15 min |
What you hand in
- A populated database that rebuilds from schema.sql and seed.sql
- Twenty working queries plus thirty drills
- A backup you've taken and successfully restored
Watch out for
- UPDATE or DELETE with no WHERE. Write the WHERE clause first, always.
- Using = NULL instead of IS NULL. It never matches anything.
- Using != and silently missing the rows where the value is unknown.
- Missing brackets around an OR in a mixed condition. It runs fine and returns the wrong rows.
- Having no backup.
Week43
Questions that need two tables
Splitting your data across tables was right, and it has a cost: most interesting questions now
span more than one. The difference between an inner and a left join is the difference between an
answer and a misleading one.
By the end of the week
- Design a relationship and enforce it with a foreign key
- Choose between join types by asking what should happen to unmatched rows
- Know when a query is lying to you
Topics
Foreign keys and referential integrity · one-to-many · many-to-many and junction tables · INNER JOIN · LEFT JOIN and when the difference matters · joining three tables · aliases · ON DELETE behaviour
Your own work, between sessions
| Fifteen join drills with the join type justified for each | Saturday · 50 min |
| SQLBolt's join lessons; the PostgreSQL docs on joins and foreign keys | Sunday · 45 min |
| School database: foreign keys, a junction table, ten cross-table queries | Saturday · 50 min |
| Draw the whole schema as a diagram | Saturday · 20 min |
What you hand in
- Foreign keys on every relationship, with deliberate deletion behaviour
- Ten cross-table queries with the join type justified in writing
- A diagram of your whole schema
Watch out for
- An inner join where you needed a left join, which silently drops rows.
- Rows duplicated by a join, which makes every count too high.
- A missing ON clause, which pairs every row with every row.
- Choosing CASCADE for convenience, then one delete removes far more than you meant.
- Believing a query because it ran. Count a small case by hand and compare.
Week44
Counting, grouping, and going faster
Most useful questions aren't "list the rows" but "how many, what average, which is highest".
And once there's enough data, how fast the answer arrives becomes its own question.
By the end of the week
- Summarise data with grouping
- Say what an index costs as well as what it buys
- Use a transaction so a multi-step change happens completely or not at all
Topics
COUNT, SUM, AVG, MIN, MAX · GROUP BY · HAVING versus WHERE · grouping with joins · ORDER BY, LIMIT and OFFSET · indexes and what they cost · EXPLAIN · transactions
Your own work, between sessions
| Fifteen aggregate drills; three transactions with rollbacks confirmed | Saturday · 50 min |
| SQLBolt 9 to 11; the PostgreSQL docs on aggregates, transactions and indexes | Sunday · 45 min |
| School database: report queries, indexes, transactions | Saturday · 50 min |
| Record your before-and-after timings in a table | Saturday · 20 min |
What you hand in
- A full set of report queries, each verified by hand
- Indexes chosen from measurements, with the cost recorded as well as the benefit
- Transactions around every multi-step change
Watch out for
- Trying to filter on an aggregate in WHERE. That's what HAVING is for.
- Counts inflated by a join. The numbers look plausible, which is what makes it dangerous.
- Adding indexes everywhere without measuring what they cost your writes.
- No index on your foreign key columns, which is usually where you need one most.
- Forgetting COMMIT and leaving a transaction open.
Week45
The data stops disappearing
The array in your API becomes a database, and one habit becomes non-negotiable: values from a
request never get glued into a query. This is the single most important rule in the phase.
By the end of the week
- Connect an API to PostgreSQL
- Pass every external value as a parameter
- Turn database errors into sensible HTTP responses
Topics
Connecting Express to PostgreSQL · connection pooling · parameterised queries and why gluing strings is unsafe · moving controllers from array to database · mapping rows to responses · database errors as HTTP responses · transactions in the API
Your own work, between sessions
| Move every controller to the database; search your project for glued-together queries | Saturday · 50 min |
| The node-postgres docs; OWASP on preventing SQL injection | Sunday · 45 min |
| Finish the connection: transactions, error mapping, tests still green | Saturday · 50 min |
| Write the database section of your README | Saturday · 20 min |
What you hand in
- Your API running entirely on PostgreSQL, with data surviving restarts
- Every external value passed as a parameter, confirmed by your own audit
- Your week 38 test suite still passing after the whole data layer changed
Watch out for
- Any query built by joining strings together. This is the one rule with no exceptions.
- A value reaching a query indirectly through a few functions, so the risk isn't obvious where you look.
- Sending the database's own error text to the client. It names your tables.
- Opening a connection per request instead of using the pool.
- Forgetting result.rows and returning the whole result object.
Carried into the next phaseWhat sticks
- Every value from outside goes in as a parameter. No exceptions, ever.
- WHERE first, and run it as a SELECT before any UPDATE or DELETE.
- A query that runs isn't a query that's right. Check a small case by hand.
- Multi-step changes go in a transaction.
- Your schema is code. It lives in version control and rebuilds from nothing.
Phase 09/Weeks 46 to 49
Joining it up
Full-stack integration
Week 1Week 52
Everything in this phase already exists in pieces. What's new is the joins between them, and
the joins are where the problems live: origins that don't match, shapes that disagree, rules enforced in
the wrong layer, and failures that show up three layers away from where they started.
The thing that makes four weeks enough is finishing one feature completely before starting the
next.
By the end of this phaseYou'll be able to
- Draw your whole system and say where every concern belongs
- Run both halves together and explain what CORS is protecting
- Build a feature from a click to a database row and back
- Handle a failure at any layer and tell the user something useful
- Build a login across the whole stack
- Protect every action on the server, and hide it in the interface for a different reason
- Test what a real person would do, and decide what not to fix
- Write setup instructions that work on a machine that isn't yours
What you buildFull-stack school management system, which is your capstone
The whole thing, joined up: your React dashboard talking to your Express API talking
to your PostgreSQL database, with real login, real roles and real error handling. This is the project you
deploy in week 51 and present in week 52.
Week 46 also has you write the things it never got, because you built it bottom-up: a problem
statement, wireframes, a data design and an API specification.
Week46
Three things you built, one system
You have a React frontend, an Express API and a PostgreSQL database, and so far they're three
separate projects. This week they become one, which means drawing it and deciding where every rule
belongs.
By the end of the week
- Draw the whole system and defend where each concern sits
- Run both halves together
- Build one complete feature from the browser to the database and back
- Explain what CORS is and who it's protecting
Topics
System architecture and data flow · where each concern belongs · CORS properly · environment configuration across two projects · running two servers · the vertical slice · writing the design documents
Your own work, between sessions
| Write the problem statement, with an out-of-scope list; sketch the wireframes | Saturday · 50 min |
| MDN on CORS; the Vite docs on proxying and environment variables | Sunday · 45 min |
| A second complete feature, end to end | Saturday · 50 min |
| Draw the architecture and keep it where you can see it | Saturday · 20 min |
What you hand in
- A drawing of your whole system
- Four documents: problem statement, wireframes, data design, API specification
- Two complete features working from the interface all the way down
Watch out for
- Building all the frontend, then all the backend. Nothing works until the end and every problem arrives at once.
- Validation only on the frontend, because "my API is only called by my app".
- Opening CORS to everything.
- Hard-coded localhost URLs, which break the moment anything is deployed.
- No out-of-scope list, so the project grows until the weeks run out.
Week47
One feature at a time, all the way down
The temptation is to build broadly and connect at the end. The discipline is to finish one feature
completely first. It's slower for a fortnight and it's the only approach that produces a working
system in seven weeks.
By the end of the week
- Build create, update and delete through the whole stack
- Handle a failure at any layer and say something useful
- Know what "finished" means for a feature
Topics
Slice by slice · create, update and delete through the whole stack · optimistic updates and their cost · error handling across layers · mapping API errors to what the user sees · loading with real latency
Your own work, between sessions
| Two more features end to end; a throttled pass for missing states | Saturday · 50 min |
| Read about writing error messages, then reread your own | Sunday · 45 min |
| Finish the remaining features from your list | Saturday · 50 min |
| Watch somebody who has never seen it try to use it | Saturday · 25 min |
What you hand in
- The core features working end to end
- Every failure path handled, at every layer, with messages worth reading
- Notes from watching a real person use it
Watch out for
- Four features half-finished. This is the characteristic failure of the week.
- Only testing the happy path.
- Showing technical errors to users: status codes, stack traces, database messages.
- No confirmation on anything destructive.
- Clicking submit twice and creating two of everything.
Week48
Hiding is not protecting
You built authentication in week 39 and tested it with an API client. Now it gets a login screen,
protected pages and a logout, and the rule from week 39 gets its real test, because now there's a
button to hide.
By the end of the week
- Build a login that works across the whole system
- Choose where to keep a token and say what that choice costs
- Protect routes on both sides, for two different reasons
Topics
Login and logout across the stack · where to keep a token · localStorage versus httpOnly cookies · sending credentials with requests · protected routes in React · roles in the interface · handling 401 and 403 differently · token expiry
Your own work, between sessions
| Auth flows; every role and state tested; try to get past your own interface | Saturday · 50 min |
| MDN on cookies; OWASP on session management; write your storage decision down | Sunday · 45 min |
| Protect every route and action on both sides; handle expiry | Saturday · 50 min |
| Use the app as all three kinds of user and write up the experience | Saturday · 25 min |
What you hand in
- Login, logout and expiry working across the system
- A table of every route and action with who's allowed, implemented on both sides
- A written note on where you keep the token, why, and what the risk is
Watch out for
- Hiding a button and calling it protected. Anyone with an API client walks straight past it.
- Attaching the token in several places, so one request eventually goes without it.
- Treating 401 and 403 the same, and sending a logged-in user back to the login page.
- Leaving the token in storage after logout.
- Reading somebody's role from anywhere except the verified token.
Week49
Convincing somebody else
Last week before deployment. The question isn't whether it works on your laptop. It's whether
somebody else can set it up, use it, and be told what it does, and whether you can stand in front of
it and explain what you built.
By the end of the week
- Write a test plan and work through it
- Classify what you find and decide what not to fix
- Write setup instructions that work on a machine that isn't yours
- Present your work in ten minutes
Topics
End-to-end testing · a written test plan · a structured bug hunt · triage · setup instructions for two projects and a database · the architecture document · rehearsing a demonstration
Your own work, between sessions
| Work the whole test plan; classify everything; fix what's critical | Saturday · 50 min |
| Setup instructions for both projects; write the architecture document | Saturday · 45 min |
| Fix what's left; run the whole plan again | Saturday · 50 min |
| Rehearse the ten-minute demonstration twice | Sunday · 25 min |
What you hand in
- The full system: frontend, API, database, login, roles, everything working
- A written test plan, worked through, with everything found classified
- Setup instructions somebody else has followed successfully
- An architecture document, and a rehearsed demonstration
Watch out for
- Fixing while you're still finding, so the list never gets finished.
- Classifying everything as critical, which is the same as classifying nothing.
- Only testing things in the order you designed them for.
- Setup instructions that assume your machine, your tools, your existing database.
- Adding new features in the last week.
Carried into the next phaseWhat sticks
- One feature finished completely before the next one starts.
- Hiding a button is user experience. The check on the server is the security.
- Find the layer before you fix anything. Network panel, then API log, then database.
- Write the test plan down, including the awkward orders nobody thinks to try.
- Instructions are finished when somebody else follows them, not when they read well to you.
Phase 10/Weeks 50 to 52
Shipping it
Deployment and portfolio
Week 1Week 52
The building is done. These three weeks are about the difference between something that works
and something that exists in the world, and then the part most programmes skip: explaining what you
built, describing your own level honestly, and working out what happens when nobody is setting your
schedule.
By the end of this phaseYou'll be able to
- Say what your development server was hiding, and prepare for it not being there
- Treat secrets as things that get rotated
- Write a deployment plan before deploying anything
- Deploy a database, an API and a frontend in the right order
- Diagnose a failure on a machine you can't see
- Write a portfolio that argues for your work
- Describe your own level accurately, in both directions
- Keep learning with nobody setting the schedule
What you buildA live application, a portfolio, and a presentation
Three things, none of which is new code. Your system running at a public address over
HTTPS. A portfolio of twelve projects with case studies that explain your decisions. And a fifteen-minute
presentation of the year, given to an audience.
The last two aren't optional extras. An application nobody can see and work nobody hears about is a
year of learning with no evidence attached.
Week50
Somebody else's computer
Everything you've built runs on a machine you control, started by hand, with a development server
hiding a great deal. Production is a computer you've never seen, running unattended, where every
convenience you've been relying on is gone.
By the end of the week
- List what your development server was doing for you
- Rotate every secret you've ever used
- Write a deployment plan with checks and a way back
Topics
Development versus production · build steps for both projects · environment variables set by a platform · secret hygiene and rotation · choosing where each piece runs · managed databases · the deployment checklist
Your own work, between sessions
| Get both projects building and running from the built output locally | Saturday · 50 min |
| The platform documentation; the Vite docs on production builds | Sunday · 45 min |
| Write the deployment plan; create the accounts | Saturday · 50 min |
| Audit both repositories, including the history, and rotate every secret | Saturday · 30 min |
What you hand in
- Both projects building cleanly and running from the built output
- Every hard-coded value replaced by configuration
- Every secret rotated, with any past exposure noted
- A written deployment plan with checks and rollbacks
Watch out for
- Deploying without a plan. That's what turns an afternoon into a fortnight.
- Using the same secret in development and production.
- Assuming a deleted secret is gone. It's still in the history.
- A secret in a frontend environment variable, which gets baked into a public bundle.
- Never testing the production build until you deploy it.
Week51
On the internet
Deployment day. You work the plan, things break in ways they never broke locally, and you diagnose
each one against a machine you can't see. By the end there's a URL you can send to anybody.
By the end of the week
- Deploy a database, an API and a frontend in the right order
- Read logs on a machine you can't see
- Work out why something works locally and fails live
- Run a smoke test on a device that isn't yours
Topics
Deploying in order · environment variables on a platform · smoke testing each stage · HTTPS and certificates · DNS basics · CORS in production · reading remote logs · the post-mortem
Your own work, between sessions
| Fix what remains; break the deployed system three ways and check it fails gracefully | Saturday · 50 min |
| The platform docs on logs and rollbacks; MDN on HTTPS and DNS | Sunday · 45 min |
| Test as a stranger: every feature, every role, live, on a phone | Saturday · 50 min |
| Write the post-mortem as things break, not from memory afterwards | Saturday · 30 min |
What you hand in
- A publicly accessible full-stack application over HTTPS
- A smoke test passing on a real device on a real connection
- A written post-mortem of every failure and what would have prevented it
- Both READMEs updated with the live address
Watch out for
- Changing several things at once, then not knowing which one fixed it.
- Guessing instead of reading the logs.
- A missing environment variable. This is the single most common deployment failure.
- Capitalisation in filenames. Week 3 told you about this one.
- Panicking because it's public. It's a beginner project and nobody is watching yet.
Week52
What you can do now
The last week, and almost none of it is code. A portfolio that describes you honestly, a
presentation of what you built, a look back at twelve months, and a plan for what happens next.
By the end of the week
- Write a portfolio that argues for your work rather than listing it
- Describe your own level accurately
- Present a year of work in fifteen minutes
- Plan what you learn next, on your own
Topics
The portfolio as case studies · describing your level honestly · the final presentation · the twelve-month look back · completion · planning year two
Your own work, between sessions
| Case studies for every project; check every link works | Saturday · 50 min |
| Rehearse the presentation twice; write your year-end reflection | Saturday · 45 min |
| Portfolio deployed and checked against all sixteen points | Saturday · 50 min |
| Write your year-two plan: one direction, one project, a schedule you set | Sunday · 25 min |
What you hand in
- A deployed portfolio with twelve projects and case studies that explain your decisions
- Your capstone live, documented, with setup instructions somebody has followed
- The final presentation, delivered to an audience
- A written reflection on the year, and a plan for the next one
Watch out for
- Listing technologies instead of explaining decisions. The decisions are what people read.
- Overselling. It's checkable, and it damages you.
- Underselling. Just as inaccurate, and much more common at sixteen.
- Dead links, which are worse than having fewer projects.
- Finishing with nothing planned, which is how a year of momentum quietly stops.
Carried into the next phaseWhat sticks
- Plan before deploying, with a check after every step.
- One change, redeploy, verify. Never three at once.
- Secrets rotate. What matters is the history, not the current file.
- Finished means somebody else can use it, on a machine and a network that aren't yours.
- Write your decisions down. The reasoning is the most valuable thing in any portfolio.
Where to read more
Short on purpose. You don't need to finish every course on this list. One main path per
phase, plus documentation when you have a specific question, beats a folder of half-done tutorials.
| Weeks | Resource | What it's for |
| 1–34 | MDN, Learn web development | The reference you'll keep coming back to, all year. |
| 1–18 | The Odin Project, Foundations | A hands-on sequence covering setup, HTML, CSS and JavaScript. |
| 6–52 | freeCodeCamp | Interactive drills when something hasn't stuck yet. |
| 19–22 | Pro Git | The best thing written about version control, and it's free. |
| 29–34 | React docs | Unusually good official documentation. Trust it over tutorials. |
| 41–45 | SQLBolt | Interactive drills for the core SQL queries. |
| 6–52 | Frontend Mentor | Layout and responsiveness practice on real designs. |
| After 52 | Next.js Learn | If you carry on into Next.js afterwards. |
Books worth having
- Eloquent JavaScript, Marijn Haverbeke. Weeks 11 to 18. Free to read online, and the exercises
are worth doing slowly.
- Pro Git, Chacon and Straub. Weeks 19 to 22. Chapter 3's diagrams are why people recommend it.
- HTML and CSS, Jon Duckett. Weeks 2 to 10. A visual introduction, read alongside the practical work.
On videos
Video helps when a concept is hard to picture, and stops helping the moment hours watched becomes how
you measure progress. Whatever you watch has to turn into something you type.
The loop that works: watch, understand, close the video, rebuild it from memory, then change one
requirement. If your change works, the idea landed. If it doesn't, you've found exactly what you
missed.
Finishing the year
Turning up isn't what completes this. What completes it is what you can do at the end.
- You attended the sessions, allowing for school and everything else.
- You practised steadily across the year.
- You finished the main project sequence, at the level you actually reached.
- You used Git and GitHub properly, and your projects are documented.
- You can explain the important parts of your own code and how it's put together.
- You finished the capstone, or something we agreed instead.
- At least one full-stack project is deployed and reachable.
- Your portfolio is documented and up to date.
- You gave the final demonstration and wrote the year-end reflection.
The evidence is the work itself: projects that run, a repository history, documentation, and being
able to change and explain your own code.
What happens after
A year of this gives you a foundation, not a qualification. What it opens up is further study,
internships, supervised freelance work, contributing to open source, and a strong start on a computing
course if you want one.
Where people usually go next: TypeScript, Next.js, testing properly, deeper backend work,
software architecture, Docker and cloud platforms, security, mobile with React Native, or contributing to
somebody else's project. You pick, based on what you enjoyed and what you kept wanting to build.
The last thing we do in week 52 is decide what you'll build on your own, starting the following week.
A year of momentum with nothing planned afterwards tends to stop, and by then you won't need me to make
progress. That's the whole point.
Prepared by John Ayodele
Aerospace software and embedded systems engineer. Building intelligent systems across avionics,
robotics, AI, firmware and full-stack software.
This handbook is for students on the twelve-month full-stack programme. There
is a separate guide for parents and guardians covering the same year from their side. If you're reading
this and thinking about starting, the fastest way to know whether it suits you is to try week 1 and see
how it feels.