前端学习路线
由‘技术胖前端学习路线’延展开来,加入一些自己觉得很好的资源。(持续整理中)
1.网络知识
-
网络工作原理
-
知识点:缓存、渲染原理、阻塞原理、浏览器本地存储、Web安全问题、事件循环机制
-
资源:‘粥里有勺糖’ 公众号的总结
-
-
什么是HTTP
-
知识点:应用层——http协议、网络层——tcp udp、运输层——ip
-
资源:小林coding的 图解计算机网络
-
-
浏览器及工作方式
-
DNS 及其工作原理
-
域名相关知识
-
云服务相关知识
2.HTML
- 资源:
- 书籍:《Head First HTML与CSS 第2版》(已有pdf版)
- 视频:b站pink老师视频
3.CSS
4.JavaScript
-
JavaScript基础语法和知识
-
知识点:闭包、继承、原型链、this指向
-
资源:
- 尚硅谷课程
- 《JavaScript高级程序设计》(红宝书,继承讲得好)(GitHub资源)
-
-
使用JavaScript 操作 DOM元素
-
Ajax 异步请求相关知识学习
- 【尚硅谷】3小时Ajax入门到精通(配套笔记)
- axsios
-
ES6 以上版本 的JavaScript
-
箭头函数、异步请求、Ajax、promise、async await
-
资源:阮一峰老师的ES6 入门教程
-
5.版本控制管理系统
-
Git的基本用法
- 00.git学习目标_哔哩哔哩_bilibili(GitHub资源git课件)【狂神说Java】b站视频(配套笔记)
-
相关平台/软件的使用
-
GitHub
-
GitLab
-
Gitee
-
6.网络安全相关知识
-
HTTPS 原理和使用
-
CORS 跨域请求和安全知识
- 【尚硅谷】3小时Ajax入门到精通(配套笔记,其中提到了JSONP和CORS)
-
内容安全策略
-
OWASP 安全风险知识
7.包管理工具
- npm
- yarn
8.CSS 预处理 语言
- Sass
- PostCSS
- Less
9.构建工具
10.三大前端框架
-
React.js
-
Vue.js
-
知识点:vue脚手架、路由跳转、vuex全局状态管理
-
资源:coderwhy老师的vue课程、官方文档、vue-router文档、vuex文档、vue-cli文档
- 30张脑图带你从零开始学VUE|VUE基础知识篇
- vue-cli:黑马程序员Vue全套视频教程(有讲到脚手架,可以看自己的笔记)
- 脑图总结:脑图
- 初学视频:黑马程序员Vue全套视频教程,跟着做了‘购物车案例’
-
组件库
- element ui(注:做项目要用,面试问的少):官方文档
-
-
-
Angular
11.Web 组件化编程
- HTML Templates
- Custom Elements
- Shadow DOM
12.CSS 相关框架
- BootStrap
- Material UI
- Materialize CSS
- ReactStrap
13.JavaScript 语法糖
- TypeScript
学习视频(尚硅谷)+笔记 by JasonkayZK(笔记里有官方文档)
- Flow
14.服务端渲染
-
React.js
- Next.js
- GatsbyJS
-
Vue.js
- Nuxt.js
-
Angular
- Universal
15.图形化编程
- Cocos Creator
- Three.js
16.静态站点生成器
- Next.js
- GatsbyJS
- Nuxt.js
- Vuepress
- Hugo
17.移动App开发
- React Native
- UniApp
- Flutter
- Ionic
18.桌面应用开发
- Electron
19.其他
- jQuery+Echarts
- mysql
- 开发工具
- vscode:
- VScode插件:Live Serve,(当代码修改保存后,浏览器页面自动更新)
- vscode:
- mock(官方文档)
- echarts:文档
- 找工作
- 简历制作:只用 Markdown 就写出好看的简历
- 在线考试系统:赛码网(footer有企业考试日历)
- 投简历:牛客网;拉勾网
- 面试:掘金yck大佬整理的面试仓库、大前端面试宝典—前端自检清单、web前端面试-面试官系列
- 文档
20.学习路线指南
- 项目
- 如何在5天内学会Vue?聊聊我的学习方法!:从后台管理项目出发学习vue
- 学习路线
技术胖前端学习路线
22.07.04 技术胖前端学习路线(强调b站视频方面)
B站学习资源整合
网络知识
(Internet)
-
- 网络工作原理
- 计算机网络原理:https://www.bilibili.com/video/BV1xJ41137Q3
-
- 什么是HTTP
- HTTP协议详解:https://www.bilibili.com/video/BV1js411g7Fw
-
- 浏览器及工作方式
- 浏览器是如何运作的?:https://www.bilibili.com/video/BV1x54y1B7RE
-
- DNS 及其工作原理
- DNS基本工作原理:https://www.bilibili.com/video/BV1GW411j7Ts
- 直观DNS科普:https://www.bilibili.com/video/BV1F54y1R7BC
-
- 域名相关知识
- 域名解析完整讲解:https://www.bilibili.com/video/BV1zA411x7Pj
-
- 云服务相关知识
- 揭秘阿里云服务器:https://www.bilibili.com/video/BV1Rt411u7k4
超文本标记语言
(HTML)
-
- HTML基础知识学习
- HTML全套基础教程:https://www.bilibili.com/video/BV11t411K74Q
-
- HTML 编写规则 和语义化写法
- HTML 速成:https://www.bilibili.com/video/BV1vs411M7aT
-
- 表单和验证
- html5表单验证:https://www.bilibili.com/video/BV16K4y1Z7Gb
-
- 公约和最佳实践方法
- 前端代码规范秘籍:https://www.bilibili.com/video/BV19P4y147Jz
-
- SEO 基础知识
- SEO优化学习教程:https://www.bilibili.com/video/BV1fE411J7ya
层叠样式表
(CSS)
-
- CSS 基础知识学习
-
- 页面切图和布局实现
-
浮动布局
-
定位布局
-
Display
-
display&visibility:https://www.bilibili.com/video/BV1HJ411M7CM
-
盒子模型
-
CSS盒子模型与定位:https://www.bilibili.com/video/BV1P7411G7BW
-
Grid 布局
-
Flex 布局
-
- 页面响应式布局设计
-
六个案例学会响应式布局:https://www.bilibili.com/video/BV1ov411k7sm
浏览器脚本语言
(JavaScript)
-
- JavaScript基础语法和知识
- JavaScript基础语法:https://www.bilibili.com/video/BV1Sy4y1C7ha
-
- 使用JavaScript 操作 DOM元素
- JS必会的DOM BOM操作:https://www.bilibili.com/video/BV1k4411w7sV
-
- Ajax 异步请求相关知识学习
- Ajax入门到精通:https://www.bilibili.com/video/BV1WC4y1b78y
-
- ES6 以上版本 的JavaScript
- ES6-ES11新特性:https://www.bilibili.com/video/BV1uK411H7on
版本控制管理系统
Version Control System
-
- Git的基本用法
-
- 相关平台/软件的使用
-
GitHub
-
十分钟学会Github:https://www.bilibili.com/video/BV1yo4y1d7UK
-
GitLab
-
gitlab使用说明:https://www.bilibili.com/video/BV11E411x7Uv
-
Gitee
-
这个看中文网址就可以了,目前B站还没有很好的视频介绍
网络安全相关知识
Web Security Knowledge
-
- HTTPS 原理和使用
- 你连HTTPS原理都不懂:https://www.bilibili.com/video/BV1Up4y1i7PG
-
- CORS 跨域请求和安全知识
- 什么是CORS:https://www.bilibili.com/video/BV1Kt411E76z
-
- 内容安全策略
- 网络渗透:https://www.bilibili.com/video/BV1kh411W7Vv
-
- OWASP 安全风险知识
- OWASP TOP10:https://www.bilibili.com/video/BV1ey4y1V7Jj
包管理工具
Package Managers
-
- npm
- 包管理工具:https://www.bilibili.com/video/BV1Dv411W7XP
-
- yarn
- Yarn入门:https://www.imooc.com/learn/766 (B站没有,推荐这个免费)
CSS 预处理 语言
CSS Preprocessors
-
- Sass
- SCSS从入门到实战:https://www.bilibili.com/video/BV1Zg4y1v75U
-
- PostCSS
- B站没太好的视频,建议买书《深入PostCSS Web设计》
-
- Less
- 前端less教程:https://www.bilibili.com/video/BV1YW411T7vd
构建工具
Build Tools
-
- 任务执行命令 [Task Runners]
-
npm scripts
-
Gulp
-
- 打包工具
-
Webpack
-
Webpack从入门到精通:https://www.bilibili.com/video/BV1e7411j7T5
-
Parcel
-
- 代码格式化工具
-
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
-
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