MDN 学习区上手：三阶段模块、评估作业与八到十周计划

MDN 学习区（Learn web development）是 Mozilla 维护的一套前端教程。它按模块组织，从装编辑器一直讲到能独立做出静态页面。全篇分入门、核心、扩展三段，共 21 个模块，每段配技能测试与挑战。这篇不重复讲路径长什么样，只解决一个问题：拿到这套材料之后，按什么顺序做、每周交什么、评估作业怎么过。

学习区是什么，三个阶段的分工

它和查文档是两件事。参考文档回答“这个属性怎么写”，学习区回答“先学什么、学到什么算过关”。官方把目标写得很克制：从入门带到能用，而不是带到熟练。

三段各有分工。入门段解决环境能不能跑起来，核心段解决能不能独立做出页面，扩展段解决往哪个方向深入。入门段没有先修要求，官方也说明它不是进核心前的硬门槛，但零基础的人先过一遍会省事。

内容由社区编写，主线与 MDN 的课程框架对齐。模块清单可以在 核心模块总览页 里逐项看到。代码示例不放在页面里让你复制。它们集中托管在 GitHub 的 mdn/learning-area 仓库，可以整包下载或克隆。

模块清单：4 + 9 + 8 是怎么排的

先把全貌摊开，再谈顺序。三段加起来 21 个模块，名称与官方页面一致。

核心段的顺序不是随手排的：先内容结构，再样式，再脚本。框架模块排在第 6 位，意思是语言基础够了再碰框架，而不是反过来。版本控制放在末尾，但它其实可以提前插进来，越早用 Git 管练习越划算。

扩展段八个模块互相独立，不必全学。想补交互就读表单与异步，想补工程习惯就读客户端开发工具与测试，想走后端就读服务端编程。

HTML、CSS、JavaScript 的推进顺序与三个卡点

核心段前五个模块是主干，顺序从 HTML 排到 JavaScript。先是 HTML 构建内容，再是 CSS 基础、CSS 文本与 CSS 布局，最后才轮到 JavaScript 动态脚本。前四个都属于“看得见结果”的阶段，容易建立反馈；JavaScript 一上来概念密度陡增，是整个路径里掉队率偏高的一段。

三个卡点值得提前知道。CSS 布局里的浮动与定位会让人怀疑人生，但这部分正是后面弹性布局与网格的铺垫。JavaScript 的 DOM 操作要等前面语法打完底，跳着看会来回返工。无障碍模块看着像附加题，实际是把前面写的语义 HTML 串起来复盘。

“为开发者而设的设计”和“版本控制”容易被跳过。前者影响作品集观感，后者决定你能不能回退和协作。时间紧的话，至少把前五个模块加版本控制走完，设计与框架按目标补。

评估作业怎么做：从 Play 按钮到参考答案

评估分两类。“技能测试”出现频率高，只考一个知识点，比如链接、盒模型、函数。“挑战”出现得少，要求把多个知识点拼成一个完整页面或程序。

大多题目的题干下面带起始代码块。点代码块里的 Play 按钮会在 MDN Playground 打开可运行版本，按要求改完直接看结果。改坏了用 Playground 的重置按钮清掉重来，不必刷新整页。

少数题目不给起始代码，而是让你下载起始文件在本地做。这类题通常更接近真实项目，文件就在 learning-area 仓库对应的目录里。习惯本地编辑器的话，也可以把 Playground 的代码复制到 VS Code 或 CodePen 继续写。

卡住时先别急着看答案。每道题底部一般附参考答案，但直接抄会让下一个模块的测试继续挂。可行的做法是先把错误信息抄进笔记，写明试过什么，再对照答案找差在哪一步。

评估结果不需要提交给谁。没有账号、没有评分、没有证书，判断标准只有一条：不看答案能不能独立做出来。这条自评标准比任何打卡都硬。

一份八到十周的节奏表

按每周 8 到 10 小时估算，下面这张表可以当成执行清单。每周的产出物是硬指标，做不出来就停在原地补，别往后赶。

表里没有排扩展段，因为八到十周只够打通主干。扩展段建议在第十周之后按方向单点补，一次挑一个模块，配一个小项目收尾。

中文版的落差与四条局限

中文页是有的，入口就是 zh-CN 学习区首页，但翻译覆盖不均匀。核心模块总览页里，“为开发者而设的设计”这一项的说明是中文，链接却直接指向英文页，说明该模块正文还没有中文版。首页的“更新记录”链接点进去是未撰写的空页，英文页则能跳到真正的 Changelog。

两边的更新时间未必同步。中英文学习区首页目前都标注最后更新为 2025 年 8 月，但越往模块内部走，中文滞后越明显。实用办法是概念用中文建立框架，术语、兼容性、新语法切回英文核对。

• 没有证书，也没有内置进度记录。学没学完只能靠自己的产出物判断，官方不提供任何凭证。
• 不覆盖完整的工程化工具链。扩展段只有一个客户端开发工具模块，讲工具类型与一条示例链路，不涉及框架脚手架、持续集成与部署流水线。
• 服务端只到入门。Django 与 Express 各给一条初级路径，够理解请求响应，不够做生产服务。
• 框架模块只讲“框架解决什么问题”，选型与生态要靠别的材料补。

适合的人：零基础、想系统补一遍前端基础、能自己安排进度的自学者。不太适合已经能独立做项目、只想查 API 的人，以及需要有人盯进度或要一张证书的人。想先看清技能地图再决定顺序，可以配合站内的 roadmap.sh 路线图 一起用。

补工具层还有一个便宜的办法。把 Missing Semester 的 Shell 与 Git 两讲插在第 1 周，后面所有练习都会顺一点。想要更强的项目驱动与社区氛围，可以对照 The Odin Project 的 Foundations 阶段，两者交替用不冲突。

需要注册或付费吗

不需要。学习区内容免费公开，不登录也能读完全部模块和做 Playground 练习。

可以直接从 JavaScript 开始吗

不建议。DOM 与事件建立在页面结构之上，跳过 HTML 与 CSS 会在调试样式问题时反复卡住，返工成本高于省下的时间。

中文页够用吗

建立概念够用，深入不够。遇到链接跳转到英文页、术语译法不一致时，以英文原文为准，代码里的标签与 API 名保持英文。

相关地址

以下为文中提到的官方入口，模块清单、练习与代码示例以这些页面为准。

• MDN 学习区（中文）：https://developer.mozilla.org/zh-CN/docs/Learn_web_development
• MDN 学习区（英文）：https://developer.mozilla.org/en-US/docs/Learn_web_development
• MDN 核心模块（Core learning）：https://developer.mozilla.org/en-US/docs/Learn_web_development/Core
• MDN 扩展模块（Extensions）：https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions
• MDN Playground（在线练习沙盒）：https://developer.mozilla.org/zh-CN/play
• learning-area（代码示例仓库）：https://github.com/mdn/learning-area
• mdn/content（文档源仓库）：https://github.com/mdn/content