大前端学习路径
不仅是一个自学的前端路径，项目包括前端自学的路径+知识图谱+B 站免费视频的整合。
一、网络知识（Internet）
1. 网络工作原理
2. 什么是 HTTP
- HTTP 协议详解: https://www.bilibili.com/video/BV1js411g7Fw
3. 浏览器及工作方式
- 浏览器是如何运作的？: https://www.bilibili.com/video/BV1x54y1B7RE
4. DNS 及其工作原理
- DNS 基本工作原理: https://www.bilibili.com/video/BV1GW411j7Ts
- 直观 DNS 科普: https://www.bilibili.com/video/BV1F54y1R7BC
5. 域名相关知识
6. 云服务相关知识
二、超文本标记语言（HTML）
1. HTML 基础知识学习
- HTML 全套基础教程：https://www.bilibili.com/video/BV11t411K74Q
2. HTML 编写规则 和语义化写法
3. 表单和验证
- html5 表单验证：https://www.bilibili.com/video/BV16K4y1Z7Gb
4. 公约和最佳实践方法
5. SEO 基础知识
- SEO 优化学习教程：https://www.bilibili.com/video/BV1fE411J7ya
三、层叠样式表（CSS)
1. CSS 基础知识学习
- CSS3 基础教程：https://www.bilibili.com/video/BV1Bx411u7cS
- CSS3 全套教程：https://www.bilibili.com/video/BV1et411q74F
2. 页面切图和布局实现
浮动布局
定位布局
Display
- display&visibility：https://www.bilibili.com/video/BV1HJ411M7CM
盒子模型
- CSS 盒子模型与定位：https://www.bilibili.com/video/BV1P7411G7BW
Grid 布局
Flex 布局
3. 页面响应式布局设计
- 六个案例学会响应式布局：https://www.bilibili.com/video/BV1ov411k7sm
四、浏览器脚本语言（JavaScript）
1. JavaScript 基础语法和知识
- JavaScript 基础语法：https://www.bilibili.com/video/BV1Sy4y1C7ha
2. 使用 JavaScript 操作 DOM 元素
- JS 必会的 DOM BOM 操作：https://www.bilibili.com/video/BV1k4411w7sV
3. Ajax 异步请求相关知识学习
- Ajax 入门到精通：https://www.bilibili.com/video/BV1WC4y1b78y
4. ES6 以上版本 的 JavaScript
- ES6-ES11 新特性：https://www.bilibili.com/video/BV1uK411H7on
五、版本控制管理系统（Version Control System）
1. Git 的基本用法
2. 相关平台/软件的使用
GitHub
- 十分钟学会 Github：https://www.bilibili.com/video/BV1yo4y1d7UK
GitLab
- gitlab 使用说明：https://www.bilibili.com/video/BV11E411x7Uv
Gitee
- 这个看中文网址就可以了，目前 B 站还没有很好的视频介绍
六、网络安全相关知识（Web Security Knowledge）
1. HTTPS 原理和使用
- 你连 HTTPS 原理都不懂：https://www.bilibili.com/video/BV1Up4y1i7PG
2. CORS 跨域请求和安全知识
3. 内容安全策略
4. OWASP 安全风险知识
- OWASP TOP10：https://www.bilibili.com/video/BV1ey4y1V7Jj
七、包管理工具（Package Managers）
1. npm
2. yarn
- Yarn 入门：https://www.imooc.com/learn/766 (B 站没有，推荐这个免费)
八、CSS 预处理语言（CSS Preprocessors）
1. Sass
- SCSS 从入门到实战：https://www.bilibili.com/video/BV1Zg4y1v75U
2. PostCSS
- B 站没太好的视频，建议买书《深入 PostCSS Web 设计》
3. Less
- 前端 less 教程：https://www.bilibili.com/video/BV1YW411T7vd
九、构建工具（Build Tools）
1. 任务执行命令
- npm scripts: 暂无
- npm 包管理应用：https://www.bilibili.com/video/BV1Dv411W7XP
- Gulp: 暂无
- Gulp 入门：https://www.bilibili.com/video/BV1yA411s72G
2. 打包工具
- Webpack: 暂无
- Webpack 从入门到精通：https://www.bilibili.com/video/BV1e7411j7T5
- Parcel: 暂无
- Parcel 初体验：https://www.bilibili.com/video/BV1Pa4y147Kf
3. 代码格式化工具
- Prettier: 暂无
- Prettier 和 ESLint 使用：https://www.bilibili.com/video/BV183411r7YK
- ESLint: 暂无
- ESLint 基础入门：https://space.bilibili.com/390120104/search/video?keyword=ESLint
十、三大前端框架（Web Framework）
React.js
- React 基础视频：https://www.bilibili.com/video/BV1g4411i7po
- React 全家桶：https://www.bilibili.com/video/BV1wy4y1D7JT
- React 实战博客：https://www.bilibili.com/video/BV1CJ411377B
- React 商城实战：https://www.bilibili.com/video/BV1i5411c7xp
- Next.js 入门教程：https://www.bilibili.com/video/BV13441117KK
- GatsbyJS 实战：https://www.bilibili.com/video/BV1i4411T7AR （英文）
Vue.js
- Vue2 全家桶：https://www.jspang.com/detailed?id=57
- Vue3 全家桶：https://www.jspang.com/detailed?id=67
- vuejs 从入门到精通：https://www.bilibili.com/video/BV1Zy4y1K7SH
- Nuxt.js 入门：https://www.bilibili.com/video/BV1Xt41117Kg
Angular
- Angular 基础：https://www.bilibili.com/video/BV1Wx411R7qt
十一、Web 组件化编程（Web Components）
HTML Templates
- 暂无
Custom Elements
- 暂无
Shadow DOM
- 暂无
十二、CSS 相关框架（CSS Frameworks）
BootStrap
- 一周学会 BootStrap：https://www.bilibili.com/video/BV1Lx411v73k
Material UI
- Material UI 入门教程：https://www.bilibili.com/video/BV12J411s75b
Materialize CSS
- Materialize CSS Crash Course：https://www.bilibili.com/video/BV1gx411h7Y5
ReactStrap
- 暂无
十三、JavaScript 语法糖（Type Checkers）
TypeScript
- TypeScript 从入门到精通：https://www.bilibili.com/video/BV1qV41167VD
Flow
- 暂无
十四、服务端渲染（Server Side Rendering （SSR））
- 暂无
十五、图形化编程（GraphQL）
Cocos Creator
- Cocos 图形游戏开发：https://www.bilibili.com/video/BV1sA411Y7x4
Three.js
- Three.js 基础教程-英文：https://www.bilibili.com/video/BV1ks411W78i
- Three.js 教程：https://www.bilibili.com/video/BV1va4y1p7QB
十六、静态站点生成器（Static Site Generators）
Next.js
- Next.js 入门教程：https://www.bilibili.com/video/BV13441117KK
GatsbyJS
- GatsbyJS 实战：https://www.bilibili.com/video/BV1i4411T7AR （英文）
Nuxt.js
- Nuxt.js 入门：https://www.bilibili.com/video/BV1Xt41117Kg
Vuepress
- Vuepress 入门到精通：https://www.bilibili.com/video/BV1vb411m7NY
Hugo
- 10 分钟搭建个人网站：https://www.bilibili.com/video/BV1x64y117PX
十七、移动 App 开发（Mobile Applications）
React Native
- ReactNatvie 基础：https://www.bilibili.com/video/BV1Eg4y16735
- ReactNatvie 实战：https://www.bilibili.com/video/BV15K411s75p
UniApp
- Uni-App 从入门到实战：https://www.bilibili.com/video/BV1BJ411W7pX
- Uni-App 美团外卖：https://www.bilibili.com/video/BV1Zt4y117RR
Flutter
- Flutter 基础：https://www.bilibili.com/video/BV15t411U7yf
- Flutter 实战：https://www.bilibili.com/video/BV1kt411B7mu
Ionic
十八、桌面应用开发（Desktop Applications）
Electron
- Electron 入门：https://www.bilibili.com/video/BV1QB4y1F722
- Electron 基础：https://www.bilibili.com/video/BV177411s7Lt