A structured, self-paced full stack development curriculum. Everything you need is here: lecture notes covering each topic from foundations to advanced, and hands-on projects to build alongside your learning.
This repo is designed to be used alongside free online resources — read the lecture note, then build the project. The project files contain all the requirements, goals, and step-by-step guidance in comments — no starter code is provided for you. You build it yourself.
This curriculum is for anyone learning to code who wants a clear, structured path — not a scatter of random tutorials. It's especially well suited for:
- Complete beginners — everything starts from zero, no assumed knowledge
- Career switchers — covers the full stack with enough depth to be job-ready
- Self-taught developers — fills in gaps left by tutorials and courses
- Anyone who learns by doing — every topic has a matching project, not just reading
You don't need to go through all 30 topics. Open 1. Lecture Notes/00. Learning Roadmap.md and pick the path that fits your goal (frontend, backend, full stack, data, or DevOps). You can be focused and targeted rather than working through everything linearly.
- Open
1. Lecture Notes/00. Learning Roadmap.mdand choose a path - Work through the lecture notes for your chosen path in order
- When you finish a topic, open the matching project folder
- Read the instructions inside the files (they're in the comments)
- Build it yourself — look things up, experiment, break stuff
- Commit your work as you go — treat this as your portfolio
This repo pairs well with the Study Sprint Tracker GitHub Action, which automatically tracks your learning progress across commits.
Use these free resources alongside the lecture notes:
| Resource | Best for |
|---|---|
| The Odin Project | HTML → CSS → JS → Node.js full curriculum |
| freeCodeCamp | Structured exercises with certifications |
| Full Stack Open | React, Node.js, TypeScript, GraphQL |
| web.dev (Chrome) | HTML, CSS, accessibility, performance |
| Web Skills | Visual map of everything in web dev |
| Patterns.dev | JavaScript and React design patterns |
| MDN Web Docs | Reference for HTML, CSS, and JavaScript |
| TypeScript Handbook | Official TypeScript documentation |
| React Docs | Official React documentation |
| Next.js Docs | Official Next.js documentation |
| FastAPI Docs | Official FastAPI documentation |
All notes are in the 1. Lecture Notes/ folder, numbered in learning order. Start with 00. Learning Roadmap.md to find the right path for your goal — you don't need to read everything linearly.
| # | Topic | What you'll learn |
|---|---|---|
| 00 | Learning Roadmap | Choose your path — frontend, backend, full stack, data, or DevOps |
| 01 | VS Code Basics | Editor setup, shortcuts, extensions, debugging |
| 02 | CLI and Terminal | Navigation, file operations, environment variables, SSH |
| 03 | Git and GitHub | Version control, branching, pull requests, workflows |
| 04 | HTML Foundations | Semantic elements, forms, tables, links, images |
| 05 | CSS Foundations | Selectors, box model, colours, units, typography |
| 06 | Intermediate HTML and CSS | Flexbox, Grid, responsive design, CSS variables, animations |
| 07 | Advanced HTML and CSS | Container queries, CSS layers, @property, scroll-driven animations |
| 08 | SEO and Accessibility | Meta tags, Open Graph, WCAG, ARIA, keyboard navigation |
| 09 | JavaScript Foundations | Variables, functions, control flow, arrays, objects, DOM |
| 10 | JavaScript Intermediate | Events, closures, async/await, fetch, localStorage |
| 11 | JavaScript Advanced | Prototypes, generators, Proxy, WeakMap, design patterns |
| 12 | TypeScript Foundations | Types, interfaces, enums, classes, type narrowing |
| 13 | TypeScript Intermediate | Generics, utility types, mapped types, discriminated unions |
| 14 | TypeScript Advanced | Infer, branded types, recursive types, declaration files |
| 15 | APIs | REST, HTTP, fetch, authentication, GraphQL, WebSockets |
| 16 | React Foundations | JSX, components, props, useState, useEffect |
| 17 | React Intermediate | Custom hooks, useReducer, useContext, React Router, TanStack Query |
| 18 | React Advanced | Concurrent features, Suspense, Server Components, Zustand |
| 19 | Next.js Foundations | App Router, Server Components, routing, layouts, metadata |
| 20 | Next.js Advanced | SSG/SSR/ISR, caching, Server Actions, middleware, NextAuth |
| 21 | Node.js Foundations | Event loop, fs/http modules, Express, middleware |
| 22 | Node.js Advanced | Streams, Workers, clustering, JWT auth, WebSockets, file uploads |
| 23 | Databases | SQL, CRUD, JOINs, indexes, transactions, window functions, JSONB |
| 24 | Python Foundations | Variables, functions, classes, error handling, virtual environments |
| 25 | Python Full Stack | FastAPI, Pydantic, SQLAlchemy, Alembic, JWT, Docker |
| 26 | Web Security | SQL injection, XSS, CSRF, password hashing, environment variables, OWASP |
| 27 | Django | Models, ORM, views, templates, forms, authentication, REST framework |
| 28 | MongoDB | Documents, collections, CRUD, aggregation pipeline, indexes, Mongoose |
| 29 | Pandas and NumPy | DataFrames, Series, indexing, cleaning, aggregation, vectorized ops |
| 30 | DevOps and AWS | CI/CD, Docker, EC2, S3, RDS, IAM, load balancers, deployment pipelines |
All projects are in the 2. Projects/ folder. Instructions are inside each file.
| # | Project | Skills |
|---|---|---|
| 2.1 | Recipe Website | HTML Foundations — multi-page site, links, lists, images |
| 2.2 | Rock Paper Scissors | JS Foundations — game logic, DOM, events |
| 2.3 | Etch-a-Sketch | JS Foundations — dynamic grid, mouse events, drawing modes |
| 2.4 | Calculator | JS Foundations — state management, operator chaining, keyboard |
| 2.5 | Personal Portfolio | HTML + CSS + JS — your real portfolio site |
| 2.6 | Animated Landing Page | Advanced CSS — keyframes, scroll animations, IntersectionObserver |
| 2.7 | SEO Blog Page | SEO + Accessibility — meta tags, Open Graph, structured data, ARIA |
| 2.8 | Weather App | APIs — fetch, async/await, OpenWeatherMap API, multiple UI states |
| 2.9 | Todo App | JS Advanced — localStorage, state management, CRUD, filters |
| 2.10 | TypeScript Library Manager | TypeScript Foundations — CLI app, interfaces, generics, enums |
| 2.11 | TypeScript Quiz App | TypeScript Intermediate — discriminated unions, state machines |
| 2.12 | GitHub Profile Viewer | APIs + JS — GitHub REST API, Promise.all, dynamic UI |
| 2.13 | React Habit Tracker | React Foundations + Intermediate — custom hooks, localStorage |
| 2.14 | React Movie Search | React Intermediate — TanStack Query, React Router, context |
| 2.15 | React Dashboard | React Advanced — Zustand, Suspense, compound components, charts |
| 2.16 | Next.js Blog | Next.js — App Router, Markdown, SSG, metadata, dark mode, RSS |
| 2.17 | Express REST API | Node.js Foundations — full CRUD API, middleware, JSON storage |
| 2.18 | Full Stack CRUD App | Node.js + Databases — PostgreSQL, JWT auth, React frontend |
| 2.19 | FastAPI Todo API | Python — FastAPI, SQLAlchemy, Pydantic, SQLite |
| 2.20 | Full Stack Next.js + FastAPI | Python Full Stack — capstone project, full auth, charts, deployment |
| 2.21 | Security Audit and Hardening | Web Security — find and fix SQL injection, XSS, exposed secrets |
— gekkzzz