跳转到内容
笔记本

❧ 前端学习路径

学习重要程度说明

红色-精通:非常重要，需要达到精通、并有实战经验

蓝色-熟练:需要达到熟练，达到一定的基础练习量

灰色-了解:需要了解，把整个课程听完，作几个小练习即可

网络知识（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. 页面切图和布局实现

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. 相关平台/软件的使用

网络安全相关知识(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]

2. 打包工具

3. 代码格式化工具

三大前端框架(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

Vue.js

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