课程介绍

本课程适合谁？

本课程专为有抱负的首次 Web 开发人员和希望构建高性能网站的现有开发人员设计。在本课程以及后续课程中，你将：

• 了解 AMP 页面与传统“原生”网站的不同之处。

• 使用真实的 AMP 组件和最佳实践逐步构建示例项目。

• 学习构建现代网站的策略。

先决条件

要充分利用这些课程，你应该对 HTML 和 CSS 有基本的了解。 能够识别 HTML 和 CSS 代码，并能够按照练习中的指示进行少量添加和修改就足够了。 请注意，本课程不讲授这些概念。 如果需要，你可以在 此处 找到 HTML 复习资料，在 此处 找到 CSS 复习资料。

使用 Glitch 编写代码

为了完成这些课程中包含的代码示例，我们将使用 Glitch。 Glitch 是一款在线代码编辑器，让你无需在计算机上安装任何东西即可创建和查看网站。 它还允许你在 Glitch 界面中创建服务器。

Glitch 代码编辑器环境如下所示

上面的红色框表示你将键入 HTML 和 CSS 的在线编辑器。 绿色框表示将你带到你正在创建的页面的实时版本的按钮。 黄色框是让你创建此项目副本并进行编辑的按钮。 蓝色框表示你可用的文件。 在 assets 文件夹中，你可以找到你的图片。

在这些课程中，你需要各种图像来完成练习。 完成这些课程所需的所有图像都包含在我们的 Glitch 项目中。 要查看项目中的图像，请单击 Glitch 编辑器左侧文件列表中的 assets 条目。 要获取任何单个图像的链接，请从右侧的资产列表中选择该图像。 单击出现的弹出窗口中 URL 旁边的“复制”按钮。 然后，你可以在需要图像的任何地方使用该链接。

在本课程中，我们将从基本的 HTML 页面开始。 我们已经在 Glitch 上创建了一个包含一些图像、稍后你将需要的服务器代码以及带有标题和单个图像的 index.html 文件的空项目。

打开 此项目 开始。 单击右上角的“Remix This”按钮以创建你可以编辑的新项目。 你可以继续将此编辑器用于此课程和未来的课程。 每个未来的课程还将使你有机会从该点解决方案的参考版本开始。

你不必使用 Glitch 来完成这些培训。 但是，完成练习所需的一些代码仅包含在 Glitch 示例中。 如果你想使用其他编辑器，你可能仍然需要使用 Glitch 示例来查找此代码。

设置 AMP 验证器

为了检测 AMP 页面中的错误，我们有一个非常有用的工具：AMP 验证器。 编写有效的 AMP 页面是访问框架全部优势的关键。 可以通过两种方式访问 AMP 验证器：通过 Chrome 扩展程序，或者通过向我们的 URL 添加参数，以便我们的 AMP 页面使用内置验证器。 对于本课程，我们建议你使用 Chrome 扩展程序，因为它在构建站点时更易于使用和访问。

• 要安装 Chrome 扩展程序，请访问 此处 的链接。

• 要改为使用内置 AMP 验证器，请在 AMP 页面 URL 的末尾添加 #development=1，然后在浏览器中打开开发者控制台以查看结果。 如果你使用的是 Chrome 扩展程序，则无需添加此参数。

我们将构建什么

在我们三个课程中，你将为 Chico's Cheese Bicycles Shop 构建一个网站。 Chico’s 开发了一种完全由奶酪制成的革命性自行车。 对新自行车的需求如此之高，以至于 Chico’s 需要尽快启动一个网站。 当我们完成这些课程时，Chico’s 的网站将如下所示

你可以单击 此链接 以查看实时预览。 四处看看该网站。 我们有视频、注册表单、图像轮播以及在社交媒体上分享我们网站的方式。 单击左上角由三行组成的图标（也称为“汉堡菜单图标”）打开导航菜单。 菜单展开后，单击链接“我们的产品”以导航到产品列表。 尝试按价格对产品列表进行排序，并按产品类别过滤产品列表。

我们选择 Chico’s 的网站作为我们的模型，因为它提供了我们今天在热门网站上常见的各种功能。 它完全使用 AMP 构建。 在这些课程中，你将从头开始构建此网站。