2020全新零基础WEB前端学习路线（含视频教程）

1. 基础（前端页面重构）

对于web前端学习小白来说，html+css基础尤为重要，可以说是编程小白的必经之路，学完后能写出你看到的静态页面。

1）PC端网站布局

包含知识点： HTML基础，CSS基础，CSS核心属性；CSS样式层叠，继承，盒模型；容器，溢出及元素类型；浏览器兼容与宽高自适应……

2）HTML5+CSS3基础

包含知识点： HTML5新增的元素与属性；表单域增强元素；CSS3选择器；文字字体相关样式；CSS3位移与变形处理……

3）WebApp页面布局

包含知识点： 移动端页面设计规范； 移动端切图； 流式布局（100%布局）； 等比缩放布局（rem布局）；响应式布局； 淘宝移动端页面适配方案……

学习视频教程：

Web前端初识与职业发展
配套学习资料： https://pan.baidu.com/s/18iC3TEGV50WDdoyZm7h9-Q
Web前端从入门到精通（HTML+CSS全套）
配套学习资料： https://pan.baidu.com/s/1Pd932pPEKYMNCW2n4pUOZw

2. JavaScript高级程序设计

本阶段主要针对，想要学习前端以及全栈开发工程师的，0 基础入门学员。教程集合了图文、视频、代码、项目所有内容， 让你全方位立体式的进行 JavaScript 的学习。

可以让你在 40 天内完成从新手到大师的成长。学习完成本课程以后，可以具有编写类似于小米、华为等 PC 端电商网站的能力。

1）原生JavaScript交互功能开发

包含知识点：基本语法；循环语句；函数与数组；String与Date；BOM与DOM；事件；拖拽效果；cookie存储；正则表达式；Ajax；面向对象基础；运动与游戏开发……

2）面向对象进阶与ES5/ES6/ES7应用

包含知识点：Promise；设计模式（观察者模式等）；原型链；构造函数；执行上下文栈与执行上下文；变量对象与活动对象；作用域链；闭包；this；ES5； ES6； ES7……

3）JavaScript工具库自主研发

包含知识点：DOM库；事件库；AJAX库；原型和继承库；MVVM核心库；基于SPA的路由库……

学习视频教程：

2020版JavaScript基础入门教程全集（强烈推荐）
配套学习资料： https://pan.baidu.com/s/1vPYD82mB_AkBVB2q2Mk7qw
TypeScript全套视频（程序员必备）
配套学习资料： https://pan.baidu.com/s/1GXSD2HY2gmZfzhDxPUKCNA
2020DvaJS视频精讲，全网首发
配套学习资料： https://pan.baidu.com/s/16-qABk4-qQqerqho9B_8RQ 提取码: 6sv6

3. PC端全栈开发

本阶段主要讲解了大部分 JQuery 常用的方法，拥有通过 JQuery 编写完成前后端项目的整站能力。

1） jQuery经典交互特效开发

知识点包含：时间轴特效；tab页面切换效果；网页定位导航特效；滑动门特效； 焦点图轮播特效；导航条菜单效果；瀑布流特效；弹出层效果；倒计时效果；抽奖效果……

2）PHP+MySQL后端基础

知识点包含：Apache；PHP；MySQL；HTTP(s)协议详解；Ajax进阶、跨域与Defered；Apache与Nginx 环境搭建与配置；接口的定义；Mock数据；Restful；前后端联调；前端安全(XSS,CSRF,JSON注入)……

3）前端工程化与模块化应用

知识点包含：Gulp；Webpack；NPM；Linux命令；Git/SVN；CommonJS；AMD；CMD；ES6模块化……

4）PC端全栈开发项目

知识点包含：大首页；列表页与详情页；展示与交互特效；搜索；登录与注册；购物车； jQueryUI 与 jQuery EasyUI；Bootstrap(ACE)；Highcharts/Echarts；ArtTemplate；velocity；smarty； 云平台系统前端；Apache+PHP+MySQL服务器搭建……

学习视频教程：

2020版jQuery入门教程全集（看过最详细的）
配套学习资料： https://pan.baidu.com/s/1R2n67Io55MgRKptsAO_7Lg

4. Node.js后端开发

