学习 Web 开发
新前端开发者的必备技能
欢迎来到 MDN 学习 Web 开发(也称为 Learn)。本资源提供了一套结构化的教程,教授成功的前端开发者所需的必备技能和实践,并辅以练习和进一步推荐的资源。
关于学习 Web 开发
-
根据 MDN 课程大纲 中定义的,教授每位前端开发者在职业生涯成功和行业相关性方面所需的必备技能和知识。
-
由 MDN 社区创建,并结合了来自更广泛的 Web 社区的学生、教育者和开发者的见解进行改进。
-
旨在将您从“初学者”提升到“熟悉”(而不是从“初学者”提升到“专家”),为您提供足够多的知识以使用更高级的资源(例如 MDN 的其余部分)。
注意: 最后更新:2025 年 8 月(查看更新日志)。
不知道从何开始?
- 从未写过代码?
-
我们的 入门模块 为完全的初学者提供了设置教程以及基础概念和背景信息。如果您是完全的初学者(即您还没有安装代码编辑器或编写过任何代码),则应该从这里开始。
- 想掌握基础知识?
-
我们的 核心模块 提供了一套结构化的教程,教授成功的前端开发者所需的必备技能和实践。
- 超越基础?
-
随着您开始扩展知识和发展专业技能,我们的 扩展模块 涵盖了有用的附加技能。完成我们的核心模块后,请继续学习这些内容。
- 在学校工作?
-
使用我们的模块来指导您的教学,查看我们的 教育者页面 以获取更多想法,或者让您的学生报名参加 Scrimba 的 前端开发人员职业路径MDN 学习合作伙伴。
检验你的技能
在整个课程中,您会发现几篇文章旨在帮助您评估是否理解了我们正在教授的内容。有两种类型:
- “测试您的技能”文章更频繁地出现,测试您对单个孤立功能的知识,例如 HTML 链接、CSS 盒子模型或 JavaScript 函数。
- “挑战”文章出现频率较低,测试您将多个功能结合起来创建某种完整网站或程序的能力。
大多数问题都包含 HTML/CSS/JavaScript 代码块,显示每个任务的起始代码。推荐的完成方法是按下代码块中的“播放”按钮,在 MDN Playground 中打开示例,然后根据问题说明编辑代码。
如果犯了错误,可以使用 MDN Playground 中的重置按钮清除您的工作。如果您真的卡住了,通常可以在每个问题部分的底部查看解决方案,或者 寻求帮助。
有些问题不包含起始代码块,而是要求您下载入门文件在本地机器上进行处理。有时这是由于问题的复杂性,有时我们只是想稍微改变一下。
获取我们的代码示例
您将在学习区域遇到的代码示例都 可在 GitHub 上找到。
- 获取它们的最简单方法是 下载最新主代码分支的 ZIP 文件。
- 如果您熟悉 Git 和 GitHub,您也可以选择克隆此仓库。
联系我们
如果您想就任何事情与我们取得联系,请使用 沟通渠道。我们很乐意听取您关于网站上任何认为错误或缺失的内容、新学习主题的请求、关于您不理解的项目寻求帮助的请求,或任何其他问题或疑虑。
如果您有兴趣帮助开发/改进内容,请查看 如何提供帮助 并与我们联系!我们非常乐意与您交流,无论您是学习者、教师、经验丰富的 Web 开发人员,还是其他对帮助改善学习体验感兴趣的人。
另见
- 前端开发人员职业路径 MDN 学习合作伙伴
-
Scrimba 的前端开发人员职业路径通过有趣的互动课程和挑战、知识渊博的教师以及支持性的社区,教授您成为一名合格的前端 Web 开发人员所需的一切。从零开始,找到您的第一份前端工作!许多课程组成部分都提供独立的免费版本。
- Codecademy
-
一个很棒的互动网站,用于从头开始学习编程语言。
- freeCodeCamp.org
-
具有教程和项目的互动网站,用于学习 Web 开发。
- 学习 JavaScript
-
对于有抱负的 Web 开发人员来说,这是一个极好的资源——在交互式环境中学习 JavaScript,包括短课程和交互式测试,并通过自动化评估进行指导。前 40 节课是免费的,完整课程只需一次小额付款。