Skip to main content
FreeAcademy

Learning Roadmaps

Full-Stack Developer

Go from zero to building complete web applications. Start with HTML, CSS, and JavaScript, learn Git and TypeScript, build interfaces with React, write backends with Node.js and REST APIs, query SQL databases, and ship a Next.js site that ranks.

11 courses100% free, certificate included with every course

Roadmap badge

Complete all courses in this roadmap to earn its badge.

Start with step 1

Courses in this roadmap

  1. Step 1Beginner

    Interactive HTML Fundamentals

    Master HTML from the ground up with hands-on exercises. Learn document structure, semantic elements, forms, tables, media, and accessibility best practices with live preview in your browser. No prior experience required.

  2. Step 2Beginner

    Interactive CSS Selectors & Layout

    Master CSS selectors, specificity, Flexbox, and CSS Grid with hands-on exercises. Build modern layouts with live preview and instant feedback. Practice from basic selectors to complex grid layouts in your browser.

  3. Step 3Beginner

    Interactive JavaScript Practice

    Learn JavaScript programming with hands-on exercises. Practice variables, functions, arrays, objects, and more with live code execution in your browser. Master modern ES6+ features like arrow functions, destructuring, and spread operators.

  4. Step 4Beginner

    Git & GitHub Mastery

    Master version control with Git and GitHub. Learn branching, merging, pull requests, and collaboration workflows.

  5. Step 5Intermediate

    Interactive TypeScript Practice

    Master TypeScript with hands-on exercises. Learn types, interfaces, generics, utility types, and advanced patterns with live code execution. Build type-safe applications with instant feedback in your browser.

  6. Step 6Intermediate

    Interactive React Fundamentals

    Master React with hands-on exercises in your browser. Learn components, props, state, hooks, and modern React patterns through interactive coding challenges. Build real UI components with live preview and instant feedback.

  7. Step 7Intermediate

    Interactive Node.js Basics

    Master server-side JavaScript with Node.js through hands-on practice. Learn modules, file system operations, HTTP servers, npm, async patterns, and REST APIs. Build real backend applications with interactive exercises in your browser.

  8. Step 8Intermediate

    Interactive REST API Design

    Master REST API design principles and best practices through hands-on exercises. Learn resource naming, HTTP methods, status codes, authentication, versioning, and documentation. Build real-world API designs with interactive request builders and response validation.

  9. Step 9Beginner

    SQL Basics

    Master the fundamentals of SQL from scratch. Learn to query, manipulate, and design databases using PostgreSQL. Build real-world database systems through hands-on exercises and a capstone project. No prior database experience required.

  10. Step 10Intermediate

    Next.js Mastery

    Master Next.js from App Router fundamentals to advanced patterns. Learn server vs client components, data fetching strategies, rendering modes, and production optimization for developers who know React and want to fill knowledge gaps.

  11. Step 11Intermediate

    SEO Mastery for Next.js Developers

    Learn to build search-engine-optimized Next.js applications from the ground up. Master metadata, structured data, technical SEO, and Core Web Vitals. Understand how Google crawls and indexes your pages, and implement best practices that drive organic traffic.

Practice projects

Prove what you learned by building something real. Pick a project, build it on your own machine, push it to a public GitHub repository, and submit the link for review.

Project 1Beginner3-5 hours

Personal Portfolio Site

Build and deploy a responsive multi-page portfolio site with semantic HTML and modern CSS layout.

Requirements

  • At least three pages: home, projects, contact
  • Semantic HTML (header, nav, main, footer, headings in order)
  • Layout built with flexbox or grid, responsive on mobile
  • A contact form with client-side validation
  • Deployed somewhere public, with the live link in the README

Suggested tools: HTML, CSS, JavaScript

Project 2Intermediate6-8 hours

CRUD App With a Database

Build a full application where users can create, read, update, and delete records stored in a real database, for example a task manager or a recipe box.

Requirements

  • Create, list, edit, and delete records through the UI
  • Data persists in a real database, not just in memory
  • Forms validate input and show useful error messages
  • A list view and a detail view for records
  • README explains the schema and how to run the app locally

Suggested tools: TypeScript, A SQL database, Any web framework

Project 3Intermediate4-6 hours

Live Data Dashboard

Fetch data from a public JSON API, transform it, and present it in a dashboard with charts or summary cards.

Requirements

  • Fetches live data from a public JSON API
  • Transforms the raw data (grouping, totals, or filtering) before display
  • Shows at least three different views of the data (cards, table, or chart)
  • Handles loading and error states visibly
  • README names the API used and what each view shows

Suggested tools: JavaScript or TypeScript, Any public JSON API