文章目录
前端学习路径B站视频整合
网络知识
- 网络工作原理
计算机网络原理：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全套基础教程：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 基础知识学习
CSS3基础教程：https://www.bilibili.com/video/BV1Bx411u7cS
CSS3全套教程：https://www.bilibili.com/video/BV1et411q74F - 页面切图和布局实现
- 浮动布局
- 浮动布局：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
- 页面响应式布局设计
六个案例学会响应式布局：https://www.bilibili.com/video/BV1ov411k7sm
浏览器脚本语言https://www.bilibili.com/video/BV1Sy4y1C7ha
- 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
版本控制管理系统
- Git的基本用法
Git最新教程：https://www.bilibili.com/video/BV1FE411P7B3 - 相关平台/软件的使用
- GitHub
- 十分钟学会Github：https://www.bilibili.com/video/BV1yo4y1d7UK
- GitLab
- gitlab使用说明：https://www.bilibili.com/video/BV11E411x7Uv
- Gitee
- 这个看中文网址就可以了，目前B站还没有很好的视频介绍
网络安全相关知识
- 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
包管理工具
- npm
包管理工具：https://www.bilibili.com/video/BV1Dv411W7XP - yarn
Yarn入门：https://www.imooc.com/learn/766 (B站没有，推荐这个免费)
CSS 预处理 语言
- Sass
SCSS从入门到实战：https://www.bilibili.com/video/BV1Zg4y1v75U - PostCSS
B站没太好的视频，建议买书《深入PostCSS Web设计》 - Less
前端less教程：https://www.bilibili.com/video/BV1YW411T7vd
构建工具
- 任务执行命令
[Task Runners]
- npm scripts
- npm包管理应用：https://www.bilibili.com/video/BV1Dv411W7XP
- Gulp
- Gulp入门：https://www.bilibili.com/video/BV1yA411s72G
- 打包工具
- Webpack
- Webpack从入门到精通：https://www.bilibili.com/video/BV1e7411j7T5
- Parcel
- Parcel初体验：https://www.bilibili.com/video/BV1Pa4y147Kf
- 代码格式化工具
- Prettier
- Prettier和ESLint使用：https://www.bilibili.com/video/BV183411r7YK
- ESLint
- ESLint基础入门：https://space.bilibili.com/390120104/search/video?keyword=ESLint
三大前端框架
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
CSS 相关框架
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
JavaScript 语法糖
TypeScript从入门到精通：https://www.bilibili.com/video/BV1qV41167VD
服务端渲染
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
静态站点生成器
Next.js入门教程：https://www.bilibili.com/video/BV13441117KK
GatsbyJS 实战：https://www.bilibili.com/video/BV1i4411T7AR （英文）
Nuxt.js入门：https://www.bilibili.com/video/BV1Xt41117Kg
Vuepress入门到精通：https://www.bilibili.com/video/BV1vb411m7NY
10分钟搭建个人网站：https://www.bilibili.com/video/BV1x64y117PX
移动App开发
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基础：https://www.bilibili.com/video/BV15t411U7yf
Flutter实战：https://www.bilibili.com/video/BV1kt411B7mu
Ionic入门：https://www.bilibili.com/video/BV1Ub41117q5
桌面应用开发
Electron入门：https://www.bilibili.com/video/BV1QB4y1F722
Electron基础：https://www.bilibili.com/video/BV177411s7Lt
