前端网络开发者

¥Subjects covered

涵盖的主题有：

¥The subjects covered are:

• 基本设置和学习方法
• Web 标准和最佳实践（例如可访问性和跨浏览器兼容性）
• HTML，赋予网页内容结构和含义的语言
• CSS，用于设计网页样式的语言
• JavaScript，用于在网络上创建动态功能的脚本语言
• 用于促进现代客户端 Web 开发的工具。

你可以按顺序浏览各个部分，但每个部分也是独立的。例如，如果你已经了解 HTML，则可以跳到 CSS 部分。

¥You can work through sections in order, but each one is also self-contained. For example, if you already know HTML, you can skip ahead to the CSS section.

¥Prerequisites

你不需要任何基础知识即可开始本课程。你所需要的只是一台可以运行现代网络浏览器的计算机、互联网连接和学习意愿。

¥You don't need any previous knowledge to start this course. All you need is a computer that can run modern web browsers, an internet connection, and a willingness to learn.

如果你不确定前端 Web 开发是否适合你，和/或你希望在开始更长、更完整的课程之前有一个简单的介绍，请先学习我们的 开始使用网络 模块。

¥If you are not sure if front-end web development is for you, and/or you want a gentle introduction before starting a longer and more complete course, work through our Getting started with the web module first.

¥Getting help

我们试图让学习前端 Web 开发尽可能舒适，但你可能仍然会因为不理解某些内容或某些代码无法工作而陷入困境。

¥We have tried to make learning front-end web development as comfortable as possible, but you will probably still get stuck because you don't understand something, or some code is just not working.

不要恐慌。无论我们是初学者还是专业的网络开发者，我们都会陷入困境。学习和获得帮助 文章为你提供了一系列查找信息和自助的技巧。如果你仍然遇到困难，请随时在我们的 话语论坛 上发布问题。

¥Don't panic. We all get stuck, whether we are beginner or professional web developers. The Learning and getting help article provides you with a series of tips for looking up information and helping yourself. If you are still stuck, feel free to post a question on our Discourse forums.

让我们开始吧。祝你好运！

¥Let's get started. Good luck!

¥The learning pathway

¥Getting started

完成时间：1.5–2 小时

¥Time to complete: 1.5–2 hours

先决条件

¥Prerequisites

除了基本的计算机知识之外什么都没有。

¥Nothing except basic computer literacy.

我如何知道我已准备好继续前进？

¥How will I know I'm ready to move on?

这部分课程没有评估。但请确保不要跳过。让你做好准备并准备好在课程稍后进行练习非常重要。

¥There are no assessments in this part of the course. But make sure you don't skip. It is important to get you set up and ready to do work for exercises later on in the course.

指南

¥Guides

• 安装基本软件 — 基本工具设置（15 分钟阅读）
• Web 和 Web 标准的背景（阅读 45 分钟）
• 学习和获得帮助（阅读 45 分钟）

¥Semantics and structure with HTML

完成时间：35–50 小时

¥Time to complete: 35–50 hours

先决条件

¥Prerequisites

基本的 Web 开发环境。

¥A basic web development environment.

我如何知道我已准备好继续前进？

¥How will I know I'm ready to move on?

每个模块中的评估旨在测试你对该主题的了解。完成评估可确认你已准备好进入下一个模块。

¥The assessments in each module are designed to test your knowledge of the subject matter. Completing the assessments confirms that you are ready to move on to the next module.

模块

¥Modules

• HTML 简介（15-20 小时阅读/练习）
• 多媒体和嵌入（15-20 小时阅读/练习）
• HTML 表格（5-10 小时阅读/练习）

¥Styling and layout with CSS

完成时间：90–120 小时

¥Time to complete: 90–120 hours

先决条件

¥Prerequisites

建议你在开始学习 CSS 之前具备基本的 HTML 知识。你至少应该先学习 HTML 简介。

¥It is recommended that you have basic HTML knowledge before starting to learn CSS. You should at least study Introduction to HTML first.

我如何知道我已准备好继续前进？

¥How will I know I'm ready to move on?

