Content
# Tool List
> **From Zero to AI Era Full-Stack Engineer** — A systematic learning roadmap organized with Obsidian, consisting of **over 580,000 words / 110 detailed tutorials**.
> Covering **Python · JavaScript · React · FastAPI · Database · LLM · AI Agent · Graduation Project**, each knowledge point comes with **analogy explanations + complete code + exercise questions + GitHub project recommendations**.
[](.) [](.) [](.) [](.) [](.) [](.)
⭐ **If you find this useful, please star it — it's a great encouragement for the maintainer**
---
## 💡 What is This
Not a list of links. This is a complete tutorial package for **"From Zero to Independent AI Agent Product Delivery"**:
- 📘 **110 Markdown files / 580,000 words** — each new concept explained with daily analogies
- 💻 **Complete runnable code** — not snippets, but line-by-line comments + expected output + exercise answers
- 🎯 **30+ chapter projects** — each chapter requires a verification project, not considered complete without it
- ⭐ **400+ selected GitHub projects** — each labeled with "how to use it for learning"
- 🗺️ **Obsidian Canvas mind map** — global view + chapter relationships at a glance
- 📊 **配套学习契约 / 周报 / 里程碑模板** —— 强制反馈系统 (translated to English below)
> This tutorial is **specifically designed for beginners**: you don't need any prior knowledge, just 3 hours a day + a persistent heart.
---
## 🚀 Quick Start
### Method 1: Open with Obsidian (Recommended ⭐)
1. **Download** [Obsidian](https://obsidian.md/) (free)
2. `git clone https://github.com/Karovia/fullstack-ai-agent-roadmap.git`
3. Open the downloaded folder in Obsidian (Open folder as vault)
4. **First open** `全栈学习路线/🗺️学习路线思维导图.canvas` to see the global view
5. Then start learning from `全栈学习路线/README.md`
### Method 2: Browse Directly on GitHub
Directly enter the [`全栈学习路线/`](全栈学习路线/) folder and read by chapter.
---
## 🗺️ Roadmap Overview
```
🌟 Ultimate Goal: AI Era Full-Stack Engineer
│
╔═══════════╪═══════════╗
║ 4 University Learning Motivation ║
║ Programming / Full-Stack / Agent / Source Code ║
╚═══════════╪═══════════╝
▼
━━━ Phase 1 · Foundation (1-3 months) ━━━
00 Learning Methodology → 01 Python → 02 JavaScript
│
━━━ Phase 2 · Front-end (4-7 months) ━━━
03 HTML/CSS → 04 React
│
━━━ Phase 3 · Back-end (8-10 months) ━━━
05 FastAPI/Hono → 06 Database
│
━━━ Phase 4 · AI Core (11-15 months) ━━━
07 LLM Foundation → 08 AI Agent ⭐
│
━━━ Phase 5 · Graduation (16-18 months) ━━━
09 Graduation Project (can be online / can make money)
│
╔═══════════╪═══════════╗
║ Job Search / Independent Development / Influence / Entrepreneurship ║
╚═══════════════════════╝
```
Interactive version: `全栈学习路线/🗺️学习路线思维导图.canvas` (requires Obsidian to open)
---
## 📚 Chapter Directory
| # | Module | Duration | Chapter Project | Detailed Tutorials |
|---|------|------|--------------|----------|
| **00** | [Learning Methodology](全栈学习路线/00-学习方法论/) | 1 week | Learning Dashboard + Learning Contract | 8 |
| **01** | [Python from Zero to Source Code](全栈学习路线/01-Python-从零到源码/) | 10 weeks | `pyspider-cli` Asynchronous Crawler + PyPI Release | 12 |
| **02** | [JavaScript from Zero to Source Code](全栈学习路线/02-JavaScript-从零到源码/) | 10 weeks | `mini-lodash` + Online Code Sandbox | 12 |
| **03** | [HTML/CSS Modern Web](全栈学习路线/03-HTML-CSS-现代Web/) | 4 weeks | Pixel-level Restoration of Linear / Stripe / Apple Landing Page | 6 |
| **04** | [React from Usage to Source Code](全栈学习路线/04-前端框架-React/) | 10 weeks | Online Collaboration Whiteboard + Handwritten mini-react (Fiber + Hooks) | 12 |
| **05** | [Back-end FastAPI + Node](全栈学习路线/05-后端开发-FastAPI-Node/) | 8 weeks | RealWorld Conduit Back-end + Real-time Chat | 10 |
| **06** | [Database + Engineering](全栈学习路线/06-数据库与工程化/) | 6 weeks | `mini-twitter` High-Concurrent Short Text Community | 8 |
| **07** | [AI Foundation: Prompt + LLM](全栈学习路线/07-AI基础-Prompt与LLM/) | 6 weeks | `AskMyDocs` Enterprise Document Q&A + Implementing GPT from Scratch | 8 |
| **08** | [AI Agent Framework and Source Code](全栈学习路线/08-AI-Agent-框架与源码/) ⭐ | 12 weeks | `mini-agent-sdk` + Building MCP Server | 14 |
| **09** | [Graduation Project](全栈学习路线/09-综合实战-毕业项目/) | 8-12 weeks | **Product that can be online, make money, and write on resume** | 8 |
---
## ⭐ GitHub Project Selection for Each Chapter (Exclusive Highlights)
Each chapter comes with a **selected list of GitHub projects** (not just a collection, but a guide on "how to use it for learning"):
- 🌱 **Beginner-friendly** (30 minutes to get started)
- 🌿 **Intermediate** (read source code and learn design)
- 🌲 **Source Code Level** (see real production code)
- 🏆 **Easy-vibe Style** (small but complete, understand it after reading)
| Chapter | GitHub Project Selection |
|------|----------------|
| 00 Learning Methodology | [Beginner's Navigation](全栈学习路线/00-学习方法论/05-GitHub项目精选-入门导航.md) |
| 01 Python | [Python Project Selection](全栈学习路线/01-Python-从零到源码/11-GitHub项目精选-Python.md) |
| 02 JavaScript | [JavaScript Project Selection](全栈学习路线/02-JavaScript-从零到源码/11-GitHub项目精选-Javascript.md) |
| 03 HTML/CSS | [CSS and Design](全栈学习路线/03-HTML-CSS-现代Web/05-GitHub项目精选-CSS与设计.md) |
| 04 React | [React Ecosystem](全栈学习路线/04-前端框架-React/11-GitHub项目精选-React生态.md) |
| 05 Back-end | [Back-end Practice](全栈学习路线/05-后端开发-FastAPI-Node/09-GitHub项目精选-后端实战.md) |
| 06 Database | [Database DevOps](全栈学习路线/06-数据库与工程化/07-GitHub项目精选-数据库DevOps.md) |
| 07 LLM | [LLM Learning](全栈学习路线/07-AI基础-Prompt与LLM/07-GitHub项目精选-LLM学习.md) |
| **08 Agent** ⭐ | [**Agent Panorama**](全栈学习路线/08-AI-Agent-框架与源码/13-GitHub项目精选-Agent全景.md) |
| 09 Graduation Project | [Graduation Project Inspiration Library](全栈学习路线/09-综合实战-毕业项目/07-GitHub项目精选-灵感库.md) |
**4 In-depth Topics**:
- 🎬 [Easy-vibe 30-minute Projects](全栈学习路线/_资源库/Easy-vibe专题-30分钟跑起来的项目.md)
- 🛠️ [build-your-own-x Chinese Guide](全栈学习路线/_资源库/build-your-own-x-中文跟做指南.md)
- 📚 [awesome Index Navigation](全栈学习路线/_资源库/awesome-索引导航大全.md)
- 💼 [Real Open-source SaaS Disassembly](全栈学习路线/_资源库/真实开源SaaS拆解.md)
---
## 🎓 Learning Philosophy
This roadmap adheres to 4 principles:
1. **No Quick Fixes** — Source code level proficiency must go through 'understanding → imitation → rewriting → teaching others' four stages.
2. **Project-driven** — each chapter comes with a complete verification project, not considered complete without it.
3. **Feynman Learning Method** — write a note to teach others after each study session.
4. **Building from Scratch** — at the source code stage, you must write mini-react / mini-langchain / mini-agent yourself.
See [`00-学习方法论/`](全栈学习路线/00-学习方法论/) for the full 8-article methodology tutorial.
---
## 📊 Learning Outcome Indicators
After completing this roadmap, you should be able to:
| Capability Dimension | Specific Performance |
|---------|---------|
| **Programming** | write production-level code with Python / TypeScript without relying on frameworks |
| **Full-Stack** | independently launch a web application from scratch (front-end + back-end + DB + AI) |
| **AI Agent** | design, implement, optimize, and deploy multi-agent systems |
| **Source Code Level** | understand React / LangGraph / CPython part of the source code |
| **Engineering** | Docker / CI/CD / monitoring / testing ready |
| **Job Search** | get AI Agent engineer / full-stack engineer job offers |
| **Independent** | create a GitHub 100+ star open-source project |
---
## 📋 Recommended Learning Pace
| Investment | Duration | Suitable for |
|------|------|---------|
| 3 hours/day (weekdays) + 6 hours/weekend | 12-15 months | students / abundant free time |
| 1.5 hours/day + 6 hours/weekend | 18-24 months | with full-time job |
| 5+ hours/day | 8-10 months | full-time study |
---
## 🤝 Contribution and Feedback
- 🐛 **Found an error?** [Submit an Issue](https://github.com/Karovia/fullstack-ai-agent-roadmap/issues)
- 💡 **Improvement suggestions?** [Initiate a Discussion](https://github.com/Karovia/fullstack-ai-agent-roadmap/discussions)
- ⭐ **Useful?** Give it a star to let more people see it
- 🔄 **Want to share?** Welcome to Fork and reprint (please keep the original author information)
---
## 📜 License
This repository content is licensed under [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/).
- ✅ Free sharing, reprinting, and modification
- ✅ Commercial use (please indicate the source)
- ⚠️ Must retain the author's name ("Original Author: Karovia")
- ⚠️ Derivative works must adopt the same protocol
---
## 🌐 Related Links
- 📂 [Obsidian Official Website](https://obsidian.md/)
- 🤖 [Anthropic Claude](https://claude.ai/) — Best assistant for learning AI Agent
- 🎓 [Anthropic Courses](https://github.com/anthropics/courses)
- 🛠️ [build-your-own-x](https://github.com/codecrafters-io/build-your-own-x)
---
## 🙋 Acknowledgements
This roadmap stands on the shoulders of:
- **Anthropic** — Claude model and Agent design philosophy
- **Andrej Karpathy** — pioneering teaching of implementing neural networks from scratch
- **Sebastian Raschka** — LLMs-from-scratch
- **Kason** — React technology reveal
- **Datawhale** — Chinese AI education ecosystem
- **Liao Xuefeng, Ruan Yifeng, Zhang Xinyu** — Chinese technology enlightenment
- and numerous open-source community contributors
---
<p align="center">
<b>⭐ If this roadmap helps you, please star it — it's a great encouragement for the maintainer ⭐</b>
</p>
<p align="center">
Made with ❤️ in Obsidian · Powered by Claude
</p>
Connection Info
You Might Also Like
No recommendations available