学习 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 框架。你也应该考虑学习服务器端网站编程的基础知识。
涵盖的主题
下面列表包含 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 底层使用的版本控制系统。
-
要将学习区仓库复制到名为 learning-area 的目录(learning-area 目录将位于命令提示符/终端指向的当前目录中),使用下面的命令:
bashgit clone https://github.com/mdn/learning-area
-
现在,你能通过访达/文件资源管理器或
cd
命令进入目录并寻找你想要的文件。
你可以将 GitHub 上的主版本的任意改动更新到本地 learning-area
仓库,步骤如下:
-
在命令提示符/终端中使用
cd
命令进入learning-area
目录。例如,假设你在learning-area
目录的父目录中:bashcd learning-area
-
使用下列命令更新仓库:
bashgit pull
联系我们
参见
- 前端开发者职业道路 MDN 课程合作伙伴
-
Scrimba 的前端开发者职业道路教授成为合格的前端 Web 开发者所需的知识,这里有有趣的交互式课程和挑战、有学识的老师以及提供帮助的社区。让你从零到获得第一份前端工作!许多课程有单独的免费版本。
- 学习 JavaScript
-
为有进取心的 Web 开发人员准备的优秀资源——在交互式环境中通过自动评估引导的短课程和交互式测试学习 JavaScript。前 40 节课为免费课程,而完整的课程仅需一次性支付少量费用。
- Codecademy
-
优秀的交互式网站——从零学习编程语言。
- freeCodeCamp.org
-
通过教程和项目学习 Web 开发的交互式网站。
- The Odin Project
-
特点是拥有免费和开源的全栈教学课程,课程涵盖初级到高级。
- MDN 博客
-
MDN 团队和客座作者为 MDN 博客编写的与新的站点开发、HTML、CSS、JavaScript 以及其它 Web 开发新闻相关的文章。
- Mozilla 开发者时事通讯
-
面向 Web 开发者的时事通讯,对各水平开发者而言都是优秀的资源。