# illion_book2

**Repository Path**: illion_34/illion_book2

## Basic Information

- **Project Name**: illion_book2
- **Description**: 前端框架（vue、react）
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-11-08
- **Last Updated**: 2021-11-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 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