技术胖的前端学习路径 B站整合

技术胖的前端学习路径

B站学习资源整合

网络知识

（Internet）

• 1. 网络工作原理
• 计算机网络原理：www.bilibili.com/video/BV1xJ…
• 2. 什么是HTTP
• HTTP协议详解：www.bilibili.com/video/BV1js…
• 3. 浏览器及工作方式
• 浏览器是如何运作的？：www.bilibili.com/video/BV1x5…
• 4. DNS 及其工作原理
• DNS基本工作原理：www.bilibili.com/video/BV1GW…
• 直观DNS科普：www.bilibili.com/video/BV1F5…
• 5. 域名相关知识
• 域名解析完整讲解：www.bilibili.com/video/BV1zA…
• 6. 云服务相关知识
• 揭秘阿里云服务器：www.bilibili.com/video/BV1Rt…

超文本标记语言

（HTML）

• 1. HTML基础知识学习
• HTML全套基础教程：www.bilibili.com/video/BV11t…
• 2. HTML 编写规则 和语义化写法
• HTML 速成：www.bilibili.com/video/BV1vs…
• 3. 表单和验证
• html5表单验证：www.bilibili.com/video/BV16K…
• 4. 公约和最佳实践方法
• 前端代码规范秘籍：www.bilibili.com/video/BV19P…
• 5. SEO 基础知识
• SEO优化学习教程：www.bilibili.com/video/BV1fE…

层叠样式表

（CSS)

• 1. CSS 基础知识学习
• CSS3基础教程：www.bilibili.com/video/BV1Bx…
• CSS3全套教程：www.bilibili.com/video/BV1et…
• 2. 页面切图和布局实现
• 浮动布局
• 浮动布局：www.bilibili.com/video/BV1Zs…
• 定位布局
• CSS定位布局：www.bilibili.com/video/BV1ni…
• Display
• display&visibility：www.bilibili.com/video/BV1HJ…
• 盒子模型
• CSS盒子模型与定位：www.bilibili.com/video/BV1P7…
• Grid 布局
• 如何用grid：www.bilibili.com/video/BV14C…
• Flex 布局
• Flex伸缩布局：www.bilibili.com/video/BV1BJ…
• 3. 页面响应式布局设计
• 六个案例学会响应式布局：www.bilibili.com/video/BV1ov…

浏览器脚本语言

(JavaScript)

• 1. JavaScript基础语法和知识
• JavaScript基础语法：www.bilibili.com/video/BV1Sy…
• 2. 使用JavaScript 操作 DOM元素
• JS必会的DOM BOM操作：www.bilibili.com/video/BV1k4…
• 3. Ajax 异步请求相关知识学习
• Ajax入门到精通：www.bilibili.com/video/BV1WC…
• 4. ES6 以上版本 的JavaScript
• ES6-ES11新特性：www.bilibili.com/video/BV1uK…

版本控制管理系统

Version Control System

• 1. Git的基本用法
• Git最新教程：www.bilibili.com/video/BV1FE…
• 2. 相关平台/软件的使用
• GitHub
• 十分钟学会Github：www.bilibili.com/video/BV1yo…
• GitLab
• gitlab使用说明：www.bilibili.com/video/BV11E…
• Gitee
• 这个看中文网址就可以了，目前B站还没有很好的视频介绍

网络安全相关知识

Web Security Knowledge

• 1. HTTPS 原理和使用
• 你连HTTPS原理都不懂：www.bilibili.com/video/BV1Up…
• 2. CORS 跨域请求和安全知识
• 什么是CORS：www.bilibili.com/video/BV1Kt…
• 3. 内容安全策略
• 网络渗透：www.bilibili.com/video/BV1kh…
• 4. OWASP 安全风险知识
• OWASP TOP10：www.bilibili.com/video/BV1ey…

包管理工具

Package Managers

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

CSS 预处理 语言

CSS Preprocessors

