前端学习路线+资源整合

前端学习路线

由‘技术胖前端学习路线’延展开来，加入一些自己觉得很好的资源。（持续整理中）

1.网络知识

1. 网络工作原理

   • 知识点：缓存、渲染原理、阻塞原理、浏览器本地存储、Web安全问题、事件循环机制

   • 资源：‘粥里有勺糖’ 公众号的总结

2. 什么是HTTP

   • 知识点：应用层——http协议、网络层——tcp udp、运输层——ip

   • 资源：小林coding的 图解计算机网络

3. 浏览器及工作方式

4. DNS 及其工作原理

5. 域名相关知识

6. 云服务相关知识

2.HTML

• 资源：
  • 书籍：《Head First HTML与CSS 第2版》（已有pdf版）
  • 视频：b站pink老师视频

3.CSS

4.JavaScript

1. JavaScript基础语法和知识

   • 知识点：闭包、继承、原型链、this指向

   • 资源：

     • 尚硅谷课程
     • 《JavaScript高级程序设计》（红宝书，继承讲得好）（GitHub资源）

2. 使用JavaScript 操作 DOM元素

3. Ajax 异步请求相关知识学习

   • 【尚硅谷】3小时Ajax入门到精通（配套笔记）
   • axsios
     • 尚硅谷_axios核心技术（配套笔记）
     • axios官方文档、中文文档（官方文档是英文的，没看下去，看中文的就行）、中文文档（不一样）
     • VUE项目b站（有涉及到axios二次封装）

4. ES6 以上版本 的JavaScript

   • 箭头函数、异步请求、Ajax、promise、async await

   • 资源：阮一峰老师的ES6 入门教程

5.版本控制管理系统

1. Git的基本用法

   • 00.git学习目标_哔哩哔哩_bilibili（GitHub资源git课件）【狂神说Java】b站视频（配套笔记）

2. 相关平台/软件的使用

   • GitHub

   • GitLab

   • Gitee

6.网络安全相关知识

1. HTTPS 原理和使用

2. CORS 跨域请求和安全知识

   • 【尚硅谷】3小时Ajax入门到精通（配套笔记，其中提到了JSONP和CORS）

3. 内容安全策略

4. OWASP 安全风险知识

7.包管理工具

1. npm
2. yarn

8.CSS 预处理 语言

1. Sass
2. PostCSS
3. Less

9.构建工具

1. 任务执行命令 [Task Runners]
   • npm scripts
   • Gulp
2. 打包工具
   • Webpack
     • b站尚硅谷教程（配套笔记）
   • Parcel
3. 代码格式化工具
   • Prettier
   • ESLint

10.三大前端框架

1. React.js

2. Vue.js

   • 知识点：vue脚手架、路由跳转、vuex全局状态管理

     • 资源：coderwhy老师的vue课程、官方文档、vue-router文档、vuex文档、vue-cli文档

       • 30张脑图带你从零开始学VUE｜VUE基础知识篇
       • vue-cli：黑马程序员Vue全套视频教程（有讲到脚手架，可以看自己的笔记）
       • 脑图总结：脑图
       • 初学视频：黑马程序员Vue全套视频教程，跟着做了‘购物车案例’

     • 组件库

       • element ui（注：做项目要用，面试问的少）：官方文档

3. Angular

11.Web 组件化编程

1. HTML Templates
2. Custom Elements
3. Shadow DOM

12.CSS 相关框架

1. BootStrap
2. Material UI
3. Materialize CSS
4. ReactStrap

13.JavaScript 语法糖

1. TypeScript

学习视频(尚硅谷)+笔记 by JasonkayZK（笔记里有官方文档）

TypeScript 入门教程(书籍)

1. Flow

14.服务端渲染

1. React.js

   • Next.js
   • GatsbyJS

2. Vue.js

   • Nuxt.js

3. Angular

   • Universal

15.图形化编程

1. Cocos Creator
2. Three.js

16.静态站点生成器

1. Next.js
2. GatsbyJS
3. Nuxt.js
4. Vuepress
5. Hugo

17.移动App开发

1. React Native
2. UniApp
3. Flutter
4. Ionic

18.桌面应用开发

1. Electron

19.其他

1. jQuery+Echarts
   • JQuery——pink老师课程笔记_Cloudiaa的博客-CSDN博客
   • Echarts：文档
2. mysql
   • 数据库与身份认证——黑马课程笔记_Cloudiaa的博客-CSDN博客
3. 开发工具
   1. vscode：
      • VScode插件：Live Serve，（当代码修改保存后，浏览器页面自动更新）
