前端知识图谱+B站资源整合 V1.0版本

发布于：2021-12-19 22:34:32

| 项目持续维护中.......

项目包含：脑图、png图片和md文档。方便你在不同场景下使用学习。 不仅是一个自学的前端路径，项目包括前端自学的路径+知识图谱+B站免费视频的整合。

| 视频说明：https://www.bilibili.com/video/BV1ub4y1h7ZY

你按照这个图谱学习前端，完全可以自学成功。

技术胖的前端学习路径

B站学习资源整合

网络知识

（Internet）

• 
  

1. 网络工作原理

• 计算机网络原理：https://www.bilibili.com/video/BV1xJ41137Q3

• 
  

1. 什么是HTTP

• HTTP协议详解：https://www.bilibili.com/video/BV1js411g7Fw

• 
  

1. 浏览器及工作方式

• 浏览器是如何运作的？：https://www.bilibili.com/video/BV1x54y1B7RE

• 
  

1. DNS 及其工作原理

• DNS基本工作原理：https://www.bilibili.com/video/BV1GW411j7Ts

• 直观DNS科普：https://www.bilibili.com/video/BV1F54y1R7BC

• 
  

1. 域名相关知识

• 域名解析完整讲解：https://www.bilibili.com/video/BV1zA411x7Pj

• 
  

1. 云服务相关知识

• 揭秘阿里云服务器：https://www.bilibili.com/video/BV1Rt411u7k4

超文本标记语言

（HTML）

• 
  

1. HTML基础知识学习

• HTML全套基础教程：https://www.bilibili.com/video/BV11t411K74Q

• 
  

1. HTML 编写规则 和语义化写法

• HTML 速成：https://www.bilibili.com/video/BV1vs411M7aT

• 
  

1. 表单和验证

• html5表单验证：https://www.bilibili.com/video/BV16K4y1Z7Gb

• 
  

1. 公约和最佳实践方法

• 前端代码规范秘籍：https://www.bilibili.com/video/BV19P4y147Jz

• 
  

1. 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

• 
  

1. 页面切图和布局实现

• 浮动布局

• 浮动布局：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

• 
  

1. 页面响应式布局设计

• 六个案例学会响应式布局：https://www.bilibili.com/video/BV1ov411k7sm

浏览器脚本语言

(JavaScript)

• 
  

1. JavaScript基础语法和知识

• JavaScript基础语法：https://www.bilibili.com/video/BV1Sy4y1C7ha

• 
  

1. 使用JavaScript 操作 DOM元素

• JS必会的DOM BOM操作：https://www.bilibili.com/video/BV1k4411w7sV

• 
  

1. Ajax 异步请求相关知识学习

• Ajax入门到精通：https://www.bilibili.com/video/BV1WC4y1b78y

• 
  

1. ES6 以上版本 的JavaScript

• ES6-ES11新特性：https://www.bilibili.com/video/BV1uK411H7on

版本控制管理系统

Version Control System

• 
  

1. Git的基本用法

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

• 
  

1. 相关平台/软件的使用

• 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

• 
  

1. CORS 跨域请求和安全知识

• 什么是CORS：https://www.bilibili.com/video/BV1Kt411E76z

• 
  

1. 内容安全策略

• 网络渗透：https://www.bilibili.com/video/BV1kh411W7Vv

• 
  

1. OWASP 安全风险知识

• OWASP TOP10：https://www.bilibili.com/video/BV1ey4y1V7Jj

包管理工具

Package Managers

• 
  

1. npm

• 包管理工具：https://www.bilibili.com/video/BV1Dv411W7XP

• 
  

1. yarn

• Yarn入门：https://www.imooc.com/learn/766 (B站没有，推荐这个免费)

CSS 预处理 语言

CSS Preprocessors

• 
  

1. Sass

• SCSS从入门到实战：https://www.bilibili.com/video/BV1Zg4y1v75U

• 
  

1. PostCSS

• B站没太好的视频，建议买书《深入PostCSS Web设计》

• 
  

1. 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

• 
  

1. 打包工具

• Webpack

• Webpack从入门到精通：https://www.bilibili.com/video/BV1e7411j7T5

• Parcel

• Parcel初体验：https://www.bilibili.com/video/BV1Pa4y147Kf

• 
  

1. 代码格式化工具

• 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

https://gitee.com/jishupang/web_atlas#%E6%A1%8C%E9%9D%A2%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91