前端学习路线（转载）

参考价值：极高

声明：本篇博客完全转载自B站up主技术胖的开源项目

程序员前端知识图谱+B站自学资源整合 新手自学无忧 老手查缺补漏

@技术胖

---

技术胖的前端学习路径

B站学习资源整合

网络知识

（Internet）

1. 网络工作原理

计算机网络原理：https://www.bilibili.com/video/BV1xJ41137Q3

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. 域名相关知识

域名解析完整讲解：https://www.bilibili.com/video/BV1zA411x7Pj

6. 云服务相关知识

揭秘阿里云服务器：https://www.bilibili.com/video/BV1Rt411u7k4

超文本标记语言

（HTML）

1. HTML基础知识学习

HTML全套基础教程：https://www.bilibili.com/video/BV11t411K74Q

2. HTML 编写规则 和语义化写法

HTML 速成：https://www.bilibili.com/video/BV1vs411M7aT

3. 表单和验证

html5表单验证：https://www.bilibili.com/video/BV16K4y1Z7Gb

4. 公约和最佳实践方法

前端代码规范秘籍：https://www.bilibili.com/video/BV19P4y147Jz

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. 页面切图和布局实现

• 浮动布局
• 浮动布局：https://www.bilibili.com/video/BV1Zs411j7Z3
• 定位布局
• CSS定位布局：https://www.bilibili.com/video/BV1ni4y1g7tc
• Display
• display&visibility：https://www.bilibili.com/video/BV1HJ411M7CM
• 盒子模型
• CSS盒子模型与定位：https://www.bilibili.com/video/BV1P7411G7BW
• Grid 布局
• 如何用grid：https://www.bilibili.com/video/BV14C4y1W7oA
• Flex 布局
• Flex伸缩布局：https://www.bilibili.com/video/BV1BJ41197XE

  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的基本用法

  Git最新教程：https://www.bilibili.com/video/BV1FE411P7B3

  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 跨域请求和安全知识

  什么是CORS：https://www.bilibili.com/video/BV1Kt411E76z

  3. 内容安全策略

  网络渗透：https://www.bilibili.com/video/BV1kh411W7Vv

  4. OWASP 安全风险知识

  OWASP TOP10：https://www.bilibili.com/video/BV1ey4y1V7Jj

  包管理工具

  Package Managers

  1. npm

  包管理工具：https://www.bilibili.com/video/BV1Dv411W7XP

  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. 任务执行命令

  [Task Runners]
• 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

  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

  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）

  React.js

• Next.js
• Next.js入门教程：https://www.bilibili.com/video/BV13441117KK
• GatsbyJS
• GatsbyJS 实战：https://www.bilibili.com/video/BV1i4411T7AR （英文）

  Vue.js

• Nuxt.js
• Nuxt.js入门：https://www.bilibili.com/video/BV1Xt41117Kg

  Angular

• Universal

  图形化编程

  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

  Ionic入门：https://www.bilibili.com/video/BV1Ub41117q5

  桌面应用开发

  Desktop Applications

  Electron

  Electron入门：https://www.bilibili.com/video/BV1QB4y1F722

  Electron基础：https://www.bilibili.com/video/BV177411s7Lt

  学到此处，基础部分学习已经全部完成。

  学习重要程度说明

  红色-精通：非常重要，需要达到精通、并有实战经验

  蓝色-熟练：需要达到熟练，达到一定的基础练习量

  灰色-了解：需要了解，把整个课程听完，作几个小练习即可

  视频学习地址：复制后浏览器打开就可以学习

图：