0从零到大神
一条不抄近路、只吃透「最底层的原理 + 最新星的技术」的前端自学路线: 从 HTML/CSS 地基起步,经 JavaScript → TypeScript → 工程化, 一路到 Node.js · Bun · Deno 运行时,再用 React / Vue + Tailwind 把界面做高级。 每一阶段都配 中英对照的权威参考(GitHub 星标、W3C、MDN、菜鸟教程)与你可以直接跟练的 解读视频。
学习顺序建议自上而下:先把脚本和类型地基夯实,再谈工程化与运行时; 框架永远是工具,底层的“为什么”比表面 API 更重要。绿色标签是新星技术(近年热门), 主标签是底层原理(长期有效)。
地基 · HTML + CSS
已落地 4 章所有前端的地基:语义化结构让内容被机器读得懂, CSS 布局与动画让页面真正“好看且灵动”。先把标签语义、盒模型、Flex/Grid 定位吃透,后面所有框架的生动界面都建立在这之上。
脚本 · JavaScript
本阶段待落地
唯一的浏览器原生脚本语言。别急着背 API,先搞懂
单线程与事件循环(为什么“异步”)→ Promise / async(怎么编排异步)→
作用域链与闭包(变量去哪了)→ ES 模块化(代码怎么组织)。这几条吃透,读写前端代码才真正“明明白白”。
类型 · TypeScript
本阶段待落地给 JavaScript 补上静态类型。现代大厂与开源几乎全程 TS: 类型标注 → 接口与泛型 → 类型收窄。它的价值是在你“写错”之前就拦住,是进阶到工程规模代码的分水岭。
工程化 · 构建与包管理
本阶段待落地单文件跑不通真实项目。学会包管理器(npm / pnpm / yarn)、 构建工具(Vite / esbuild)与模块化(ESM / CJS)。 先分清“开发时工具”和“运行时能力”,你就不会被版本管理器困住。
运行时 · Node.js / Bun / Deno
本阶段待落地让 JavaScript 走出浏览器、接管后端。Node.js 生态最成熟,先吃透事件循环与 npm; 再看新星运行时——Bun(全能更快,自带打包器与测试器)与 Deno(原生 TS、默认安全沙箱)。会用一种、能讲清三者的取舍差异,才算真的理解运行时。
框架 · React / Vue + Tailwind
本阶段待落地把地基能力收拢成大规模应用。学响应式 UI 框架(React 生态成熟、Vue 上手丝滑), 搭配 utility-first 样式体系 Tailwind 快速产出高级一致的界面。 记住:框架是脚手架的体现——把你之前学的 DOM、状态、构建全部用起来。
【视频标题............】
这里是视频介绍.........................
常备知识库与 GitHub 星标路线
别背网址,记住“用哪个层面去哪个站”:查解释读细节看 MDN;核对标准看 W3C; 快速中文入门看菜鸟;看开源生态与趋势逛 GitHub 话题。