前端学习路径

Posted 2025-03-27 Updated 2025-03- 27

By Administrator

21~28 min read

前端学习路径
- 网络知识（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

个人规划, 技术栈

License: CC BY 4.0