每个模块中的评估旨在测试你对该主题的了解。完成评估可确认你已准备好进入下一个模块。

¥The assessments in each module are designed to test your knowledge of the subject matter. Completing the assessments confirms that you are ready to move on to the next module.

模块

¥Modules

• CSS 第一步（10-15 小时阅读/练习）
• CSS 构建块（35–45 小时阅读/练习）
• CSS 样式文本（15-20 小时阅读/练习）
• CSS 布局（30-40 小时阅读/练习）

其他资源

¥Additional resources

• CSS 布局秘诀

¥Interactivity with JavaScript

完成时间：135–185 小时

¥Time to complete: 135–185 hours

先决条件

¥Prerequisites

建议你在开始学习 JavaScript 之前具备基本的 HTML 知识。你至少应该先学习 HTML 简介。

¥It is recommended that you have basic HTML knowledge before starting to learn JavaScript. You should at least study Introduction to HTML first.

我如何知道我已准备好继续前进？

¥How will I know I'm ready to move on?

每个模块中的评估旨在测试你对该主题的了解。完成评估可确认你已准备好进入下一个模块。

¥The assessments in each module are designed to test your knowledge of the subject matter. Completing the assessments confirms that you are ready to move on to the next module.

模块

¥Modules

• JavaScript 第一步（30-40 小时阅读/练习）
• JavaScript 构建块（25–35 小时阅读/练习）
• JavaScript 对象介绍（25–35 小时阅读/练习）
• 客户端 Web API（30-40 小时阅读/练习）
• 异步 JavaScript（25–35 小时阅读/练习）

¥Web forms — Working with user data

完成时间：40–50 小时

¥Time to complete: 40–50 hours

先决条件

¥Prerequisites

表单需要 HTML、CSS 和 JavaScript 知识。鉴于使用表单的复杂性，这是一个专门的主题。

¥Forms require HTML, CSS, and JavaScript knowledge. Given the complexity of working with forms, it is a dedicated topic.

我如何知道我已准备好继续前进？

¥How will I know I'm ready to move on?

每个模块中的评估旨在测试你对该主题的了解。完成评估可确认你已准备好进入下一个模块。

¥The assessments in each module are designed to test your knowledge of the subject matter. Completing the assessments confirms that you are ready to move on to the next module.

模块

¥Modules

• 网页表格（40–50 小时）

¥Making the web work for everyone

完成时间：45–55 小时

¥Time to complete: 45–55 hours

先决条件

¥Prerequisites

在学习本节之前，最好了解 HTML、CSS 和 JavaScript。许多技术和最佳实践涉及多种技术。

¥It is good to know HTML, CSS, and JavaScript before working through this section. Many of the techniques and best practices touch on multiple technologies.

我如何知道我已准备好继续前进？

¥How will I know I'm ready to move on?

每个模块中的评估旨在测试你对该主题的了解。完成评估可确认你已准备好进入下一个模块。

¥The assessments in each module are designed to test your knowledge of the subject matter. Completing the assessments confirms that you are ready to move on to the next module.

模块

¥Modules

• 跨浏览器测试（25-30 小时阅读/练习）
• 无障碍（20-25 小时阅读/练习）

¥Modern tooling

完成时间：55–90 小时

¥Time to complete: 55–90 hours

先决条件

¥Prerequisites

在学习本节之前，最好了解 HTML、CSS 和 JavaScript，因为讨论的工具与许多这些技术一起工作。

¥It is good to know HTML, CSS, and JavaScript before working through this section, as the tools discussed work alongside many of these technologies.

我如何知道我已准备好继续前进？

¥How will I know I'm ready to move on?

这套模块中没有具体的评估文章。第二和第三模块末尾的案例研究教程为你掌握现代工具的基础知识做好准备。

¥There are no specific assessment articles in this set of modules. The case study tutorials at the end of the second and third modules prepare you for grasping the essentials of modern tooling.

模块

¥Modules

• Git 和 GitHub（阅读 5 小时）
• 了解客户端 Web 开发工具（阅读 20-25 小时）
• 了解客户端 JavaScript 框架（30-60 小时阅读/练习）