2021 年 Web 开发：快速入门指南

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

当年我学习Web开发的时候，常常被庞大的Web开发世界的复杂性吓到。六年后的今天，我已经是一名全栈开发人员，并且迫不及待地想要学习新知识。希望这份指南能够帮助那些曾经和我一样，面对浩瀚的知识​​体系感到畏惧的人。

请观看我的视频，或阅读以下文章。

本指南将向您展示我认为掌握 Web 开发的最简单途径。它重点介绍 JavaScript 和 MERN 技术栈（4 项技术，可让您创建完整的全栈 Web 应用程序）。

网页开发路径

在网站开发中，你可以选择两条（实际上是三条）发展路线：前端和后端。网站的前端是指用户看到并与之交互的所有内容，例如浏览器中的页面或手机应用程序的用户界面。后端则负责为前端提供所需的一切，例如为前端提供文件和数据的服务器，或存储数据的数据库。网站至少需要前端，但许多网站还需要一些只能通过后端实现的额外功能。因此，前端和后端开发人员都非常受企业欢迎。

顺便说一句：当你同时精通前端和后端时，你就被称为全栈开发者。这听起来很棒，可以说是 Web 开发的最高境界😎。但是，在学习两者之前，你应该先专注于前端或后端中的一个。

基础知识，从这里开始。

1. HTML 📄

HTML是网络最重要、最基础的语言。它存储网页的内容和结构，包括文本、图像、链接、列表、表格、输入表单、按钮、嵌入式视频播放器等等。HTML本质上就是网页的表示。

2. CSS 🎨

CSS 用于设置 HTML 元素的样式，并创建文档的布局。您可以更改颜色、背景、字体，添加边距、边框、间距、网格，垂直和水平对齐元素，以及更多功能。

3. JavaScript 💾

JavaScript（不要和 Java 混淆，我知道这很奇怪）是网页的编程语言。你可以使用 JavaScript 在特定事件发生时动态更改网页内容。例如：用户按下按钮时，你可以弹出一个包含登录表单的窗口。

4. 编码工具🔨

一旦你掌握了网页开发的三大基石（HTML、CSS 和 JS），你就能制作完整的网站了。由于你会经常用到这些语言，所以最好学习一些工具，帮助你更快速、更轻松地编写代码。

埃米特

Emmet是一个HTML工具箱，提供快捷键快速添加复杂的HTML结构。

更漂亮

代码格式化工具。通过对齐、添加空格和缩进，让你的代码更美观（更易读）。

ESLint

代码检查工具（linter）是一种代码分析工具。ESLint 会在你编写糟糕的 JavaScript 代码时发出警告，从而防止后续出现错误。

5. 终端、Git 和 GitHub ☁

你需要的下一个工具是 Git。我简直离不开它。你有没有过这样的经历：某天你写的代码运行一切正常，第二天却突然崩溃，而且完全不知道该如何修复？Git 会帮你追踪代码的旧版本。另外，你也应该了解一下 GitHub。GitHub 是一个云端平台，你可以用 Git 与他人（或你的开发团队）共享代码。Git 是一个命令行界面 (CLI)，所以你最好也学习如何使用终端。

6. 主机🌍

网站建好后，你想把它分享给全世界。这就需要把文件托管到服务器上。自己做起来比较麻烦，好在现在有很多服务可以帮你搞定。我推荐Netlify，它提供简单易用的拖放式网站托管服务。如果你需要域名（比如 google.com 之类的），可以去Namecheap.com。

后端

掌握了以上列出的基本技能，你就可以制作一些简单的前端网站。但是，你很快就会发现，对于一些更高级的功能，例如用户帐户或从其他服务器下载数据（例如，天气应用程序所需的天气数据），你需要服务器和/或数据库。本指南将重点介绍 MERN 技术栈：这是一套基于 JavaScript 的技术，可以轻松创建前端和后端。MERN 中的 M、E 和 N 代表一些后端技术，我将在下文中进行介绍。

1. 高级 JavaScript 🤯

由于本指南所有技术操作均使用 JavaScript，因此了解一些 JS 的高级特性并无坏处。这里不赘述细节，但您在继续阅读之前应该理解以下一些基本概念：

• 范围
• 这个关键词
• 箭头函数
• 回调函数
• 数组方法（例如查找、过滤、映射、排序等）
• 继承（原型和类）
• 异步JS（处理和创建Promise）

2. Node & NPM 🖥

Node（MERN 中的 N）是我们用来在服务器上运行 JavaScript 的工具。Node 是一个 JavaScript 运行时环境，它允许你在不使用浏览器的情况下运行 JavaScript。NPM 是 Node 包管理器，你将使用它来管理所有即将安装到 Node 应用程序中的代码库。

3. ExpressJS 🚦

ExpressJS（MERN 中的 E）是一个用于搭建 API（应用程序编程接口）的 Node 框架。API 是前端代码向服务器请求资源的方式。Express 会检测这些请求，然后你可以运行代码来处理这些请求。

4. MongoDB 和 Mongoose ☁

MongoDB（MERN 中的 M）是一个数据库系统，它存储的是文档（与存储数据表的 SQL 数据库不同）。例如，如果您需要在数据库中存储用户帐户，MongoDB 会为每个帐户存储一个文档，用于描述该帐户（例如：姓名、电子邮件、密码等）。Mongoose 是一个 NPM 包，您可以在 Node 服务器上使用它，通过 JavaScript 与 MongoDB 数据库进行交互。

前端

掌握了基本技能后，您可以选择学习后端开发，或者进一步提升前端技能。

1. 高级 HTML、CSS 和 JS 📄🎨

想要成为前端高手，扎实的基础至关重要。所有前端工具和框架都是用 HTML、CSS 和 JavaScript 这三种基础语言编写的。因此，在学习更高级的内容之前，请确保你理解以下几点：

HTML

• 语义学
• 无障碍
• 搜索引擎优化（SEO）

CSS

• 显示（行内、块级）
• 位置
• Flexbox
• 网格
• 响应式布局
• 伪类/伪元素
• 特效（渐变、阴影、变换等）
• 动画片

JavaScript

• DOM 操作
• 范围
• 这个关键词
• 箭头函数
• 回调函数
• 数组方法（例如查找、过滤、映射、排序等）
• 继承（原型和类）
• 异步JS（处理和创建Promise）

2. Node & NPM 🖥

Node.js 不仅仅用于构建后端服务器。许多前端工具都运行在 Node.js 上。NPM 也是获取和管理库、框架及其他工具最常用的工具。

3. 模块打包工具（Parcel）📦

当你开始积累一些其他的库/框架时，将它们集成到你自己的代码中很快就会成为一个问题。你会在 HTML 中创建无数个 script 标签，搞乱代码执行顺序，甚至忘记你的包安装在哪里。解决方案是使用模块打包器。它会将你应用中需要的所有 JS 代码打包成一个单独的 JS 文件，这样你的 HTML 页面中只需要一个 script 标签即可。虽然 Webpack 是最常用的模块打包器，但我建议你从 Parcel 开始，因为它不需要任何配置，而 Webpack 的配置有时会让人非常头疼。

4. 前端框架（React）⚛

当你开发一些规模更大、更复杂的应用程序时，你会发现 HTML、CSS 和 JS 这些基础语言对于这类大型应用程序的扩展性并不理想。像 React 这样的前端框架（React 实际上是一个 UI 库，而非框架，但它的功能与框架类似）可以简化复杂应用程序的开发。对于高级前端开发人员来说，React 这样的框架绝对是必备工具。（其他选择包括 Angular 和 Vue，但 React 无疑是最流行、最简单的。）