Skip to content
山不让尘，川不辞盈
搜索 K
Main Navigation 主页闲聊关于
实用网页
工具插件

Appearance

Sidebar Navigation

pages

实用网页

推荐

闲聊

关于我

2024

vitepress博客搭建

2023

现阶段AI建站工具简析

2022

快速搭建Electron桌面应用

Node.js 笔记

el-table懒加载局部更新

uniapp 小程序自定义顶部标题

JS 代码编写优化

十个常用工具库

前端常用的响应式布局方法

Vue 面试知识点

JavaScript 手写方法

B站前端路线资源整合

Vue 组件间通信的6种方式

TypeScript 基础知识点笔记

2021

JavaScript 面试知识点

LeeCode 笔记

axios简单封装

Vue3 笔记

Vue2 笔记

JavaScript 笔记

Git 常用命令

JavaScript DOM 常用知识点

vscode 插件推荐

ES6模块化

请求与跨域

CSS 图片处理技巧

文章目录

B站前端路线资源整合 ​

阅读时间:

9

分钟
文章字数:

2k

字
发布日期:

2022-01-15

最近更新:

2024-11-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. 页面切图和布局实现 ​

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

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

  • 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

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]

  • npm scripts
  • npm 包管理应用：https://www.bilibili.com/video/BV1Dv411W7XP
  • Gulp
  • Gulp 入门：https://www.bilibili.com/video/BV1yA411s72G

2. 打包工具 ​

  • Webpack
  • Webpack 从入门到精通：https://www.bilibili.com/video/BV1e7411j7T5
  • Parcel
  • Parcel 初体验：https://www.bilibili.com/video/BV1Pa4y147Kf

3. 代码格式化工具 ​

  • 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

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

学习重要程度说明 ​

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

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

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

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

Pager
上一篇JavaScript 手写方法
下一篇Vue 组件间通信的6种方式
本站总访问量 -- 次 本站访客数 -- 人次

前端狗都不如 © 2021-2024 holden