DDDHL - 樱花树下

B站前端路线资源整合

2022/1/15 资源

# 网络知识

（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

# 学到此处，基础部分学习已经全部完成。

# 学习重要程度说明

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

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

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

# 视频学习地址：复制后浏览器打开就可以学习

Last Updated: 2022/6/30 11:59:33