前端发展越来越快，每天都有数不胜数的技术发布。
想要入门前端却没有一条较为理想的路径？
在这个世界里兜兜转转了很久还是感觉在外围搬砖？
那么你可能需要这份技术学习路线图！
我们把学习前端分为三重境界：
接下来我们就通过介绍这三重境界来为你呈现详细的学习路线图。
单机写基础网页
何为单机呢？其实就是一个人
你一个人使用 Web 基础技术开发网站，没有将代码分享给别人（你可能不知道程序世界的代码分享规则），同时只是在本地环境运行你的网站，你甚至对网站如何能把其他人访问到毫无头绪。
这个阶段也是成为一名前端工程师最最基础的一环，大部分初学者还停留在这个阶段，那么我们来看一下这个阶段需要什么样的技能。
HTML + CSS + JavaScript
没错，其实就是我们耳熟能详的前端三剑客，虽然看起来是最最入门的内容，但是需要了解的内容也不少，就类似我们需要先学 26 个字母，学各种汉字基础，才能写作或者创作诗歌一样。了解这三门技术大致需要了解那些内容以及有哪些学习资源推荐呢？
HTML
HTML 代表超文本标记语言。 它用于前端，为网页提供结构，您可以使用 CSS 设置样式并使用 JavaScript 进行交互。
HTML 的学习大致需要 6 个阶段：
CSS
CSS 或级联样式表是用于设置任何网站前端样式的语言。 CSS 是万维网的基础技术，与 HTML 和 JavaScript 并列。
学习基础的 CSS 大致需要 3 个阶段：
JavaScript
JavaScript 允许您向页面添加交互性。 您可能在网站上看到的常见示例是滑块、点击交互、弹出窗口等。
学习基础的 JavaScript 大致需要 5 个阶段：
了解了上面的这些内容，你基本上算是一名基础的前端工程师了，你可以编写各种各样的基础界面，也应该在学习的过程中产出了很多个 DEMO 了。
联机高效写网页
请注意我们这一小节的关键词：联机、高效。
在这个阶段，你将学会如下知识：
基于上述的目标，这一阶段的关键技术如下：
Git
Git 是一种版本控制系统。
版本控制系统允许您跟踪代码库/文件随时间的变化。 它们允许您毫无问题地返回到代码库的某个先前版本。 此外，它们还有助于与处理相同代码的人协作——如果您曾经与其他人合作过一个项目，您可能已经知道将其他人的更改复制和合并到您的代码库中的挫败感； 版本控制系统可以让你摆脱这个问题。
你可以通过下面的链接学习它：
Github
GitHub 是使用 Git 进行软件开发和版本控制的互联网托管提供商。 它提供了 Git 的分布式版本控制和源代码管理功能，以及它自己的特性。
你可以通过下面的链接学习它：
Internet
互联网是一个全球性的计算机网络游戏素材下载 免费，它们相互连接，通过一组标准化的协议进行通信。
HTTP 是基于 TCP/IP 的应用层通信协议网页游戏开发流程图，它标准化了客户端和服务器之间的通信方式。 它定义了如何通过 Internet 请求和传输内容。
Web 浏览器是一种软件应用程序网页游戏开发流程图，它使用户能够通过其图形用户界面访问和显示网页或其他在线内容。
域名系统 (DNS) 是 Internet 的电话簿。 人类通过域名（如 或 ）在线访问信息。 Web 浏览器通过 Internet 协议 (IP) 地址进行交互。 DNS 将域名转换为 IP 地址，因此浏览器可以加载 Internet 资源
名是用于访问网站的唯一且易于记忆的地址，例如“”和“”。 借助 DNS 系统，用户可以使用域名连接到网站。
虚拟主机是一种在线服务，可让您将网站文件发布到互联网上。 因此，任何可以访问互联网的人都可以访问您的网站。
JavaScript 框架
React
React 是最流行的用于构建用户界面的前端 JavaScript 库。 React 还可以使用 Node 在服务器上渲染，并使用 React Native 为移动应用程序提供动力。
Redux
Redux 是 JavaScript 应用程序的可预测状态容器。 它可以帮助您编写行为一致、在不同环境（客户端、服务器和本机）中运行并且易于测试的应用程序。 最重要的是，它提供了出色的开发人员体验，例如实时代码编辑与时间旅行调试器相结合。
当然状态管理方面目前也有 Mobx 与 Recoil 等有力的竞争者。
上述的是 React 生态，此外 JavaScript 社区还有 Vue 与 Angular 等其他非常有竞争力的框架。
CSS 框架
Styled Components
利用标记的模板文字（最近添加到 JavaScript）和 CSS 的强大功能，styled-components 允许您编写实际的 CSS 代码来设置组件的样式。 它还删除了组件和样式之间的映射——将组件用作低级样式构造！
CSS Modules
给 CSS 加入了局部作用域与模块依赖
Sass
为 CSS 加入编程元素材质材料，被称为 CSS 预处理器
TailwindCSS
供一系列辅助类，直接为 HTML 标记添加这些预设的辅助类就可以快速完成一组专业的网站。
构建相关
Webpack
Webpack 是一个模块打包器。 它的主要目的是捆绑 JavaScript 文件以在浏览器中使用，但它也能够转换、捆绑或打包几乎任何资源或资产。
除了 Webpack，目前前端圈比较火的还有：
Npm scripts
组合 Yarn、Npm、Pnpm 等包管理一起使用，来便捷的执行一系列脚本
Babel
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行
开发规范
BEM
块、元素、修饰符方法（通常称为 BEM）是 HTML 和 CSS 中类的流行命名约定。 由 Yandex 团队开发，其目标是帮助开发人员更好地理解给定项目中 HTML 和 CSS 之间的关系。
JavaScript Style Guide
编写 JavaScript 最合理的方法之一
经历上面的一阵狂风乱炸的洗礼之后，你现在已经能够理解如下知识了：
