Use the tools
Work confidently with a terminal, editor, Git and the web platform.
Free coding course materials
Coding Bootcamp in a Box.
Go from no development environment at all to a portfolio site you built and deployed yourself.
Codex · supportedClaude Code · supported
- Lessons
- 64
- Phases
- 9
- Course time
- 35h
- Homework
- 9
Free materials · self-paced · CC-BY-4.0
AI tools may require payment.
Get the courseHow to use it
Start with Codex or Claude Code in four steps.
The download includes the same course plus a tutor skill for each supported agent. Follow the instructions included with your download.
- Download
Subscribe below and the download appears on this page straight away.
- Unzip
Unzip it wherever you keep projects. The folder is yours to keep.
- Open
Open that folder in Codex or Claude Code, whichever you already use.
- Run
Type
$learnin Codex or/learnin Claude Code. Both read the same lessons and save progress locally.
Come back with `$learn` in Codex or `/learn` in Claude Code. Use `$progress` or `/progress` whenever you want a status check.
Outcomes
Finish with a real portfolio online.
Build the portfolio
Create a responsive site with JavaScript, React, Astro and Tailwind CSS.
Ship it
Use branches, reviews and CI before deploying to a real domain.
What you will be able to do
235 objectives, and most of them are practice.
Every lesson declares what you should be able to do when it ends, and 171 of the 235 ask you to do something rather than know something. Those are the ones your tutor checks against your actual work.
171
Settled by inspecting what you built or ran.
64
Settled by explaining the idea in your own words.
Full course outline
9 phases. One connected build.
64 lessons and about 35 hours of course time. Every phase ends with homework your tutor reviews before the next one opens.
Getting Started
You set up a working development environment and made a first commit.
- 01 What Is a Computer?
- 02 What Is a Terminal?
- 03 Navigating the Filesystem
- 04 Installing Node.js and npm
- 05 VS Code: Your Code Editor
- 06 Git: Saving Your Work Homework
Web Fundamentals
You built a styled, responsive webpage from scratch.
- 01 How the Web Works
- 02 HTML: Structure of the Web
- 03 CSS: Styling the Web
- 04 The Box Model
- 05 Flexbox Layout
- 06 CSS Grid
- 07 Responsive Design
- 08 HTML Forms
- 09 Your First Webpage (Project) Homework
JavaScript
You made a page interactive with events and live data.
- 01 JavaScript Basics: Variables and Types
- 02 Functions and Scope
- 03 Arrays and Objects
- 04 Control Flow: if/else and Loops
- 05 The DOM: Connecting JS to HTML
- 06 Events: Responding to User Actions
- 07 Async JavaScript and Fetch
- 08 JavaScript Mini-Project Homework
React
You built a first multi-component React app.
- 01 What Is React and Why It Exists
- 02 JSX: HTML in JavaScript
- 03 Components and Props
- 04 useState: Managing State
- 05 Lists and Keys
- 06 useEffect and Side Effects
- 07 Forms in React (Controlled Components)
- 08 Component Composition
- 09 React Mini-Project Homework
Astro
You learned to ship almost no JavaScript using islands.
- 01 What Is Astro and Why It's Different
- 02 Astro Files and Frontmatter
- 03 Layouts and Slots
- 04 Astro Components vs React Components
- 05 Islands Architecture
- 06 Static Pages and Routing
- 07 Data Fetching in Astro Homework
Tailwind CSS
You restyled the whole thing with utility-first CSS.
- 01 What Is Utility-First CSS?
- 02 Installing Tailwind v4 with Astro
- 03 Typography and Colours
- 04 Spacing, Sizing, and Layout
- 05 Flexbox and Grid with Tailwind
- 06 Responsive Design with Tailwind
- 07 Hover, Focus, and State Variants Homework
Portfolio
You built every section of the portfolio site.
- 01 Portfolio Architecture Overview
- 02 Building the Navigation
- 03 Building the Hero Section
- 04 Building the About Section
- 05 Building the Skills Section
- 06 Building the Projects Section (React)
- 07 Building the Contact Form (React)
- 08 Polish and Performance Homework
Git & GitHub
You put the work on GitHub with branches, reviews and CI.
- 01 Git Review and Branching
- 02 Merging and Resolving Conflicts
- 03 GitHub: Remote Repositories
- 04 Pull Requests and Code Review
- 05 GitHub Actions (CI/CD Basics) Homework
Deployment
You deployed a real portfolio to a custom domain.
- 01 How Deployment Works
- 02 Building for Production
- 03 Deploying to Cloudflare Pages
- 04 Custom Domain Setup
- 05 Going Live: Launch Checklist Homework
Prerequisites
Start from zero.
No coding experience is assumed. You will need a computer, an internet connection, time for practice and access to a supported AI tool. The course materials are free. AI tools and optional services, such as a custom domain, may have their own charges. Check the tool requirements before you begin.
Coding Bootcamp in a Box is a self-paced introduction to web development. The course materials use the open Skilling format, with lessons you can read and keep on your own computer.
The current download includes tutor skills for Codex and Claude Code. Both use the same lessons. Follow the setup instructions in the downloaded README.
Future of Dev is an independent learning publication. References to AI tools explain how to use the course; they do not imply endorsement by their makers.
Download
Get the course materials.
Subscribe to Future of Dev and your download link will appear on this page. Already subscribed? Use the same email address to get access.
Once it downloads, open the folder in Codex or Claude Code.
Run $learn in Codex or /learn in Claude Code.