主阶段主要讲解NodeJs服务器端开发以及常用框架搭建服务器。掌握服务器端开发以及模块化原理。包括服务器代理、权限认证、及时通信、IO 操作等。

1）Node.js基础

包含知识点：Node.js介绍；MongoDB；GraphGL；Express；Koa2；测试框架mocha；socket 即时通信项目……

2）Node.js高级全栈项目

包含知识点：基于M站+Node.js+MongoDB高级全栈项目开发……

学习视频教程：

最新nodeJS从入门到大神
配套学习资料： https://pan.baidu.com/s/13FCVc68ZnFdMhHkZtN1f7g 提取码：hp2l
NodeJS+Express+MongoDB实战项目
配套学习资料： https://pan.baidu.com/s/1YfcorhIR9etRJ_vxsvy0ig

5. Vue.js前端框架

Vue.js 致力于构建数据驱动的 web 应用开发框架，是一个精简的 MVVM。Vue.js专注于 MVVM 模型的 ViewModel 层。简单的数据操作，就可以完成页面的更新，当然也有很多类似的框架，如 Angular，React，但是 Vue 以简洁化，轻量级，数据驱动，模块友好等优势深受企业以及前端开发者的喜爱，成为前端开发人员必备的技能。

1）Vue.js开发基础

包含知识点：WebApp开发基础；MVVM模式；前端组件化； 单文件组件；组件间传值；Vue实例；E19Vue实例生命周期； Vue的模版语法；计算属性,方法与侦听器；Vue中的条件渲染；Vue中的列表渲染；Vue中的set方法；Vue动画……

2）应用Vue.js开发WebApp项目

包含知识点：环境配置；项目代码介绍；单文件组件与Vue中的路由；单页应用VS多页应用；Mint UI；Element UI；项目的联调，测试与发布上线……

学习视频教程：

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

配套学习资料： https://pan.baidu.com/s/1ykVWPDQjKhQgkibHZ3cdhQ 提取码：1zvr

用面向对象打造Vue框架教程

配套学习资料： https://pan.baidu.com/s/1tOTYYZU7dz6m2-8s0GbGaQ 提取码：4nc3

Vue组件之手机通讯录实战视频

配套学习资料： https://pan.baidu.com/s/1MVAaglD-0HEH487VjN6lJQ 提取码：tckn

教程从 electron API 的使用，到高级框架 react，vue 的集成，最终能够打包并发布属于自己的桌面应用。本课程以项目实战为驱动，帮你打开通往 Vue.js 的任督二脉，让你迅速成为一个优秀的 Vue.js 开发人员。

6. React前端框架

本阶段以实战开发为出发点，从零开始讲解 React 的使用，从基础的组件、路由、状态、属性、数据通信各类问题到 Webpack、Redux 等主流框架和工具之间的配合。配合丰富的实战案例及项目，帮你从入门到真正会用 React。

1）React 开发基础

包含知识点：React简介；React开发环境准备；React中的组件；JSX语法；拆分组件与组件之间的传值；React developer tools 安装及使用；PropTypes 与 DefaultProps 的应用；props，state 与 render 函数的关系；深入了解React虚拟DOM；虚拟 DOM 中的 Diff 算法；React 中 ref 的使用；React的生命周期函数及使用场景；使用Charles实现本地数据mock；React 中实现 CSS 动画效果；React-redux 中间件使用……

2）应用React开发WebApp项目

包含知识点：Ant Design组件库；React Router 4 路由；项目组件编写；使用 Immutable.js 来管理store中的数据；项目的联调、测试与发布上线……

学习视频教程：

React教程+实战全集
配套学习资料： https://pan.baidu.com/s/18j0EtU7pLlcd1jMlDDSNBg 提取码：vvur
React服务器端渲染-NextJS
配套学习资料： https://pan.baidu.com/s/1AdANnTYIIrSngAWVgEq7pQ 提取码：x0hs
2020版React项目-React管理后台视频 https://pan.baidu.com/s/1BSK2eV9HWO8uzb2ATNQSZg 提取码：vmqz

7. 混合开发(Hybrid,RN)

1）微信公众号开发

包含知识点：初识微信公众号；订阅号的基本功能；使用百度BAE实现代码的快速上线；使用Git完成线上代码部署；公众号开发权限及功能接入；微信JSSDK接口API；微信场景项目开发与接入……