4. mock（官方文档）
5. echarts：文档
6. 找工作
   • 简历制作：只用 Markdown 就写出好看的简历
   • 在线考试系统：赛码网（footer有企业考试日历）
   • 投简历：牛客网；拉勾网
   • 面试：掘金yck大佬整理的面试仓库、大前端面试宝典—前端自检清单、web前端面试-面试官系列
7. 文档
   • 菜鸟教程 - 学的不仅是技术，更是梦想！ (runoob.com)
   • MurphyChen’s Notes (mphy.top)
   • Web前端导航 (alloyteam.com)

20.学习路线指南

• 项目
  • 如何在5天内学会Vue？聊聊我的学习方法！：从后台管理项目出发学习vue
• 学习路线
  • 2021年黑马程序员前端学习路线图 - 知乎 (zhihu.com)

技术胖前端学习路线

22.07.04 技术胖前端学习路线（强调b站视频方面）

B站学习资源整合

网络知识

（Internet）

• 1. 网络工作原理
• 计算机网络原理：https://www.bilibili.com/video/BV1xJ41137Q3
• 1. 什么是HTTP
• HTTP协议详解：https://www.bilibili.com/video/BV1js411g7Fw
• 1. 浏览器及工作方式
• 浏览器是如何运作的？：https://www.bilibili.com/video/BV1x54y1B7RE
• 1. DNS 及其工作原理
• DNS基本工作原理：https://www.bilibili.com/video/BV1GW411j7Ts
• 直观DNS科普：https://www.bilibili.com/video/BV1F54y1R7BC
• 1. 域名相关知识
• 域名解析完整讲解：https://www.bilibili.com/video/BV1zA411x7Pj
• 1. 云服务相关知识
• 揭秘阿里云服务器：https://www.bilibili.com/video/BV1Rt411u7k4

超文本标记语言

（HTML）

• 1. HTML基础知识学习
• HTML全套基础教程：https://www.bilibili.com/video/BV11t411K74Q
• 1. HTML 编写规则 和语义化写法
• HTML 速成：https://www.bilibili.com/video/BV1vs411M7aT
• 1. 表单和验证
• html5表单验证：https://www.bilibili.com/video/BV16K4y1Z7Gb
• 1. 公约和最佳实践方法
• 前端代码规范秘籍：https://www.bilibili.com/video/BV19P4y147Jz
• 1. 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

• 1. 页面切图和布局实现

• 浮动布局

• 浮动布局：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

• 1. 页面响应式布局设计

• 六个案例学会响应式布局：https://www.bilibili.com/video/BV1ov411k7sm

浏览器脚本语言

(JavaScript)

• 1. JavaScript基础语法和知识
• JavaScript基础语法：https://www.bilibili.com/video/BV1Sy4y1C7ha
• 1. 使用JavaScript 操作 DOM元素
• JS必会的DOM BOM操作：https://www.bilibili.com/video/BV1k4411w7sV
• 1. Ajax 异步请求相关知识学习
• Ajax入门到精通：https://www.bilibili.com/video/BV1WC4y1b78y
• 1. ES6 以上版本 的JavaScript
• ES6-ES11新特性：https://www.bilibili.com/video/BV1uK411H7on

版本控制管理系统

Version Control System

• 1. Git的基本用法

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

• 1. 相关平台/软件的使用

• 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
• 1. CORS 跨域请求和安全知识
• 什么是CORS：https://www.bilibili.com/video/BV1Kt411E76z
• 1. 内容安全策略
• 网络渗透：https://www.bilibili.com/video/BV1kh411W7Vv
• 1. OWASP 安全风险知识
• OWASP TOP10：https://www.bilibili.com/video/BV1ey4y1V7Jj

包管理工具

Package Managers

• 1. npm
• 包管理工具：https://www.bilibili.com/video/BV1Dv411W7XP
• 1. yarn
• Yarn入门：https://www.imooc.com/learn/766 (B站没有，推荐这个免费)

CSS 预处理 语言

CSS Preprocessors

• 1. Sass
• SCSS从入门到实战：https://www.bilibili.com/video/BV1Zg4y1v75U
• 1. PostCSS
• B站没太好的视频，建议买书《深入PostCSS Web设计》
• 1. 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

• 1. 打包工具

• Webpack

• Webpack从入门到精通：https://www.bilibili.com/video/BV1e7411j7T5

• Parcel

• Parcel初体验：https://www.bilibili.com/video/BV1Pa4y147Kf

• 1. 代码格式化工具

• 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