大前端学习路线图（附视频及源码）

万般皆下品，唯有学习高；

这是一篇非常详细的且经典的前端学习路线图

下面会按顺序分模块给大家展示学习内容，让大家学习的时候有成就感，学习更平滑；

 

第一阶段：PC端页面制作与动画特效

学完第一阶段就可以配合UI设计师进行项目开发完成pc端网页的布局制作与样式设计实现。

一、html+css搭建页面

• 1. HTML语义化标签
• 2. Html标签规范
• 3. Css样式基础
• 4. Css高级及布局方案

二、PhotoShop切图流程

• 1. Photoshop基本使用
• 2. 了解各种图片格式及优缺点
• 3. 图片切图流程
• 4. PSD格式源文件切图流程
• 5. 设计图转页面布局实际操作

三、Css3动画特效

• 1. Transition过渡
• 2. Transform变形
• 3. Animation动画
• 4. 3D特效制作

第二阶段：移动端页面制作与响应式实现

这一阶段主要是移动端网页的布局制作与样式设计实现。可以适配各种手机尺寸，并能利用响应式惊醒移动端与PC端适配。

一、移动端概念与布局

1. 移动端概念，如：PPI、像素比

2. Viewport视口

3. 移动端适配方案

4. 移动端尺寸单位，如：rem、vw

5. 移动端布局实际操作

二、响应式设计与实现

1. 媒体查询@media

2. Flex弹性盒模型

3. 移动端常见设备尺寸

4. 移动端交互实现

配套的学习视频：

2019Web前端从入门到精通（HTML+CSS全套）

配套资源：

https://pan.baidu.com/s/1Pd932pPEKYMNCW2n4pUOZw

第三阶段JavaScript与jQuery开发

这一阶段是重中之重，这一阶段主要是页面行为交互，实现网站中常见特效，如：轮播图、选项卡、拖拽。并能配合UI和后端进行项目开发；

一、JavaScript开发

1. DOM、BOM、事件

2. 面向对象、算法、动画

3. Ajax、前后端通信原理

4. 闭包、设计模式、错误处理

5. 常见特效制作及整站交互实现

配套学习视频：

JavaScript基础入门教程全集（强烈推荐）

配套资源：

https://pan.baidu.com/s/1vPYD82mB_AkBVB2q2Mk7qw 提取码：dbch

二、jQuery开发

1. jQuery核心思想及特性

2. jQuery常见方法及使用

3. jquery插件制作与jqueryUI组件使用

4. 4、编写常见特效及jQuery源码分析

配套学习视频：

jQuery入门教程全集（看过最详细的）

配套资源：

https://pan.baidu.com/s/1R2n67Io55MgRKptsAO_7Lg

三、项目：纯原生前端技术打造仿小米电商网站视频

配套学习视频：

纯原生前端技术打造仿小米电商网站视频

配套资料：

https://pan.baidu.com/s/1FopIvpNgUJZEfZ61jkrAWA 提取码：ykpg

第四阶段：H5高级框架技术开发；

这一阶段是现在公司开发中常用的框架，这一阶段学完就可以利用框架开发项目，实现单页面应用开发。可以完成复杂的数据交互应用场景。具备独立开大项目的能力。

一、Vue框架开发及项目

1、Vue基础教程

a) Vue组件与Vue生命周期

b) 单文件组件与脚手架搭建

c) Vue路由

d) Vuex状态管理

e) Nuxt服务端渲染

f) 基于Vue的UI组件库

配套学习视频：

Vue全套教程全开源（强烈推荐）

配套资源：

https://pan.baidu.com/s/1ykVWPDQjKhQgkibHZ3cdhQ 提取码：1zvr

二、Vue项目：

配套学习视频：

Vue实战项目之喵喵电影

配套资源：Vue实战项目之喵喵电影https://pan.baidu.com/s/1HwOnFtgY_j7KzcCCPWbaQw

三、Vue常见问题讲解：

配套学习视频：

Vue.js常见问题讲解

配套资源：

