在 GitHub 看到一个很不错的前端学习路线图（roadmap），从前端基础到前端工程化，再到跨端，都有知识点的覆盖，非常推荐阅读。掌握计算机网络的基础是一名前端工程师的基本素养，建议先学习以下的知识：Internet 如何工作；HTTP 协议等。
一、web前端开发学习路线
在 GitHub 看到一个很不错的前端学习路线图（roadmap），从前端基础到前端工程化，再到跨端，都有知识点的覆盖，非常推荐阅读。
计算机网络
掌握计算机网络的基础是一名前端工程师的基本素养，建议先学习以下的知识：
- ✅ Internet 如何工作
- ✅ HTTP 协议
- ✅ 浏览器工作机制
- ✅ DNS 及其运行机制
- ✅ 了解域名、网站托管
这本书我记得是大学的课程教材，是很经典一本网络书。
HTML
- ✅ 学习 HTML 基础，标签、元素、表单验证等等
- ✳️ 语义化标签
- ✳️ 了解 Web 无障碍（Accessibility）
- ✳️ 学习 SEO 基础的优化
CSS
- ✅ 学习 CSS 基础
- ✅ 制作布局：浮动、定位、显示、盒模型、网格布局、弹性布局
- ✅ 响应式设计和媒体查询（@media）
- ✅ 结合 HTML 制作一个简单的网页作为优异实践
第四点很重要，关键要联系，比如你可以做一个简单的个人网站。
JavaScript
- ✅ 学习语法和基本结构
- ✅ 学习操作 DOM
- ✅ 学习 Fetch API / Ajax（XHR）
- ✅ ES6+ 和模块化 JavaScript
- ✅ 了解变量提升、事件冒泡机制、作用域、原型、Shadow DOM、严格模式等概念
版本控制
- ✅ Git 的基本操作
- ✅ 创建账号并且学习使用 GitHub
Web 安全知识
- ❇️ HTTPS
- ❇️ 内容安全策略（CSP）
- ❇️ 跨域资源共享
- ❇️ OWASP 安全风险
上面的内容是前端最基础的部分，建议多花时间，掌握好每一个知识点。
从这开始，将进入前端工程化的部分，你可能会接触到很多种不同的框架，并学习使用多种的工具为自己的开发提效。
包管理工具
npm 和 yarn 都很好，选择一个学习即可，他们两是相似的。pnpm 是我自己加的，它做了很多优化，后面可以再了解
- ✅ npm
- ✳️ yarn
- ✳️ pnpm
CSS 构架
通过使用现代的 CSS 框架和 CSS-in-JS 的书写方式，不用再担心 CSS 的构架问题，但熟悉 BEM 规范是一个不错的选择。
- ❇️ BEM，一种书写规范
- ❎ OOCSS
- ❎ SMACSS
CSS 预处理器
以下三个可选择一个进行学习。
- ❇️ SASS
- ❇️ PostCSS
- ❇️ Less
构建工具
- 任务执行器
- ✅ npm scripts
- ❎ Gulp
- 代码检查和格式化工具
- ❇️ Prettier 代码格式化
- ❇️ ESLint 代码检查
- ❎ StandardJS
- 模块打包
- ✅ Webpack
- ✳️ Rollup
- ✳️ Vite（打包和热更新的速度快很多）
前端框架
前端框架推荐先学习 React，能理解函数式编程和组件化。Vue 的特点是上手快，中文文档齐全，可以选择性的学习。
- ✅ React.js
- ✅ Redux (状态管理)
- ✳️ MobX
- ✳️ Vue.js
- VueX （状态管理）
推荐一本写的很好的 Vue 书籍，作者是 Vue 的核心贡献者。
- ✳️ Angular
- RxJS
- NgRx
这里我再加两个框架，最近在前端届也很火，可以适当了解，
- Solid
- Svelte
现代 CSS
这里可以先了解一些概念，以及为什么要这么选择这些技术，这些技术出现的缘由等等。
- ✅ Styled Component
- ✅ CSS Module
- ✳️ Styled JSX
- ✳️ Emotion
- ❎ Radium
- ❎ Glamorou
Web 组件
- ❇️ HTML 模版
- ❇️ 自定义元素
- ❇️ Shadow DOM
CSS 框架
CSS 框架有两种，一种是基于 JavaScript 框架开发的应用程序。推荐的框架有：
- ✅ Reactstrap
- ✳️ Material UI
- ✅ Tailwind CSS（这里和图片不一致，我认为 tailwind 更值得学习，可能较主观）
- ✳️ Chakra UI
另外一只是纯 CSS 框架，默认和不和 JavaScript 组件一起使用。
- ✅ BootStrap
- ✳️ Materialize CSS
- ✳️ Bulma
测试
在这里你需要学习使用下面的框架进行单元、集成和功能测试。
- ✅ Jest
- ✳️ react-testing-library
- ✳️Cypress
- ✳️ Enzyme
类型检查器
- ✅✳️ TypeScript
- ❎ Flow
上面是前端工程化的学习内容，接下来的内容涉及到性能、服务端渲染以及跨端，这一部分前端也叫被称作「大前端」。
PWA
- ❇️ 学习 PWA 中使用到的 Web API：
- Storage
- Web Sockets
- Service Workers
- 定位
- 通知
- 设备方向
- 支付、证书等等
- ❇️ 计算、测量以及提高性能：
- PRPL 模式
- RAIL 模式
- 性能指标
- 学习使用 LightHouse
- 学习使用 DevTools
服务端渲染
- ✅ Next.js （React.js）
- ✳️ Nuxt.js （Vue.js）
- ✳️ Universal（Angular）
❇️ GraphQL
- ✅ Apollo
- ✳️ Relay Modern
❇️ 静态网站生成
可以用来快速搭建博客或者文档
- ✅ Next.js
- ✅ GatsbyJS
- ✳️ Nuxt.js
- ✳️ Vuepress
- ✳️ JekyII
- ✳️ Hugo
❇️ 移动端应用开发
- ✅ ReactNative
- ❇️ Flutter
❇️ 桌面应用开发
- ✅ Electron
- ✳️ Carlo
- ✳️ Proton Native
❇️ WebAssembly
总结完毕，不由得感叹前端生态真是丰富多彩，要学的东西很多，自己不懂的也很多，有些知识点也是浅尝辄止。虽然有这么多的方向，但还是需要找到一个点能够深挖。
如果你是前端的初学者，也不要被这些框架给吓到，学好基础然后加以实践更为重要。
延伸阅读：
二、HTML是什么
HTML（Hyper Text Mark-up Language ）即超文本标记语言，是 WWW 的描述语言，由 Tim Berners-lee提出。设计 HTML 语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。这样，你只要使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。 HTML文本是由 HTML命令组成的描述性文本，HTML 命令可以说明文字、 图形、动画、声音、表格、链接等。 HTML的结构包括头部 (Head)、主体 (Body) 两大部分。头部描述浏览器所需的信息，主体包含所要说明的具体内容。