2）各类混合应用开发

包含知识点：自主原生Navtive Hybrid(iOS、Android)；第三方Hybrid框架Cordova/Phone gap；第三方Hybrid框架MUI + HTML5……

3）阿里钉钉企业E应用（支付宝小程序）

包含知识点：E应用功开发入门；E应用开发流程；E应用开发基础；E应用开发实战……

学习视频教程：

安卓混合开发视频精讲
配套学习资料： https://pan.baidu.com/s/132Cb0p_mMBalrc7Njdj1lw 提取码：i0r6
混合开发实战教程
配套学习资料： https://pan.baidu.com/s/1OSyW32F7VosuW25CGlkuHA 提取码：drx3

8. 小程序开发

本阶段主要针对微信小程序最新特性，全面讲解小程序最新特性，通过学习本课程全面掌握小程序开发。

1）微信小程序开发

包含知识点：微信小程序初探；小程序入门必学；小程序组件体验；小程序大功能；项目实战带你征服小程序……

2）多端小程序开发

包含知识点：支付宝小程序；百度小程序；字节跳动小程序……

学习视频教程：

微信小程序项目实战
配套学习资料： https://pan.baidu.com/s/17IabhW0SWHnFhiZ3mDCduw
小程序全栈开发之喵喵交友
配套学习资料： https://pan.baidu.com/s/1ggShoLPpbryYc8oKbL1rCQ 提取码：dlib

9. 原生APP开发

Flutter 是谷歌的移动 UI 框架，可以快速在 iOS 和 Android 上构建高质量的原生用户界面。

在开发时可以提供毫秒级热重载，拥有富有表现力，漂亮的用户界面，接近原生的性能。同 时也可以非常方便的与原生代码集成，是移动端 app 开发的不二选择。

1）React Native

包含知识点：React Native初探；React Native 项目导航； React Native 项目文本框；React Native 项目滚动分页；React Native 其他组件……

2）Flutter开发

包含知识点：开发准备；快速起步；界面结构；基础部件；布局；视图；Sliver；路由；表单；按钮； 输入；对话框；状态管理；网络请求；动画；测试、发布与部署……

学习视频教程：

最新Flutter全套视频~全套资料
配套学习资料： https://pan.baidu.com/s/1Zvj164kzdUy3KrUvNU0s-A

10. Angular前端框架

知识点包含：TypeScript 基础与进阶；； 开发环境配置；； Hello World；； 架构、模块与组件； 模板；元数据、数据绑定与数据显示；表单；服务与指令；依赖注入； 路由； Ionic 3 框架……

学习视频教程：

Angular4从入门到实战
配套学习资料： https://pan.baidu.com/s/1gVwNyufWHewe3XHHpBzkRA

11. 大数据可视化

知识点包含：数据可视化基础；Echars、Hignchars； D3.js 入门； D3.js 进阶；D3.js 选择集与数据； D3.js 高级应用；D3.js 应用工具：NVD3、n3-charts……

学习视频教程：

最新immutable.js持久化数据结构
配套学习资料： https://pan.baidu.com/s/18c_tysaaXcshEN2ELYJPjA 提取码：v4qq

面试题

1）主要是针对刚入行的或者工作在两年以内的同学整理的： 前端新人入行常见问题大合集
配套学习资料： https://pan.baidu.com/s/1Lx5-JMj6U_IqvCkWT9bRLw 提取码：699k
2）包括页面布局及设备适配、原生JS、jQuery.js、Vue.js、React.js、Node.js、前后端协作及综合问题。 企业面试题精讲①-Node.js及项目工程化
配套学习资料： https://pan.baidu.com/s/10XI6tutQhhWtp5nMjzXb3Q 提取码：gupu
3）包括页面布局及设备适配、原生JS、jQuery.js、Vue.js、React.js、Node.js、前后端协作及综合问题。 企业面试题精讲②-React.JS常见问题讲解
配套学习资料： https://pan.baidu.com/s/1iRPubj_Ck21Zp8LA7hYDOA 提取码：c828

以上！

WEB前端的学习教程就整理到这里，后期有更新的教程内容，小千会第一时间分享给大家，希望对小伙伴们的学习有所帮助！

最后，欢迎大家的关注评论！