freeCodeCamp is the most widely used free coding education platform in the world. It has helped more than ten million people learn to code. The curriculum has been rebuilt and expanded several times since it launched in 2014, and the current version is a genuinely comprehensive path from absolute beginner to job-ready developer, covering web development, data science, and machine learning — all free, all in-browser, all with practical projects.
These freecodecamp roadmap notes cover every major section of the freeCodeCamp curriculum: what each section contains, what skills it builds, and what to do after you finish it. If you are at the start of the curriculum and trying to understand the shape of the path ahead, or if you are partway through and want a structured reference for what you have covered, this is the guide.
freeCodeCamp's full-stack developer overview. The full curriculum is at freecodecamp.org — all certifications are free.
For a broader guide to self-directed technical learning, see our learn Python from YouTube guide. For data science topics, see our learn data science from YouTube guide. For a guide to turning YouTube courses into structured notes, see our YouTube to notes complete guide.
The Shape of the freeCodeCamp Curriculum
freeCodeCamp's curriculum is organized as a series of certifications, each consisting of hundreds of interactive challenges followed by five required projects. You submit the projects and freeCodeCamp generates the certification. The certifications are not academically recognized — their value is in what you learned and the projects you built, not the credential itself.
The current certifications (in order):
- Responsive Web Design (HTML, CSS, flexbox, grid)
- JavaScript Algorithms and Data Structures
- Front End Development Libraries (React, Redux, Bootstrap, jQuery, Sass)
- Data Visualization (D3.js, JSON APIs, AJAX)
- Relational Database (PostgreSQL, SQL, Bash scripting)
- Back End Development and APIs (Node.js, Express, MongoDB, Mongoose)
- Quality Assurance (testing with Mocha, Chai, Zombie.js)
- Scientific Computing with Python (Python fundamentals for data science)
- Data Analysis with Python (NumPy, Pandas, Matplotlib)
- Information Security (penetration testing, HelmetJS, cryptography)
- Machine Learning with Python (TensorFlow, neural networks, NLP)
Each certification is designed to be completable in 300–400 hours, though the actual time varies widely by prior experience and learning pace. The full curriculum, completed end-to-end, represents approximately three thousand hours of learning and dozens of built projects.
How to use the curriculum. freeCodeCamp does not require you to do the certifications in order. If you already know HTML and CSS, skip to JavaScript. If you already know JavaScript and want to learn React, go straight to the Front End Libraries section. The curriculum is designed to be modular.
Responsive Web Design: HTML, CSS, and Layout
The Responsive Web Design certification is the entry point for anyone who has never built a web page. It covers the three technologies that define the structure and appearance of every webpage.
HTML (HyperText Markup Language) is the structure of the web. An HTML document is a tree of elements, each represented by tags:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<a href="https://example.com">This is a link</a>
<img src="photo.jpg" alt="A description of the photo">
Semantic HTML uses elements that convey meaning: <header>, <main>, <article>, <section>, <nav>, <footer>, <aside>. Semantic HTML matters for accessibility (screen readers use it) and for SEO.
CSS (Cascading Style Sheets) controls the appearance. CSS rules consist of a selector and a declaration block:
h1 {
color: #333;
font-size: 2rem;
margin-bottom: 1rem;
}
The cascade determines which rules apply when multiple rules target the same element: specificity (ID > class > element), source order (later rules win), and !important (avoid except as a last resort).
Box model. Every element is a rectangular box with content, padding, border, and margin. box-sizing: border-box makes element dimensions include padding and border — almost always what you want.
CSS Flexbox is the tool for one-dimensional layout (a row or a column of items):
.container {
display: flex;
flex-direction: row; /* or column */
justify-content: space-between; /* horizontal alignment */
align-items: center; /* vertical alignment */
gap: 1rem;
}
CSS Grid is the tool for two-dimensional layout:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem;
}
Responsive design means your layout works on screens from 320px (small phone) to 2560px (large monitor). The tools: fluid widths (percentages instead of fixed pixels), media queries (change layout at breakpoints), and flexible images (max-width: 100%).
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
freeCodeCamp's Responsive Web Design projects:
- Tribute page
- Survey form
- Product landing page
- Technical documentation page
- Personal portfolio webpage
These five projects demonstrate HTML/CSS competency. Build them without using a tutorial — figure out how to implement each requirement yourself, looking up documentation when stuck.
JavaScript Algorithms and Data Structures
The JavaScript certification is where most learners spend the most time and gain the most leverage. JavaScript is the only language that runs natively in browsers, which makes it the lingua franca of web development. It is also a legitimate general-purpose language used for servers (Node.js), mobile apps (React Native), and desktop apps (Electron).
Variables, types, and operators. JavaScript has three variable declaration keywords:
var: function-scoped, hoisted, has confusing behavior in loops. Avoid in new code.let: block-scoped, not hoisted in the usable sense. Default for mutable variables.const: block-scoped, cannot be reassigned. Default for variables that should not change.
JavaScript is dynamically and weakly typed: typeof "hello" is "string", typeof 42 is "number", typeof null is "object" (a historical bug). Equality is tricky: == performs type coercion, === does not. Always use ===.
Functions. Four ways to define functions:
// Function declaration (hoisted)
function add(a, b) { return a + b; }
// Function expression
const multiply = function(a, b) { return a * b; };
// Arrow function (shorter syntax, no own `this`)
const square = (x) => x * x;
// Immediately invoked
(function() { console.log("runs immediately"); })();
Arrow functions do not have their own this binding — they inherit this from the surrounding scope. This makes them useful for callbacks and methods in class-based code.
Arrays and array methods. The functional array methods are among the most important things to learn in JavaScript:
map(fn): transform every element, return new arrayfilter(fn): return only elements where fn returns truereduce(fn, initial): reduce to a single valuefind(fn): return first element where fn is true, or undefinedsome(fn)/every(fn): check if any/all elements satisfy a predicateflat()/flatMap(fn): flatten nested arrays
Objects and destructuring. Objects are key-value stores:
const user = { name: "Alice", age: 30, active: true };
// Destructuring
const { name, age } = user;
// Spread
const updatedUser = { ...user, age: 31 };
Promises and async/await. JavaScript is single-threaded. Asynchronous operations (fetching data, reading files) use callbacks, Promises, or async/await:
async function fetchUser(id) {
try {
const response = await fetch(`/api/users/${id}`);
if (!response.ok) throw new Error("Not found");
const data = await response.json();
return data;
} catch (error) {
console.error(error);
}
}
Data structures and algorithms. freeCodeCamp covers classic algorithms with JavaScript implementations:
- Sorting: bubble sort, selection sort, insertion sort, merge sort, quicksort
- Search: linear search, binary search
- Dynamic programming: memoization, tabulation
- Common interview problems: palindrome checking, anagram detection, flatten arrays, frequency counters
The certification project at the end (a JavaScript calculator, a Markdown previewer, a data drum machine, a JavaScript quiz app, and a pomodoro clock) requires implementing real interactive UI from scratch.
Front End Development Libraries: React, Redux, and Sass
The front-end libraries certification takes you from raw JavaScript to the tool stack used at the majority of front-end jobs.
Sass (Syntactically Awesome Style Sheets) is CSS with superpowers: variables, nesting, mixins, and functions. It compiles to plain CSS.
$primary-color: #007bff;
.button {
background: $primary-color;
&:hover {
background: darken($primary-color, 10%);
}
}
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
Bootstrap is a CSS component library: pre-built buttons, cards, navbars, modals, and a grid system. Using Bootstrap accelerates UI development and ensures visual consistency across browsers. The trade-off: Bootstrap sites look like Bootstrap sites unless you customize heavily.
React is the dominant front-end framework. It models UIs as a tree of components, each responsible for a piece of the interface:
function Counter() {
const [count, setCount] = React.useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
Key React concepts freeCodeCamp covers:
- JSX: HTML-like syntax in JavaScript files, compiled to
React.createElement()calls - Components: function components (current standard) and class components (legacy, still common in codebases)
- Props: data passed from parent to child component
- State: data owned by a component, changes trigger re-renders
- Hooks:
useState,useEffect,useContext,useMemo,useCallback - Lifecycle: component mounting, updating, and unmounting (via
useEffect) - Controlled inputs: form inputs whose value is controlled by React state
Redux is a state management library. When multiple components need access to the same state, lifting state to a common parent gets unwieldy. Redux puts state in a central store, and components subscribe to the parts of state they need.
Core Redux concepts:
- Store: the single source of truth for application state
- Actions: plain objects describing what happened
- Reducers: pure functions that compute the next state from the current state and an action
- Dispatch: sends an action to the store, triggering the reducer
// Reducer
function counterReducer(state = 0, action) {
switch (action.type) {
case 'INCREMENT': return state + 1;
case 'DECREMENT': return state - 1;
default: return state;
}
}
In 2026, Redux Toolkit (RTK) is the recommended way to write Redux code — it reduces boilerplate dramatically compared to the original API. freeCodeCamp covers the foundational concepts; read the RTK documentation when you apply Redux in practice.
Data Visualization with D3.js
The data visualization certification teaches D3.js — the standard library for creating interactive data visualizations in the browser.
D3 is different from charting libraries (Chart.js, Recharts). It does not give you pre-built charts. Instead, it gives you tools to bind data to DOM elements and apply transformations based on that data. The result is complete control over every aspect of the visualization.
D3 fundamentals:
// Select elements, bind data, enter selection, create elements
d3.select("body")
.selectAll("div")
.data([1, 2, 3, 4, 5])
.enter()
.append("div")
.style("height", d => `${d * 20}px`)
.text(d => d);
Scales map data values to visual values:
const xScale = d3.scaleLinear()
.domain([0, d3.max(dataset)]) // data range
.range([0, w - padding]); // pixel range
Axes are generated from scales:
const xAxis = d3.axisBottom(xScale);
svg.append("g")
.attr("transform", `translate(0, ${h - padding})`)
.call(xAxis);
Chart types covered: bar charts, scatter plots, line charts, force-directed graphs (for networks), tree diagrams, and choropleth maps.
The JSON APIs and AJAX section of this certification covers how to fetch data from external APIs, work with JSON, and update the DOM asynchronously. The core skill: fetch(), .then() chaining, and error handling.
Back End Development and APIs: Node, Express, MongoDB
The back-end certification is where you build server-side applications. Node.js runs JavaScript outside the browser — the same language on both client and server is one of the reasons JavaScript took over full-stack development.
Node.js fundamentals:
- The event loop: how Node handles many concurrent connections without threads
- Built-in modules:
fs(file system),http,path,os npm: the package manager;package.jsonmanages dependencies
Express is the most widely used Node.js web framework:
const express = require('express');
const app = express();
app.use(express.json());
app.get('/api/users', (req, res) => {
res.json({ users: [] });
});
app.post('/api/users', (req, res) => {
const { name, email } = req.body;
// create user...
res.status(201).json({ created: true });
});
app.listen(3000);
REST principles. REST (Representational State Transfer) is a set of conventions for HTTP APIs:
GET /resources: list all resourcesGET /resources/:id: get one resourcePOST /resources: create a resourcePUT /resources/:id: replace a resourcePATCH /resources/:id: update fields of a resourceDELETE /resources/:id: delete a resource
MongoDB and Mongoose. MongoDB stores data as JSON-like documents instead of relational tables. Mongoose is the Node.js ODM (Object-Document Mapper) for MongoDB:
const userSchema = new mongoose.Schema({
name: { type: String, required: true },
email: { type: String, required: true, unique: true },
createdAt: { type: Date, default: Date.now }
});
const User = mongoose.model('User', userSchema);
// Create
const user = await User.create({ name: 'Alice', email: 'alice@example.com' });
// Query
const users = await User.find({ name: /alice/i }).limit(10);
Authentication with JWT. freeCodeCamp covers JSON Web Tokens for stateless authentication: the server signs a token with a secret, the client stores and sends the token with each request, the server verifies the signature.
Information Security: Penetration Testing and Secure Coding
The information security certification is the most specialized section of the curriculum. It covers both defensive coding (writing secure applications) and offensive thinking (understanding how attackers think).
HTTPS and TLS. HTTPS encrypts HTTP traffic using TLS (Transport Layer Security). TLS provides:
- Confidentiality: traffic cannot be read by intermediaries
- Integrity: traffic cannot be modified in transit
- Authentication: the server is who it claims to be (via certificates)
HelmetJS is a Node.js middleware that sets security-related HTTP headers. It protects against common vulnerabilities by adding headers like:
Content-Security-Policy: restricts what resources the browser will loadX-Frame-Options: prevents clickjackingX-XSS-Protection: basic XSS filterStrict-Transport-Security: tells browsers to only use HTTPS
OWASP Top 10 vulnerabilities (covered conceptually):
- Injection (SQL injection, command injection): unsanitized user input executed as code. Prevent with parameterized queries and input validation.
- Broken Authentication: weak passwords, exposed tokens, session fixation. Prevent with strong password hashing (bcrypt), secure session management.
- Sensitive Data Exposure: transmitting or storing sensitive data without encryption. Prevent with TLS, at-rest encryption.
- XSS (Cross-Site Scripting): injecting malicious scripts into pages. Prevent with output encoding and Content Security Policy.
- CSRF (Cross-Site Request Forgery): tricking users into making unintended requests. Prevent with CSRF tokens.
Cryptography basics. freeCodeCamp covers symmetric encryption, hashing (SHA, bcrypt), and public-key cryptography. The practical skills: password hashing (never store plaintext passwords, use bcrypt or Argon2), HMAC for message authentication, and understanding what TLS certificates actually prove.
Penetration testing concepts. The curriculum introduces reconnaissance, scanning (nmap), exploitation frameworks, and responsible disclosure. The goal is not to produce pen testers, but to ensure developers understand how attackers think.
Machine Learning with Python and Scientific Computing
The machine learning and Python certifications cover data science and ML, bringing the freeCodeCamp curriculum into AI territory.
Scientific Computing with Python starts with Python fundamentals for a technical audience: data types, control flow, functions, file I/O, regular expressions, and Python's scientific libraries. It assumes some programming background.
NumPy is the foundation of Python data science:
import numpy as np
a = np.array([1, 2, 3, 4, 5])
b = np.arange(0, 10, 2) # [0, 2, 4, 6, 8]
# Vectorized operations (fast)
c = a * 2 # [2, 4, 6, 8, 10]
d = np.dot(a, a) # dot product = 55
Pandas handles tabular data:
import pandas as pd
df = pd.read_csv('data.csv')
df.describe() # summary statistics
df[df['age'] > 30] # filter rows
df.groupby('city').mean() # group and aggregate
Matplotlib for visualization:
import matplotlib.pyplot as plt
plt.plot(x, y, label='line')
plt.scatter(x, y)
plt.bar(categories, values)
plt.show()
Machine Learning with Python covers TensorFlow and the high-level Keras API for building neural networks:
import tensorflow as tf
model = tf.keras.Sequential([
tf.keras.layers.Dense(128, activation='relu', input_shape=(784,)),
tf.keras.layers.Dropout(0.2),
tf.keras.layers.Dense(10, activation='softmax')
])
model.compile(optimizer='adam',
loss='sparse_categorical_crossentropy',
metrics=['accuracy'])
model.fit(X_train, y_train, epochs=10, validation_split=0.2)
The ML certification projects include an SMS spam classifier, a rock-paper-scissors AI, and a cat/dog image classifier — hands-on applications of what was covered conceptually.
What Should You Do After freeCodeCamp?
freeCodeCamp gives you a broad foundation. The question after completing a certification or the full curriculum is: how do you go from "I completed freeCodeCamp" to "I am employable"?
Build projects you care about. The five certification projects demonstrate competency, but they are recognizable as freeCodeCamp projects to every hiring manager. Build something that solves a real problem, preferably one you have yourself. A project you can talk about for 20 minutes in an interview is worth ten completed certifications.
Depth in one area. Front-end? Learn React in depth — hooks, performance optimization, testing with React Testing Library. Back-end? Go deeper into databases — SQL with PostgreSQL, indexing, query optimization. Data science? Go deeper into ML — see the learn data science from YouTube guide and the learn machine learning from YouTube guide.
Contribute to open source. Find a project you use and fix a bug or add a small feature. The process of reading someone else's large codebase and making a pull request is an important skill that personal projects do not develop.
Prepare for technical interviews. freeCodeCamp's algorithm challenges are a good start, but LeetCode covers the depth expected at technical interviews for most companies. Focus on arrays, strings, hash maps, trees, and graphs.
The freeCodeCamp curriculum is a starting point, not a destination. What makes self-taught developers competitive is the projects they built, the problems they can articulate solving, and the initiative they demonstrated in learning independently — not the certifications they hold.
How Long Does the freeCodeCamp Curriculum Take?
The honest answer: it depends entirely on your prior experience and how many hours per week you commit.
A complete beginner who puts in 20 hours per week can get through the Responsive Web Design and JavaScript certifications in about three months. The full curriculum, if you actually understand what you are doing (not just copying solutions to pass challenges), takes most people two to three years of consistent part-time effort.
This does not mean you need the full curriculum to be job-ready. Many front-end developers are job-ready after the first three certifications (web design, JavaScript, front-end libraries), especially combined with a strong project portfolio.
The goal is not to finish freeCodeCamp. The goal is to build the skills to do the work you want to do. freeCodeCamp is a curriculum that supports that goal, not the goal itself.
For tips on staying consistent through a long self-directed curriculum, see our YouTube to notes complete guide and the guide on how to reverse engineer college courses from free content.
freeCodeCamp covers hundreds of hours of material. The challenge is not finding the content — it is staying organized and making sure concepts stick as you move forward. Notiq generates structured notes from any lecture or video, so you can build a personal reference as you work through the curriculum rather than starting from scratch every time you revisit a concept.
