此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

学习 Web 开发

欢迎来到 MDN 学习 Web 开发区(也被大家称为学习区)。我们在此提供一组结构化的教程指南,帮助你掌握要成为一名成功的前端开发者所需要具备的核心技巧与实践方式,同时也为你提供了若干挑战与推荐的进阶资源。

关于学习 Web 开发

  • 向所有前端开发者提供核心技巧与知识,帮助他们取得职业成功与成为业界有价值的开发者,就如在 MDN 课程中所定义的那样。

  • 学习区内容由 MDN 社区创建,并不断经由学生、教师与更广阔 Web 社区提供的建议进一步优化。

  • 学习区旨在让你实现从“萌新”到“舒适”(而非“萌新”到“专家”)的蜕变,并帮助你学会如何利用更多进一步的资源(例如 MDN 的其他内容)。

备注:最后更新时间:2025 年八月(参见更新记录)。

试试我们伙伴的视频课程

感兴趣来听一下与我们文章互补的交互式的视频课程?Scrimba 的前端开发者生涯路径MDN 学习合作伙伴也提供在 MDN 课程中所教授的主题内容。

不知道从何开始?

从未进行过编程?

我们的入门模块为完全初学者提供了设置教程和基本概念及背景知识。如果你完全没有编程经验(比如还没安装代码编辑器或写过代码),建议从这里开始。

想要掌握核心内容?

我们的核心模块提供了一套结构化教程,帮助你掌握成为成功前端开发者所需的核心技能和实践。

想要更进一步?

我们的扩展模块涵盖了你在扩展知识和发展专长时需要学习的有用技能。完成核心模块后可以继续学习这些内容。

在学校工作?

你可以用我们的模块指导教学,访问教师页面获取更多想法。

测试你的技能

在整个课程中,你会遇到多篇旨在帮助你检验学习效果的文章。主要有两种类型:

  • “技能测试”文章出现频率较高,主要考查你对某个单一知识点(如 HTML 链接、CSS 盒模型或 JavaScript 函数)的掌握情况。
  • “挑战”出现频率较低,主要考查你能否将多个知识点结合起来,完成一个完整的网站或程序。

大多数问题都包含 HTML/CSS/JavaScript 代码块,展示每个任务的起始代码。推荐点击代码块中的 “Play” 按钮,在 MDN Playground 中打开示例,然后根据题目要求编辑代码完成任务。

如果出错,可以使用 Playground 的重置按钮清除你的操作。如果实在卡住了,通常可以在每道题的底部查看参考答案,或联系我们

备注:如果你更喜欢在自己的编辑器或在线编辑器(如 CodePenJSFiddle)中操作,你也可以将 Playground 的代码复制到你选择的环境中。

有些问题没有提供起始代码块,而是让你下载起始文件并在本地操作完成。这通常是因为问题较为复杂,或者我们希望你换种方式练习。

获取我们的代码示例

你在学习区遇到的所有代码示例都托管在 GitHub 上

联系我们

如果你有任何想法或问题,欢迎通过交流渠道联系我们。无论是发现了网站内容的问题或遗漏、希望新增学习主题、遇到不理解的内容需要帮助,还是其他任何建议或疑问,我们都很乐意听取。

如果你有兴趣参与内容开发或改进,请查看如何参与并联系我们!无论你是学习者、教师、经验丰富的开发者,还是其他希望提升学习体验的人,我们都非常欢迎。

参见

前端开发者职业路径 MDN 学习合作伙伴

Scrimba前端开发者职业路径提供了成为合格前端开发者所需的全部知识,包含有趣的互动课程和挑战、专业的讲师和支持社区。从零基础到找到第一份前端工作!课程中许多内容可免费单独学习。

Codecademy

一个非常适合零基础学习编程语言的互动网站。

freeCodeCamp.org

提供互动教程和项目,帮助你学习 Web 开发。

Learn JavaScript

非常适合初学者的 JavaScript 学习资源——在互动环境中学习 JavaScript,课程短小精悍,配有自动评测。前 40 课免费,也只需要一次小支出即可购入完整课程。