https://pan.baidu.com/s/1kBLiKL2lwS9d08TCc0WIkw 提取码：3la7

二、React框架开发

1、 React基础教程

a) JSX语法与Hooks新特性

b) React路由

c) Redux状态管理

d) Next服务端渲染

e) 基于React的UI组件库

配套学习视频：

React入门到大神

配套资源：

https://pan.baidu.com/s/18j0EtU7pLlcd1jMlDDSNBg 提取码：vvur

第五阶段：全栈前后端技术开发

学好了这个阶段的技术恭喜你就能进行前后端全栈式开发了，能独立完成一个中小型项目的前后台。

一、Nodejs技术

1. Node内置API

2. Node文件操作与服务器搭建

3. Express框架与KOA框架

4. Mongodb数据库

5. Npm的功能使用

二、其他后端技术

1. 初始Java或PHP语言

2. 表达式与数据类型

3. 语句结构与数组

4. 类与对象

5. this、static属性、方法

6. 抽象类、接口与多态

配套学习视频：

Node.JS入门到大神

配套资源：

https://pan.baidu.com/s/13FCVc68ZnFdMhHkZtN1f7g 提取码：hp2l

三、NodeJS+Express+MongoDB实战项目

配套学习视频：

NodeJS+Express+MongoDB实战项目

配套资源：

https://pan.baidu.com/s/1YfcorhIR9etRJ_vxsvy0ig

第六阶段：混合应用技术开发

一、React Native技术

1. RN开发环境准备与基础组件介绍

2. 多组件集成应用实现TodoList

3. 引入路由，通用模块及列表页面布局

4. RN内置API详解

5. RN内置组件与项目上线流程

二、微信小程序开发

1. 小程序组件

2. 小程序API

3. 小程序云函数

4. Wepy小程序开发框架

5. MpVUe小程序开发框架

配套学习视频：

轻松玩转微信小程序开发

配套资料

https://pan.baidu.com/s/17IabhW0SWHnFhiZ3mDCduw

三、小程序项目

配套视频教程：

小程序全栈开发之喵喵交友

配套资料：

https://pan.baidu.com/s/1ggShoLPpbryYc8oKbL1rCQ 提取码：dlib

四、Mpvue小程序框架

配套视频教程：

小程序框架Mpvue入门教程

配套资料：

小程序框架Mpvue入门教程（全开源） https://pan.baidu.com/s/1g_l9NEXISlgQq2DRSvTCsQ

第七阶段：H5大前端技术开发

一、数据可视化技术

1. 数据可视化基础

2. Echars、Hignchars

3. D3.js入门

4. D3,js进阶

5. D3.js选择集与数据

6. D3.js高级应用

7. D3,js应用工具：NVD3、N3-chars

二、Flutter技术

1. 界面结构与基础部件

2. 布局与表单

3. Dart语法

4. Widgets容器

5. 网络请求与路由

配套视频教程：

最新Flutter全套视频

配套资源：

https://pan.baidu.com/s/1Zvj164kzdUy3KrUvNU0s-A

三、Electron技术

1. Electron入门

2. Electron调试技巧

3. Electron核心API

4. Electron与React、vue集成开发

5. 构建Windows、mac应用

配套视频教程：

Electron-HTML+CSS+JS构建跨平台桌面应用程序

配套资源：

https://pan.baidu.com/s/1zS8Gr_lnKn8DNlQVB1JcHA 提取码：5wt8

第八阶段：H5架构技术

一、开发工具集服务器技术

1. 掌握Webpack等工具搭建项目

2. Git工具及github管理

3. 阿里云ECS：Linux服务器

4. Nginx：Web服务器

5. Docker：容器化应用

6. Serverless：无服务器技术

配套视频教程：

最新Webpack4.0教程

配套资料：

https://pan.baidu.com/s/1V9kX7e8-FCjVrmUDzL9A-Q 提取码：etxn

二、安全及性能优化

1. 前端攻击demo详解

2. 前端监控异常

3. 测试前端代码线上的实际性能

4. SEO：搜索引擎优化

5. Chrome中的高级调试功能