学习如何制作网站：搭建编码环境

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

您是否计划在2020年学习Web开发？让我来帮您快速入门，为您搭建一个现代化的前端编码环境，让您做好使用HTML和CSS进行编码的准备。

这篇文章是“跟Steph一起学习如何制作网站”系列文章的第一篇。每篇文章都会配有一个视频教程，文章内容是对视频中涵盖主题的扩展。

您可以跟随视频观看，也可以继续阅读视频文字稿的详细内容。

在本视频和文章中，您将学习如何设置环境，开始编写 HTML 和 CSS 代码。我们将涵盖以下内容：

观看本课程时，请注意以下几点，这些可能与您在电脑上的体验有所不同。我将使用苹果 MacBook 笔记本电脑上的 Chrome 浏览器。本系列课程也适用于 Windows 用户，但是，在讨论如何在浏览器中查看代码时，您需要使用 Chrome 或 Firefox 浏览器才能获得类似的体验。

首先，您需要访问包含快速入门所需文件的 GitHub 页面：https://github.com/5t3ph/howtowebdev-starter

本页面称为资源库，其中包含开始学习本课程所需的所有文件。选择绿色的“克隆或下载”按钮，然后选择“下载 zip 文件”。

下载完成后，您将拥有开始学习本课程所需的所有文件。

下载完成后，您需要下载 VSCode：https://code.visualstudio.com/download

最后，您需要下载 Node：https://nodejs.org/en/download/

请花点时间完成 VSCode 和 Node 的安装，然后从 GitHub 解压项目启动包。务必将其保存到您希望项目文件存放的计算机上的位置。

安装完成后，打开 VSCode。然后，选择“打开文件夹”，并选择您从 GitHub 下载的项目启动器的父目录。您将在左侧窗格中看到项目文件。现在您可以关闭“欢迎”选项卡了。

要继续操作，您需要打开终端。最快捷的方法是点击 VSCode 窗口底部最左侧的图标，然后在打开的面板中，您可能需要点击三个点的图标，然后选择“终端”。

现在，和大多数像这样的打包项目一样，这个入门包里也包含一个 README 文件。该文件中包含了如何使用该软件包的信息，并在文件末尾提供了运行此项目的命令。这些命令会用到我们之前安装的 Node.js。

第一个命令是npm install……。您只需运行一次此命令，它将安装所谓的依赖项，这些依赖项将允许您构建一个现代网站。

完成后，README 文件中定义的下一个命令是npm start……。这将启动一些进程，最终使您的第一个网站可以在浏览器中查看！现在您可以继续学习本课程了。

🎉 恭喜！您已创建了您的第一个网页。

在下一篇文章和视频中，您将学习什么是 HTML 以及如何创建 HTML 文件。

我非常乐意收到您的反馈，也欢迎您在评论区留言提问。如果您喜欢这种视频形式，请订阅我的YouTube频道。