大前端的学习路径转自b站up主技术胖

感谢技术胖up主的推荐能够更加有效率的学习

浮动布局
浮动布局：【HTML网页制作教程】-页面布局-浮动布局_哔哩哔哩_bilibili
定位布局
CSS定位布局：动画解释CSS定位布局-Static, Relative, Absolute, Fixed, Sticky, 五大定位模式实现自由布局_哔哩哔哩_bilibili
Display
display&visibility：5_display&visibility_哔哩哔哩_bilibili
盒子模型
CSS盒子模型与定位：css小白入门编程课程 —— css盒子模型与定位_哔哩哔哩_bilibili
Grid 布局
如何用grid：css grid布局实例讲解，手把手教你如何用grid一步步去写页面_哔哩哔哩_bilibili
Flex 布局
Flex伸缩布局：黑马2019pink老师Flex伸缩布局_哔哩哔哩_bilibili

(JavaScript)

Version Control System

GitHub
十分钟学会Github：GitHub 到底怎么用？十分钟学会 GitHub 基础知识_哔哩哔哩_bilibili
GitLab
gitlab使用说明：叮～，你收到一份最全的gitlab使用说明_哔哩哔哩_bilibili
Gitee
这个看中文网址就可以了，目前B站还没有很好的视频介绍

Web Security Knowledge

Package Managers

CSS Preprocessors

[Task Runners]

npm scripts
npm包管理应用：https://www.bilibili.com/video/BV1Dv411W7XP
Gulp
Gulp入门：千锋教育_JS项目构建工具Gulp入门全套教程_哔哩哔哩_bilibili

Webpack
Webpack从入门到精通：尚硅谷新版Webpack5实战教程(从入门到精通)_哔哩哔哩_bilibili
Parcel
Parcel初体验：Parcel & Preact 初体验_哔哩哔哩_bilibili

Prettier
Prettier和ESLint使用：【建议收藏】全网最全的讲清eslint和prettier关系的视频！！！前端开发的利器！！！_哔哩哔哩_bilibili
ESLint
ESLint基础入门：colin3dmax的个人空间_哔哩哔哩_Bilibili

Web Framework

Web Components

CSS Frameworks

Type Checkers

Server Side Rendering （SSR）

Next.js
Next.js入门教程：React服务端渲染框架Next.js入门教程_哔哩哔哩_bilibili
GatsbyJS
GatsbyJS 实战：建立一个火爆的快速网站与 GatsbyJS 和内容_哔哩哔哩_bilibili （英文）

Nuxt.js
Nuxt.js入门：Nuxt.js免费视频教程开启SSR渲染_哔哩哔哩_bilibili

Universal

Static Site Generators

Mobile Applications

Desktop Applications

大前端的学习路径 转自b站up主技术胖

1. 网络工作原理

计算机网络原理：视频去哪了呢？_哔哩哔哩_bilibili

2. 什么是HTTP

HTTP协议详解：HTTP协议详解_哔哩哔哩_bilibili

3. 浏览器及工作方式

浏览器是如何运作的？：【干货】浏览器是如何运作的？_哔哩哔哩_bilibili

4. DNS 及其工作原理

DNS基本工作原理：DNS基本工作原理、配置使用_哔哩哔哩_bilibili

直观DNS科普：超直观的DNS科普，一个视频搞懂DNS是啥，是怎么运作的_哔哩哔哩_bilibili

5. 域名相关知识

域名解析完整讲解：域名解析完整讲解视频课程_哔哩哔哩_bilibili

6. 云服务相关知识

揭秘阿里云服务器：【黑马程序员】揭秘阿里云服务器_哔哩哔哩_bilibili

超文本标记语言

1. HTML基础知识学习

HTML全套基础教程：HTML全套基础教程-html实战开发-深入浅出HTML_哔哩哔哩_bilibili

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

HTML 速成：为初学者准备的：HTML 速成_哔哩哔哩_bilibili

