| 项目持续维护中.......
项目包含:脑图、png图片和md文档。方便你在不同场景下使用学习。 不仅是一个自学的前端路径,项目包括前端自学的路径+知识图谱+B站免费视频的整合。
| 视频说明:https://www.bilibili.com/video/BV1ub4y1h7ZY
你按照这个图谱学习前端,完全可以自学成功。
B站学习资源整合
(Internet)
网络工作原理
计算机网络原理:https://www.bilibili.com/video/BV1xJ41137Q3
什么是HTTP
HTTP协议详解:https://www.bilibili.com/video/BV1js411g7Fw
浏览器及工作方式
浏览器是如何运作的?:https://www.bilibili.com/video/BV1x54y1B7RE
DNS 及其工作原理
DNS基本工作原理:https://www.bilibili.com/video/BV1GW411j7Ts
直观DNS科普:https://www.bilibili.com/video/BV1F54y1R7BC
域名相关知识
域名解析完整讲解:https://www.bilibili.com/video/BV1zA411x7Pj
云服务相关知识
揭秘阿里云服务器:https://www.bilibili.com/video/BV1Rt411u7k4
(HTML)
HTML基础知识学习
HTML全套基础教程:https://www.bilibili.com/video/BV11t411K74Q
HTML 编写规则 和语义化写法
HTML 速成:https://www.bilibili.com/video/BV1vs411M7aT
表单和验证
html5表单验证:https://www.bilibili.com/video/BV16K4y1Z7Gb
公约和最佳实践方法
前端代码规范秘籍:https://www.bilibili.com/video/BV19P4y147Jz
SEO 基础知识
SEO优化学习教程:https://www.bilibili.com/video/BV1fE411J7ya
(CSS)
CSS 基础知识学习
CSS3基础教程:https://www.bilibili.com/video/BV1Bx411u7cS
CSS3全套教程:https://www.bilibili.com/video/BV1et411q74F
页面切图和布局实现
浮动布局
浮动布局: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
页面响应式布局设计
六个案例学会响应式布局:https://www.bilibili.com/video/BV1ov411k7sm
(JavaScript)
JavaScript基础语法和知识
JavaScript基础语法:https://www.bilibili.com/video/BV1Sy4y1C7ha
使用JavaScript 操作 DOM元素
JS必会的DOM BOM操作:https://www.bilibili.com/video/BV1k4411w7sV
Ajax 异步请求相关知识学习
Ajax入门到精通:https://www.bilibili.com/video/BV1WC4y1b78y
ES6 以上版本 的JavaScript
ES6-ES11新特性:https://www.bilibili.com/video/BV1uK411H7on
Version Control System
Git的基本用法
Git最新教程:https://www.bilibili.com/video/BV1FE411P7B3
相关平台/软件的使用
GitHub
十分钟学会Github:https://www.bilibili.com/video/BV1yo4y1d7UK
GitLab
gitlab使用说明:https://www.bilibili.com/video/BV11E411x7Uv
Gitee
这个看中文网址就可以了,目前B站还没有很好的视频介绍
Web Security Knowledge
HTTPS 原理和使用
你连HTTPS原理都不懂:https://www.bilibili.com/video/BV1Up4y1i7PG
CORS 跨域请求和安全知识
什么是CORS:https://www.bilibili.com/video/BV1Kt411E76z
内容安全策略
网络渗透:https://www.bilibili.com/video/BV1kh411W7Vv
OWASP 安全风险知识
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站没有,推荐这个免费)
CSS Preprocessors
Sass
SCSS从入门到实战:https://www.bilibili.com/video/BV1Zg4y1v75U
PostCSS
B站没太好的视频,建议买书《深入PostCSS Web设计》
Less
前端less教程:https://www.bilibili.com/video/BV1YW411T7vd
Build Tools
任务执行命令 [Task Runners]
npm scripts
npm包管理应用:https://www.bilibili.com/video/BV1Dv411W7XP
Gulp
Gulp入门:https://www.bilibili.com/video/BV1yA411s72G
打包工具
Webpack
Webpack从入门到精通:https://www.bilibili.com/video/BV1e7411j7T5
Parcel
Parcel初体验:https://www.bilibili.com/video/BV1Pa4y147Kf
代码格式化工具
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 Components
HTML Templates
Custom Elements
Shadow DOM
概要: 此部分内容没有找到合适视频
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
Type Checkers
TypeScript
TypeScript从入门到精通:https://www.bilibili.com/video/BV1qV41167VD
Flow
Server Side Rendering (SSR)
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
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
Vuepress
Vuepress入门到精通:https://www.bilibili.com/video/BV1vb411m7NY
Hugo
10分钟搭建个人网站:https://www.bilibili.com/video/BV1x64y117PX
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
一片空白 5.8万
父爱如山,不善表达。回想十多年前,总记得父亲有个宽厚的肩膀,小小的自己跨坐在上面,越过人山人海去看更广阔的天空,那个时候期望自己有一双翅膀,能够像鸟儿一样飞得高,看得远。虽然父亲有时会和自己开玩笑,但在做错事的时候会受到严厉的训斥。父亲有双粗糙的大手掌。