前端档案

# 大前端学习路径 + B站资源整合

| V1.0版本 项目持续维护中.......

项目包含：脑图、png图片和md文档。方便你在不同场景下使用学习。 不仅是一个自学的前端路径，项目包括前端自学的路径+知识图谱+B站免费视频的整合。

你按照这个图谱学习前端，完全可以自学成功。

学习重要程度说明

- 红色-精通：非常重要，需要达到精通、并有实战经验
- 蓝色-熟练：需要达到熟练，达到一定的基础练习量
- 灰色-了解：需要了解，把整个课程听完，作几个小练习即可

# 网络知识（Internet）

# 1. 网络工作原理

# 2. 什么是HTTP

# 3. 浏览器及工作方式

# 4. DNS 及其工作原理

# 5. 域名相关知识

# 6. 云服务相关知识

# 超文本标记语言

（HTML）

# 1. HTML基础知识学习

# HTML全套基础教程：https://www.bilibili.com/video/BV11t411K74Q (opens new window)

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

# HTML 速成：https://www.bilibili.com/video/BV1vs411M7aT (opens new window)

# 3. 表单和验证

# html5表单验证：https://www.bilibili.com/video/BV16K4y1Z7Gb (opens new window)

# 4. 公约和最佳实践方法

# 前端代码规范秘籍：https://www.bilibili.com/video/BV19P4y147Jz (opens new window)

# 5. SEO 基础知识

# SEO优化学习教程：https://www.bilibili.com/video/BV1fE411J7ya (opens new window)

# 层叠样式表

（CSS)

# 1. CSS 基础知识学习

# CSS3基础教程：https://www.bilibili.com/video/BV1Bx411u7cS (opens new window)

# CSS3全套教程：https://www.bilibili.com/video/BV1et411q74F (opens new window)

# 2. 页面切图和布局实现

# 3. 页面响应式布局设计

# 六个案例学会响应式布局：https://www.bilibili.com/video/BV1ov411k7sm (opens new window)

# 浏览器脚本语言

(JavaScript)

# 1. JavaScript基础语法和知识

# JavaScript基础语法：https://www.bilibili.com/video/BV1Sy4y1C7ha (opens new window)

# 2. 使用JavaScript 操作 DOM元素

# JS必会的DOM BOM操作：https://www.bilibili.com/video/BV1k4411w7sV (opens new window)

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

# Ajax入门到精通：https://www.bilibili.com/video/BV1WC4y1b78y (opens new window)

# 4. ES6 以上版本 的JavaScript

# ES6-ES11新特性：https://www.bilibili.com/video/BV1uK411H7on (opens new window)

# 版本控制管理系统

Version Control System

# 1. Git的基本用法

# Git最新教程：https://www.bilibili.com/video/BV1FE411P7B3 (opens new window)

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

# 网络安全相关知识

Web Security Knowledge

# 1. HTTPS 原理和使用

# 你连HTTPS原理都不懂：https://www.bilibili.com/video/BV1Up4y1i7PG (opens new window)

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

# 什么是CORS：https://www.bilibili.com/video/BV1Kt411E76z (opens new window)

# 3. 内容安全策略

# 网络渗透：https://www.bilibili.com/video/BV1kh411W7Vv (opens new window)

# 4. OWASP 安全风险知识

# OWASP TOP10：https://www.bilibili.com/video/BV1ey4y1V7Jj (opens new window)

# 包管理工具

Package Managers

# 1. npm

# 包管理工具：https://www.bilibili.com/video/BV1Dv411W7XP (opens new window)

# 2. yarn

# Yarn入门：https://www.imooc.com/learn/766 (opens new window) (B站没有，推荐这个免费)

# CSS 预处理 语言

CSS Preprocessors

# 1. Sass

# SCSS从入门到实战：https://www.bilibili.com/video/BV1Zg4y1v75U (opens new window)

# 2. PostCSS

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

# 3. Less

# 前端less教程：https://www.bilibili.com/video/BV1YW411T7vd (opens new window)

# 构建工具

Build Tools

