技術(shù)胖的前端學(xué)習(xí)路徑
B站學(xué)習(xí)資源整合
網(wǎng)絡(luò)知識
（Internet）
- 網(wǎng)絡(luò)工作原理
- 計算機(jī)網(wǎng)絡(luò)原理：https://www.bilibili.com/video/BV1xJ41137Q3
- 什么是HTTP
- HTTP協(xié)議詳解：https://www.bilibili.com/video/BV1js411g7Fw
- 瀏覽器及工作方式
- 瀏覽器是如何運(yùn)作的？：https://www.bilibili.com/video/BV1x54y1B7RE
- DNS 及其工作原理
- DNS基本工作原理：https://www.bilibili.com/video/BV1GW411j7Ts
- 直觀DNS科普：https://www.bilibili.com/video/BV1F54y1R7BC
- 域名相關(guān)知識
- 域名解析完整講解：https://www.bilibili.com/video/BV1zA411x7Pj
- 云服務(wù)相關(guān)知識
- 揭秘阿里云服務(wù)器：https://www.bilibili.com/video/BV1Rt411u7k4
超文本標(biāo)記語言
（HTML）
- HTML基礎(chǔ)知識學(xué)習(xí)
- HTML全套基礎(chǔ)教程：https://www.bilibili.com/video/BV11t411K74Q
- HTML 編寫規(guī)則 和語義化寫法
- HTML 速成：https://www.bilibili.com/video/BV1vs411M7aT
- 表單和驗證
- html5表單驗證：https://www.bilibili.com/video/BV16K4y1Z7Gb
- 公約和最佳實踐方法
- 前端代碼規(guī)范秘籍：https://www.bilibili.com/video/BV19P4y147Jz
- SEO 基礎(chǔ)知識
- SEO優(yōu)化學(xué)習(xí)教程：https://www.bilibili.com/video/BV1fE411J7ya
層疊樣式表
（CSS)
- CSS 基礎(chǔ)知識學(xué)習(xí)
CSS3基礎(chǔ)教程：https://www.bilibili.com/video/BV1Bx411u7cS
- 頁面切圖和布局實現(xiàn)
浮動布局
定位布局
Display
display&visibility：https://www.bilibili.com/video/BV1HJ411M7CM
盒子模型
CSS盒子模型與定位：https://www.bilibili.com/video/BV1P7411G7BW
Grid 布局
Flex 布局
- 頁面響應(yīng)式布局設(shè)計
六個案例學(xué)會響應(yīng)式布局：https://www.bilibili.com/video/BV1ov411k7sm
瀏覽器腳本語言
(JavaScript)
- JavaScript基礎(chǔ)語法和知識
- JavaScript基礎(chǔ)語法：https://www.bilibili.com/video/BV1Sy4y1C7ha
- 使用JavaScript 操作 DOM元素
- JS必會的DOM BOM操作：https://www.bilibili.com/video/BV1k4411w7sV
- Ajax 異步請求相關(guān)知識學(xué)習(xí)
- Ajax入門到精通：https://www.bilibili.com/video/BV1WC4y1b78y
- ES6 以上版本 的JavaScript
- ES6-ES11新特性：https://www.bilibili.com/video/BV1uK411H7on
版本控制管理系統(tǒng)
Version Control System
- Git的基本用法
- 相關(guān)平臺/軟件的使用
GitHub
十分鐘學(xué)會Github：https://www.bilibili.com/video/BV1yo4y1d7UK
GitLab
gitlab使用說明：https://www.bilibili.com/video/BV11E411x7Uv
Gitee
這個看中文網(wǎng)址就可以了，目前B站還沒有很好的視頻介紹
網(wǎng)絡(luò)安全相關(guān)知識
Web Security Knowledge
- HTTPS 原理和使用
- 你連HTTPS原理都不懂：https://www.bilibili.com/video/BV1Up4y1i7PG
- CORS 跨域請求和安全知識
- 什么是CORS：https://www.bilibili.com/video/BV1Kt411E76z
- 內(nèi)容安全策略
- 網(wǎng)絡(luò)滲透：https://www.bilibili.com/video/BV1kh411W7Vv
- OWASP 安全風(fēng)險知識
- 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站沒有，推薦這個免費(fèi))
CSS 預(yù)處理 語言
CSS Preprocessors
- Sass
- SCSS從入門到實戰(zhàn)：https://www.bilibili.com/video/BV1Zg4y1v75U
- PostCSS
- B站沒太好的視頻，建議買書《深入PostCSS Web設(shè)計》
- Less
- 前端less教程：https://www.bilibili.com/video/BV1YW411T7vd
構(gòu)建工具
Build Tools
- 任務(wù)執(zhí)行命令 [Task Runners]
npm scripts
npm包管理應(yīng)用：https://www.bilibili.com/video/BV1Dv411W7XP
Gulp
- 打包工具
Webpack
Webpack從入門到精通：https://www.bilibili.com/video/BV1e7411j7T5
Parcel
- 代碼格式化工具
Prettier
Prettier和ESLint使用：https://www.bilibili.com/video/BV183411r7YK
ESLint
ESLint基礎(chǔ)入門：https://space.bilibili.com/390120104/search/video?keyword=ESLint
三大前端框架
Web Framework
- React.js
- React基礎(chǔ)視頻：https://www.bilibili.com/video/BV1g4411i7po
- React全家桶：https://www.bilibili.com/video/BV1wy4y1D7JT
- React實戰(zhàn)博客：https://www.bilibili.com/video/BV1CJ411377B
- React商城實戰(zhàn)：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基礎(chǔ)：https://www.bilibili.com/video/BV1Wx411R7qt
Web 組件化編程
Web Components
- HTML Templates
- Custom Elements
- Shadow DOM
- 概要: 此部分內(nèi)容沒有找到合適視頻
CSS 相關(guān)框架
CSS Frameworks
- BootStrap
- 一周學(xué)會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
服務(wù)端渲染
Server Side Rendering （SSR）
React.js
Next.js
Next.js入門教程：https://www.bilibili.com/video/BV13441117KK
GatsbyJS
GatsbyJS 實戰(zhàn)：https://www.bilibili.com/video/BV1i4411T7AR （英文）
Vue.js
Nuxt.js
Angular
Universal
圖形化編程
GraphQL
- Cocos Creator
- Cocos 圖形游戲開發(fā)：https://www.bilibili.com/video/BV1sA411Y7x4
- Three.js
- Three.js基礎(chǔ)教程-英文：https://www.bilibili.com/video/BV1ks411W78i
- Three.js教程：https://www.bilibili.com/video/BV1va4y1p7QB
靜態(tài)站點生成器
Static Site Generators
- Next.js
- Next.js入門教程：https://www.bilibili.com/video/BV13441117KK
- GatsbyJS
- GatsbyJS 實戰(zhàn)：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分鐘搭建個人網(wǎng)站：https://www.bilibili.com/video/BV1x64y117PX
移動App開發(fā)
Mobile Applications
- React Native
- ReactNatvie基礎(chǔ)：https://www.bilibili.com/video/BV1Eg4y16735
- ReactNatvie實戰(zhàn)：https://www.bilibili.com/video/BV15K411s75p
- UniApp
- Uni-App從入門到實戰(zhàn)：https://www.bilibili.com/video/BV1BJ411W7pX
- Uni-App美團(tuán)外賣：https://www.bilibili.com/video/BV1Zt4y117RR
- Flutter
- Flutter基礎(chǔ)：https://www.bilibili.com/video/BV15t411U7yf
- Flutter實戰(zhàn)：https://www.bilibili.com/video/BV1kt411B7mu
- Ionic
- Ionic入門：https://www.bilibili.com/video/BV1Ub41117q5
桌面應(yīng)用開發(fā)
Desktop Applications
- Electron
- Electron入門：https://www.bilibili.com/video/BV1QB4y1F722
- Electron基礎(chǔ)：https://www.bilibili.com/video/BV177411s7Lt
