From 1f9ebfad30f1ced02335f814b7bbd9705b3dfeda Mon Sep 17 00:00:00 2001
From: Sarah Jane Ross <sarahjane@realpython.com>
Date: Sat, 7 Nov 2026 06:19:41 +0000
Subject: [PATCH] Add materials for How to Become a Full Stack Developer

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 .../README.md                                 | 17 ++++++++++
 .../roadmap-checklist.md                      | 31 +++++++++++++++++++
 .../slice/index.html                          | 23 ++++++++++++++
 .../slice/server.mjs                          | 23 ++++++++++++++
 4 files changed, 94 insertions(+)
 create mode 100644 how-to-become-a-full-stack-developer/README.md
 create mode 100644 how-to-become-a-full-stack-developer/roadmap-checklist.md
 create mode 100644 how-to-become-a-full-stack-developer/slice/index.html
 create mode 100644 how-to-become-a-full-stack-developer/slice/server.mjs

diff --git a/how-to-become-a-full-stack-developer/README.md b/how-to-become-a-full-stack-developer/README.md
new file mode 100644
index 0000000000..742b3eb057
--- /dev/null
+++ b/how-to-become-a-full-stack-developer/README.md
@@ -0,0 +1,17 @@
+# Full Stack Roadmap Materials
+
+Supporting files for [How to Become a Full Stack Developer: What Jobs Ask For](https://realpython.com/how-to-become-a-full-stack-developer/).
+
+- `roadmap-checklist.md`: the printable checklist, one box per skill.
+- `slice/`: a minimal full stack slice. A Node.js server sends JSON, and a
+  web page fetches it and shows it. It needs Node.js 26 and no packages.
+
+Run the slice:
+
+```console
+$ cd slice
+$ node server.mjs
+Listening on http://localhost:3000
+```
+
+Then open http://localhost:3000 in a browser.
diff --git a/how-to-become-a-full-stack-developer/roadmap-checklist.md b/how-to-become-a-full-stack-developer/roadmap-checklist.md
new file mode 100644
index 0000000000..979b8fe86e
--- /dev/null
+++ b/how-to-become-a-full-stack-developer/roadmap-checklist.md
@@ -0,0 +1,31 @@
+# Full Stack Developer Roadmap Checklist
+
+Tick each box when you can do the thing without looking it up.
+Pace assumed: about 10 hours a week.
+
+## Stage 1: HTML and CSS
+- [ ] Build a page with headings, links, images, and a form
+- [ ] Style it with CSS and make it work on a phone-sized screen
+
+## Stage 2: JavaScript in the browser
+- [ ] Change the page when someone clicks a button
+- [ ] Fetch JSON from a URL and show it on the page
+
+## Stage 3: A server with Node.js
+- [ ] Run a Node.js server that answers with JSON
+- [ ] Install a package with npm
+
+## Stage 4: A database
+- [ ] Save and read data so it survives a restart
+
+## Stage 5: Ship it
+- [ ] Put your project on GitHub
+- [ ] Deploy it so a stranger can open the link
+
+## Before you apply: React and TypeScript
+- [ ] Rebuild one of your projects' pages with React components
+- [ ] Add TypeScript types to that project and fix what the checker flags
+
+## Ready to apply
+- [ ] Two or three deployed projects, each with a front end, a server, and a database
+- [ ] Each project has a public repository with a README that says what it does and how to run it
diff --git a/how-to-become-a-full-stack-developer/slice/index.html b/how-to-become-a-full-stack-developer/slice/index.html
new file mode 100644
index 0000000000..cbe86a8a83
--- /dev/null
+++ b/how-to-become-a-full-stack-developer/slice/index.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Skills</title>
+  </head>
+  <body>
+    <h1>Full stack skills</h1>
+    <ul id="skills"></ul>
+    <script>
+      fetch("/api/skills")
+        .then((response) => response.json())
+        .then((skills) => {
+          const list = document.querySelector("#skills");
+          for (const skill of skills) {
+            const item = document.createElement("li");
+            item.textContent = `${skill.name} (stage ${skill.stage})`;
+            list.append(item);
+          }
+        });
+    </script>
+  </body>
+</html>
diff --git a/how-to-become-a-full-stack-developer/slice/server.mjs b/how-to-become-a-full-stack-developer/slice/server.mjs
new file mode 100644
index 0000000000..251598f2a9
--- /dev/null
+++ b/how-to-become-a-full-stack-developer/slice/server.mjs
@@ -0,0 +1,23 @@
+import { createServer } from "node:http";
+import { readFile } from "node:fs/promises";
+
+const skills = [
+  { name: "HTML", stage: 1 },
+  { name: "CSS", stage: 1 },
+  { name: "JavaScript", stage: 2 },
+  { name: "Node.js", stage: 3 },
+];
+
+const server = createServer(async (req, res) => {
+  if (req.url === "/api/skills") {
+    res.writeHead(200, { "Content-Type": "application/json" });
+    res.end(JSON.stringify(skills));
+  } else if (req.url === "/") {
+    res.writeHead(200, { "Content-Type": "text/html" });
+    res.end(await readFile(new URL("index.html", import.meta.url)));
+  } else {
+    res.writeHead(404).end("Not found");
+  }
+});
+
+server.listen(3000, () => console.log("Listening on http://localhost:3000"));