# 1. 任务执行命令

[Task Runners]

# 2. 打包工具

# 3. 代码格式化工具

# 三大前端框架

Web Framework

# React.js

# React基础视频：https://www.bilibili.com/video/BV1g4411i7po (opens new window)

# React全家桶：https://www.bilibili.com/video/BV1wy4y1D7JT (opens new window)

# React实战博客：https://www.bilibili.com/video/BV1CJ411377B (opens new window)

# React商城实战：https://www.bilibili.com/video/BV1i5411c7xp (opens new window)

# Vue.js

# Vue2全家桶：https://www.jspang.com/detailed?id=57 (opens new window)

# Vue3全家桶：https://www.jspang.com/detailed?id=67 (opens new window)

# vuejs从入门到精通：https://www.bilibili.com/video/BV1Zy4y1K7SH (opens new window)

# Angular

# Angular基础：https://www.bilibili.com/video/BV1Wx411R7qt (opens new window)

# Web 组件化编程

Web Components

# HTML Templates

# Custom Elements

# Shadow DOM

# 概要: 此部分内容没有找到合适视频

# CSS 相关框架

CSS Frameworks

# BootStrap

# 一周学会BootStrap：https://www.bilibili.com/video/BV1Lx411v73k (opens new window)

# Material UI

# Material UI入门教程：https://www.bilibili.com/video/BV12J411s75b (opens new window)

# Materialize CSS

# Materialize CSS Crash Course：https://www.bilibili.com/video/BV1gx411h7Y5 (opens new window)

# ReactStrap

# JavaScript 语法糖

Type Checkers

# TypeScript

# TypeScript从入门到精通：https://www.bilibili.com/video/BV1qV41167VD (opens new window)

# Flow

# 服务端渲染

Server Side Rendering （SSR）

# React.js

# Vue.js

# Angular

  • Universal

# 图形化编程

GraphQL

# Cocos Creator

# Cocos 图形游戏开发：https://www.bilibili.com/video/BV1sA411Y7x4 (opens new window)

# Three.js

# Three.js基础教程-英文：https://www.bilibili.com/video/BV1ks411W78i (opens new window)

# Three.js教程：https://www.bilibili.com/video/BV1va4y1p7QB (opens new window)

# 静态站点生成器

Static Site Generators

# Next.js

# Next.js入门教程：https://www.bilibili.com/video/BV13441117KK (opens new window)

# GatsbyJS

# GatsbyJS 实战：https://www.bilibili.com/video/BV1i4411T7AR (opens new window) （英文）

# Nuxt.js

# Nuxt.js入门：https://www.bilibili.com/video/BV1Xt41117Kg (opens new window)

# Vuepress

# Vuepress入门到精通：https://www.bilibili.com/video/BV1vb411m7NY (opens new window)

# Hugo

# 10分钟搭建个人网站：https://www.bilibili.com/video/BV1x64y117PX (opens new window)

# 移动App开发

Mobile Applications

# React Native

# ReactNatvie基础：https://www.bilibili.com/video/BV1Eg4y16735 (opens new window)

# ReactNatvie实战：https://www.bilibili.com/video/BV15K411s75p (opens new window)

# UniApp

# Uni-App从入门到实战：https://www.bilibili.com/video/BV1BJ411W7pX (opens new window)

# Uni-App美团外卖：https://www.bilibili.com/video/BV1Zt4y117RR (opens new window)

# Flutter

# Flutter基础：https://www.bilibili.com/video/BV15t411U7yf (opens new window)

# Flutter实战：https://www.bilibili.com/video/BV1kt411B7mu (opens new window)

# Ionic

# Ionic入门：https://www.bilibili.com/video/BV1Ub41117q5 (opens new window)

# 桌面应用开发

Desktop Applications

# Electron

# Electron入门：https://www.bilibili.com/video/BV1QB4y1F722 (opens new window)

# Electron基础：https://www.bilibili.com/video/BV177411s7Lt (opens new window)

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

更新时间: 12/1/2021, 4:31:04 PM

HTML →