前端学习路线
前端学习路线图，从 HTML/CSS/JS 基础到框架与工程化的完整路径。
#type / moc
#status / growing
#tech / dev / frontend
前端学习路线
入门
- HTML
文档
元素
元素属性 - CSS
选择器
规则集
盒模型
布局
定位 - JavaScript
- Web API
HTML DOM API
Web Storage API
Fetch API
URL API - 包管理器
- 模块化
- TS
- UI框架
- CSS框架
- 组件库
- 版本控制系统
进阶
- Nodejs
- 工具链
- 应用框架
- 通用工程实践
性能优化
CI/CD
质量工具
可观测性工程
专业阶段
中后台开发
CRUD界面开发 -》 微前端架构 》 低代码/编辑器技术/CMS
移动端开发
H5开发/小程序开发 -》 容器技术 -》 Native 开发
桌面应用开发
桌面应用框架 -》 客户端应用 -》 深入操作系统
数据可视化
可视化框架 -》 可视化应用开发 -》 深入原理
图形与互动
图形框架 -》 图形互动开发 -》 探索底层细节 -》 深入
全栈开发
Node.js 服务端 -》 全栈框架就 -》 服务端渲染 -》 深入服务端技术栈
前端基建
资产开发 -》 脚手架与框架研发 -》 研发平台建设
前端智能化
系统学习路线（Go 风格）
相关地图
- 前端基础 MOC
- 前端工程化 MOC
- 前端组件 MOC
- HTML MOC · CSS MOC · JavaScript MOC
- React MOC · Vue MOC · Vite MOC · Tailwind MOC
Related notes
BodySense 项目实战入口（把前端工程能力落到真实代码）
[!info] BodySense 的 Web 端是一个真实的 React + Vite + assistant-ui 前端工程。下面的代码是你把「前端工程化 / 组件 / 数据流」知识落到实处的样本。阅读顺序：先读代码注释 → 翻对应笔记 → 回看代码。
| 想练的知识点 | 去看的代码（仓库内相对路径） | 对应笔记 |
|---|---|---|
| React 状态机与副作用边界 | apps/web/src/features/consultation/runtime/activeTurnReducer.ts · context/ActiveTurnContext.tsx | useReducer · Context 与状态边界 |
| 流式 SSE 解析、增量解码、取消 | apps/web/src/features/consultation/hooks/useSSEProcessor.ts | Web Streams 增量解码 · AbortController 取消 |
| 组件 props / ref / 变体 | apps/web/src/components/ui/Button.tsx · Input.tsx | React TS 组件与 Hook 类型 · 类型化包装组件 |
| 异步数据获取 | apps/web/src/features/consultation/hooks/useConsultationSessionQuery.ts | TanStack Query 与 Suspense |
- 流式链路教材（仓库内）：
docs/learning/06-javascript-typescript-streaming.md - 由易到难的实战任务（仓库内）：
docs/learning/05-practice-tasks.md - 语言专项实战（已含 BodySense 入口）：React 学习路线 · JavaScript 学习路线 · TypeScript 学习路线 · BodySense MOC