学习 Web 开发

欢迎来到 MDN 学习区。本系列文章意在为 Web 开发的纯新手提供编写网站的基本技巧，而非意在让你从“新手”变成“专家”，但能让你从“新手”变得“熟练”。从那之后，你就能开始以你自己的方式学习 MDN 的其余部分，和其他需要大量前置知识的中高级资源。

从零开始学习 Web 开发极具挑战性，该教程将为你提供详细的资料，手把手帮助你轻松愉快地学习。无论你是正在学习 Web 开发的学生（自学或参与课程）、寻找材料的老师、编程爱好者，抑或是仅想进一步了解 Web 技术的工作原理，我们都希望你能感到宾至如归。

学习起点

你要是还不确定是否要深入地学习 Web 开发，仅想从体验环节开始，我们会建议你从 Web 入门指南开始学习。除此之外，你应该从下面的主题开始学习。

HTML 和 CSS: HTML 为 Web 内容提供结构，而 CSS 为 Web 内容添加样式并对 Web 内容进行布局。在 HTML 简介和 CSS 第一步中学习基本的入门知识。
JavaScript: JavaScript 为网站提供交互功能。从 JavaScript 第一步开始学习。
框架和工具: 掌握原生 HTML、CSS 和 JavaScript 的基本知识之后，你应该学习客户端 Web 开发工具，接着考虑钻研客户端 JavaScript 框架。你也应该考虑学习服务器端网站编程的基础知识。

备注： 在术语表中能找到术语定义。此外，要是有和 Web 开发相关的特定问题，常见问题中的内容也许会帮助到你。

想成为一名前端 Web 开发者吗？

你要是想成为一名前端 Web 开发者，但不确定该从哪开始学习，我们会建议使用 MDN 课程作为你的学习计划。它提供一个结构化的学习路径，包含：成为一名成功的前端开发者所需的基本技巧和练习，以及推荐学习资源。

现在开始

涵盖的主题

下面列表包含 MDN 学习区全部的主题。

Web 入门: 为纯新手提供实用的 Web 开发介绍。
HTML——为 Web 提供结构: HTML 是用于构建内容的不同部分并定义其含义或目的的语言。该主题将详细讲解 HTML。
CSS——为 Web 提供样式: CSS 是用于为 Web 内容添加样式、对 Web 内容进行布局、添加诸如动画的行为的语言。该主题对 CSS 做了全面的覆盖。
JavaScript——动态客户端脚本语言: JavaScript 是用于为 Web 页面添加动态功能的脚本语言。该主题涵盖有关编写和理解 JavaScript 代码所需的全部重点。
Web 表单——操作用户数据: Web 表单是用于和用户交互的强大工具——其常用于收集用户数据和控制用户界面。该主题涵盖 Web 表单的结构、样式和交互相关的全部要点。
无障碍——让每个人都能使用 Web: 无障碍是让更多的人不受残疾、设备、地区等因素的限制都能访问 Web 内容的实践。该主题包含一切所需了解的信息。
Web 性能优化——让网站更快做出响应: Web 性能是确保 Web 应用的快速下载并对用户操作进行快速响应的艺术，而无论用户的带宽大小、屏幕尺寸、网络状态好坏或是设备性能高低。
MathML: MathML 是用于在 Web 页面中书写数学公式的语言（使用分数、上下标、根号、矩阵、积分、级数，等等）。该主题讲解 MathML。
工具和测试: 该主题涵盖的是开发者用于提升效率的工具，如跨浏览器测试工具、代码检查工具、代码格式化工具、转换工具、版本控制系统、部署工具、客户端 JavaScript 框架等。
服务器端网站编程: 尽管你专注于客户端 Web 开发，但了解服务器和服务器端代码的运行机制仍是有用的。该主题对服务器端的运作机制进行了通用介绍，以及包含使用 Django（Python）和 Express（node.js）两个流行框架构建服务器端应用的详细教程。

任务和评估

在 MDN 的学习 Web 开发部分，有许多独立的任务和评估，等待你完成。有两种主要类型：

“技能测试”任务，例如，在代码中做决定——条件语句。
在某些模块的结尾处，包含更深入的评估，例如，图片库。

每个类型都有相应的评分指南和推荐解决方案，可用于帮助你评估你的工作。某些模式能让你更容易地找到这些资源，例如：

上面的技能测试任务示例的评分指南和资源位于 https://github.com/mdn/learning-area/tree/main/javascript/building-blocks/tasks/conditionals。
上面的评估示例的评分指南和资源位于 https://github.com/mdn/learning-area/tree/main/javascript/building-blocks/gallery。

备注： 任务和评估中的评分指南及其它资源大多数位于 mdn/learning-area，还有一些位于 mdn/css-examples。

获取代码示例

学习区的所有代码示例都可以在 Github 上找到。如果你想将代码示例都复制到你的电脑，最简单的方式就是下载包含最新 main 分支内容的压缩文件。

如果你更喜欢以一种更灵活的方式（允许自动更新）复制仓库，你可以参考下面复杂一点的指导：

在电脑上安装 Git。它是 Github 底层使用的版本控制系统。
打开电脑的命令提示符（Windows）或终端（Linux、macOS）。
要将学习区仓库复制到名为 learning-area 的目录（learning-area 目录将位于命令提示符/终端指向的当前目录中），使用下面的命令：
bash
```
git clone https://github.com/mdn/learning-area
```
现在，你能通过访达/文件资源管理器或 cd 命令进入目录并寻找你想要的文件。

你可以将 GitHub 上的主版本的任意改动更新到本地 learning-area 仓库，步骤如下：

在命令提示符/终端中使用 cd 命令进入 learning-area 目录。例如，假设你在 learning-area 目录的父目录中：
bash
```
cd learning-area
```
使用下列命令更新仓库：
bash
```
git pull
```

联系我们

如果你因事想与我们取得联系，请使用沟通渠道。如果你认为网站上有任何错误或遗漏、想请求新的学习主题、针对不理解的部分想请求帮助，或想提出任何其他问题，我们愿意倾听你的声音。

如果你对帮助开发或改进内容感兴趣，请阅读如何做出贡献并联系我们！无论你是学习者、老师，还是有经验的 Web 开发者，抑或是其他对帮助改善学习体验感兴趣的人，我们都不胜荣幸！

参见

前端开发者职业道路 ^{MDN 课程合作伙伴}: Scrimba 的前端开发者职业道路教授成为合格的前端 Web 开发者所需的知识，这里有有趣的交互式课程和挑战、有学识的老师以及提供帮助的社区。让你从零到获得第一份前端工作！许多课程有单独的免费版本。
学习 JavaScript: 为有进取心的 Web 开发人员准备的优秀资源——在交互式环境中通过自动评估引导的短课程和交互式测试学习 JavaScript。前 40 节课为免费课程，而完整的课程仅需一次性支付少量费用。
Codecademy: 优秀的交互式网站——从零学习编程语言。
freeCodeCamp.org: 通过教程和项目学习 Web 开发的交互式网站。
The Odin Project: 特点是拥有免费和开源的全栈教学课程，课程涵盖初级到高级。
MDN 博客: MDN 团队和客座作者为 MDN 博客编写的与新的站点开发、HTML、CSS、JavaScript 以及其它 Web 开发新闻相关的文章。
Mozilla 开发者时事通讯: 面向 Web 开发者的时事通讯，对各水平开发者而言都是优秀的资源。