学习 Web 开发
欢迎来到 MDN 学习 Web 开发区(也被大家称为学习区)。我们在此提供一组结构化的教程指南,帮助你掌握要成为一名成功的前端开发者所需要具备的核心技巧与实践方式,同时也为你提供了若干挑战与推荐的进阶资源。
关于学习 Web 开发
-
向所有前端开发者提供核心技巧与知识,帮助他们取得职业成功与成为业界有价值的开发者,就如在 MDN 课程中所定义的那样。
-
学习区内容由 MDN 社区创建,并不断经由学生、教师与更广阔 Web 社区提供的建议进一步优化。
-
学习区旨在让你实现从“萌新”到“舒适”(而非“萌新”到“专家”)的蜕变,并帮助你学会如何利用更多进一步的资源(例如 MDN 的其他内容)。
备注:最后更新时间:2025 年八月(参见更新记录)。
不知道从何开始?
测试你的技能
在整个课程中,你会遇到多篇旨在帮助你检验学习效果的文章。主要有两种类型:
- “技能测试”文章出现频率较高,主要考查你对某个单一知识点(如 HTML 链接、CSS 盒模型或 JavaScript 函数)的掌握情况。
- “挑战”出现频率较低,主要考查你能否将多个知识点结合起来,完成一个完整的网站或程序。
大多数问题都包含 HTML/CSS/JavaScript 代码块,展示每个任务的起始代码。推荐点击代码块中的 “Play” 按钮,在 MDN Playground 中打开示例,然后根据题目要求编辑代码完成任务。
如果出错,可以使用 Playground 的重置按钮清除你的操作。如果实在卡住了,通常可以在每道题的底部查看参考答案,或联系我们。
有些问题没有提供起始代码块,而是让你下载起始文件并在本地操作完成。这通常是因为问题较为复杂,或者我们希望你换种方式练习。
获取我们的代码示例
你在学习区遇到的所有代码示例都托管在 GitHub 上:
- 最简单的方式是下载最新主分支的 ZIP 压缩包。
- 如果你熟悉 Git 和 GitHub,也可以选择克隆仓库。
联系我们
如果你有任何想法或问题,欢迎通过交流渠道联系我们。无论是发现了网站内容的问题或遗漏、希望新增学习主题、遇到不理解的内容需要帮助,还是其他任何建议或疑问,我们都很乐意听取。
如果你有兴趣参与内容开发或改进,请查看如何参与并联系我们!无论你是学习者、教师、经验丰富的开发者,还是其他希望提升学习体验的人,我们都非常欢迎。
参见
- 前端开发者职业路径 MDN 学习合作伙伴
-
Scrimba 的前端开发者职业路径提供了成为合格前端开发者所需的全部知识,包含有趣的互动课程和挑战、专业的讲师和支持社区。从零基础到找到第一份前端工作!课程中许多内容可免费单独学习。
- Codecademy
-
一个非常适合零基础学习编程语言的互动网站。
- freeCodeCamp.org
-
提供互动教程和项目,帮助你学习 Web 开发。
- Learn JavaScript
-
非常适合初学者的 JavaScript 学习资源——在互动环境中学习 JavaScript,课程短小精悍,配有自动评测。前 40 课免费,也只需要一次小支出即可购入完整课程。