3. 表单和验证

html5表单验证：html5表单验证系列课程_哔哩哔哩_bilibili

4. 公约和最佳实践方法

前端代码规范秘籍：9个前端代码规范秘籍 让你也能写出诗一样的代码_哔哩哔哩_bilibili

5. SEO 基础知识

SEO优化学习教程：【全套SEO优化学习教程】从SEO是什么到网站优化排名_哔哩哔哩_bilibili

层叠样式表

1. CSS 基础知识学习

CSS3基础教程：黑马程序员前端CSS3基础教程，前端必备基础_哔哩哔哩_bilibili

CSS3全套教程：CSS3免费视频教程_哔哩哔哩_bilibili

2. 页面切图和布局实现

3. 页面响应式布局设计

六个案例学会响应式布局：六个案例学会响应式布局_哔哩哔哩_bilibili

浏览器脚本语言

1. JavaScript基础语法和知识

JavaScript基础语法：JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续_哔哩哔哩_bilibili

2. 使用JavaScript 操作 DOM元素

JS必会的DOM BOM操作：黑马程序员JavaScript核心教程，前端基础教程，JS必会的DOM BOM操作_哔哩哔哩_bilibili

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

Ajax入门到精通：【尚硅谷】3小时Ajax入门到精通_哔哩哔哩_bilibili

4. ES6 以上版本 的JavaScript

ES6-ES11新特性：尚硅谷Web前端ES6教程，涵盖ES6-ES11_哔哩哔哩_bilibili

版本控制管理系统

1. Git的基本用法

Git最新教程：【狂神说Java】Git最新教程通俗易懂_哔哩哔哩_bilibili

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

网络安全相关知识

1. HTTPS 原理和使用

你连HTTPS原理都不懂：你连HTTPS原理都不懂，还给我讲“中间人攻击”?_哔哩哔哩_bilibili

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

什么是CORS：【跨域请求】【前端】什么是CORS，教你解决跨域问题_哔哩哔哩_bilibili

3. 内容安全策略

网络渗透：学完能渗透色情网站，净化网络空间【网络安全】持续更新~_哔哩哔哩_bilibili

4. OWASP 安全风险知识

OWASP TOP10：【实操教学】OWASP TOP10 网络渗透测试系列课程_哔哩哔哩_bilibili

包管理工具

1. npm

包管理工具：【NPM】包管理工具 #node package manager_哔哩哔哩_bilibili

2. yarn

Yarn入门：Yarn构建工具入门基础_视频教程-慕课网 (B站没有，推荐这个免费)

CSS 预处理 语言

1. Sass

SCSS从入门到实战：SCSS从入门到实战_哔哩哔哩_bilibili

2. PostCSS

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

3. Less

前端less教程：尚硅谷前端less教程_哔哩哔哩_bilibili

构建工具

1. 任务执行命令

2. 打包工具

3. 代码格式化工具

三大前端框架

React.js

React基础视频：React16免费基础视频教程_哔哩哔哩_bilibili

React全家桶：尚硅谷React技术全家桶全套完整版（零基础入门到精通/男神天禹老师亲授）_哔哩哔哩_bilibili

React实战博客：React实战技术博客系统_哔哩哔哩_bilibili

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从入门到精通：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili

大前端的学习路径转自b站up主技术胖

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

前端代码规范秘籍：9个前端代码规范秘籍让你也能写出诗一样的代码_哔哩哔哩_bilibili

4. ES6 以上版本的JavaScript

CSS 预处理语言

Angular基础：某马Angular 39(全) 学到这里就会感觉自己离大佬越来越近了嘿嘿_哔哩哔哩_bilibili

Material UI入门教程：react.js & material-ui 入门中文教程全_哔哩哔哩_bilibili

Nuxt.js入门：Nuxt.js免费视频教程开启SSR渲染_哔哩哔哩_bilibili