• 1. Sass
• SCSS从入门到实战：www.bilibili.com/video/BV1Zg…
• 2. PostCSS
• B站没太好的视频，建议买书《深入PostCSS Web设计》
• 3. Less
• 前端less教程：www.bilibili.com/video/BV1YW…

构建工具

Build Tools

• 1. 任务执行命令 [Task Runners]
• npm scripts
• npm包管理应用：www.bilibili.com/video/BV1Dv…
• Gulp
• Gulp入门：www.bilibili.com/video/BV1yA…
• 2. 打包工具
• Webpack
• Webpack从入门到精通：www.bilibili.com/video/BV1e7…
• Parcel
• Parcel初体验：www.bilibili.com/video/BV1Pa…
• 3. 代码格式化工具
• Prettier
• Prettier和ESLint使用：www.bilibili.com/video/BV183…
• ESLint
• ESLint基础入门：space.bilibili.com/390120104/s…

三大前端框架

Web Framework

• React.js
• React基础视频：www.bilibili.com/video/BV1g4…
• React全家桶：www.bilibili.com/video/BV1wy…
• React实战博客：www.bilibili.com/video/BV1CJ…
• React商城实战：www.bilibili.com/video/BV1i5…
• Vue.js
• Vue2全家桶：www.jspang.com/detailed?id…
• Vue3全家桶：www.jspang.com/detailed?id…
• vuejs从入门到精通：www.bilibili.com/video/BV1Zy…
• Angular
• Angular基础：www.bilibili.com/video/BV1Wx…

Web 组件化编程

Web Components

• HTML Templates
• Custom Elements
• Shadow DOM
• 概要: 此部分内容没有找到合适视频

CSS 相关框架

CSS Frameworks

• BootStrap
• 一周学会BootStrap：www.bilibili.com/video/BV1Lx…
• Material UI
• Material UI入门教程：www.bilibili.com/video/BV12J…
• Materialize CSS
• Materialize CSS Crash Course：www.bilibili.com/video/BV1gx…
• ReactStrap

JavaScript 语法糖

Type Checkers

• TypeScript
• TypeScript从入门到精通：www.bilibili.com/video/BV1qV…
• Flow

服务端渲染

Server Side Rendering （SSR）

• React.js
• Next.js
• Next.js入门教程：www.bilibili.com/video/BV134…
• GatsbyJS
• GatsbyJS 实战：www.bilibili.com/video/BV1i4… （英文）
• Vue.js
• Nuxt.js
• Nuxt.js入门：www.bilibili.com/video/BV1Xt…
• Angular
• Universal

图形化编程

GraphQL

• Cocos Creator
• Cocos 图形游戏开发：www.bilibili.com/video/BV1sA…
• Three.js
• Three.js基础教程-英文：www.bilibili.com/video/BV1ks…
• Three.js教程：www.bilibili.com/video/BV1va…

静态站点生成器

Static Site Generators

• Next.js
• Next.js入门教程：www.bilibili.com/video/BV134…
• GatsbyJS
• GatsbyJS 实战：www.bilibili.com/video/BV1i4… （英文）
• Nuxt.js
• Nuxt.js入门：www.bilibili.com/video/BV1Xt…
• Vuepress
• Vuepress入门到精通：www.bilibili.com/video/BV1vb…
• Hugo
• 10分钟搭建个人网站：www.bilibili.com/video/BV1x6…

移动App开发

Mobile Applications

• React Native
• ReactNatvie基础：www.bilibili.com/video/BV1Eg…
• ReactNatvie实战：www.bilibili.com/video/BV15K…
• UniApp
• Uni-App从入门到实战：www.bilibili.com/video/BV1BJ…
• Uni-App美团外卖：www.bilibili.com/video/BV1Zt…
• Flutter
• Flutter基础：www.bilibili.com/video/BV15t…
• Flutter实战：www.bilibili.com/video/BV1kt…
• Ionic
• Ionic入门：www.bilibili.com/video/BV1Ub…

桌面应用开发

Desktop Applications

• Electron
• Electron入门：www.bilibili.com/video/BV1QB…
• Electron基础：www.bilibili.com/video/BV177…