知識地圖獲取網(wǎng)址

image.png

技術(shù)胖的前端學(xué)習(xí)路徑

B站學(xué)習(xí)資源整合

網(wǎng)絡(luò)知識

（Internet）

• 1. 網(wǎng)絡(luò)工作原理
• 計算機(jī)網(wǎng)絡(luò)原理：https://www.bilibili.com/video/BV1xJ41137Q3
• 2. 什么是HTTP
• HTTP協(xié)議詳解：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. 域名相關(guān)知識
• 域名解析完整講解：https://www.bilibili.com/video/BV1zA411x7Pj
• 6. 云服務(wù)相關(guān)知識
• 揭秘阿里云服務(wù)器：https://www.bilibili.com/video/BV1Rt411u7k4

超文本標(biāo)記語言

（HTML）

• 1. HTML基礎(chǔ)知識學(xué)習(xí)
• HTML全套基礎(chǔ)教程：https://www.bilibili.com/video/BV11t411K74Q
• 2. HTML 編寫規(guī)則 和語義化寫法
• HTML 速成：https://www.bilibili.com/video/BV1vs411M7aT
• 3. 表單和驗證
• html5表單驗證：https://www.bilibili.com/video/BV16K4y1Z7Gb
• 4. 公約和最佳實踐方法
• 前端代碼規(guī)范秘籍：https://www.bilibili.com/video/BV19P4y147Jz
• 5. SEO 基礎(chǔ)知識
• SEO優(yōu)化學(xué)習(xí)教程：https://www.bilibili.com/video/BV1fE411J7ya

層疊樣式表

（CSS)

• 1. CSS 基礎(chǔ)知識學(xué)習(xí)

• CSS3基礎(chǔ)教程：https://www.bilibili.com/video/BV1Bx411u7cS

• CSS3全套教程：https://www.bilibili.com/video/BV1et411q74F

• 2. 頁面切圖和布局實現(xiàn)

• 浮動布局

• 浮動布局：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. 頁面響應(yīng)式布局設(shè)計

• 六個案例學(xué)會響應(yīng)式布局：https://www.bilibili.com/video/BV1ov411k7sm

瀏覽器腳本語言

(JavaScript)

• 1. JavaScript基礎(chǔ)語法和知識
• JavaScript基礎(chǔ)語法：https://www.bilibili.com/video/BV1Sy4y1C7ha
• 2. 使用JavaScript 操作 DOM元素
• JS必會的DOM BOM操作：https://www.bilibili.com/video/BV1k4411w7sV
• 3. Ajax 異步請求相關(guān)知識學(xué)習(xí)
• Ajax入門到精通：https://www.bilibili.com/video/BV1WC4y1b78y
• 4. ES6 以上版本 的JavaScript
• ES6-ES11新特性：https://www.bilibili.com/video/BV1uK411H7on

版本控制管理系統(tǒng)

Version Control System

• 1. Git的基本用法

• Git最新教程：https://www.bilibili.com/video/BV1FE411P7B3

• 2. 相關(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

• 1. HTTPS 原理和使用
• 你連HTTPS原理都不懂：https://www.bilibili.com/video/BV1Up4y1i7PG
• 2. CORS 跨域請求和安全知識
• 什么是CORS：https://www.bilibili.com/video/BV1Kt411E76z
• 3. 內(nèi)容安全策略
• 網(wǎng)絡(luò)滲透：https://www.bilibili.com/video/BV1kh411W7Vv
• 4. OWASP 安全風(fēng)險知識
• 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 預(yù)處理 語言

CSS Preprocessors

• 1. Sass
• SCSS從入門到實戰(zhàn)：https://www.bilibili.com/video/BV1Zg4y1v75U
• 2. PostCSS
• B站沒太好的視頻已亥，建議買書《深入PostCSS Web設(shè)計》
• 3. Less
• 前端less教程：https://www.bilibili.com/video/BV1YW411T7vd

構(gòu)建工具

Build Tools

• 1. 任務(wù)執(zhí)行命令 [Task Runners]

• npm scripts

• npm包管理應(yīng)用：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基礎(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

• Nuxt.js入門：https://www.bilibili.com/video/BV1Xt41117Kg

• 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