【前端】前端学习路线视频资料大集合

前端开发相信很多小伙伴正在从事，也有许多小伙伴正在准备前端的道路上，前端开发需要学习的东西很多，UI需要熟悉一些，前端的知识要掌握，后台的类似Java语言等也要有所接触。

对于前端很对人都无从下手，因为接触的知识太多；也有许多小白（比如我）在没仔细接触前端以前，以为前端只是HTML+CSS那么简单，自从接触过Angular前端框架之后，才发现前端好难，得需要好好下功夫才能有所收获，在学习Html视频时发现了一份前端的学习资料集合，所以整理下来分享给更多想学习前端的伙伴们，希望对你们有帮助，可以查看自己需要的视频资料！（不足之处还请大家批评指正！）

前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互> 。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。

- 提示：点击下方题目即可跳转到相应的视频页面。

【核心基础】

（1）HTML&CSS入门基础教程
（2）CSS3教程
（3）CSS3参考手册

知识百科：
CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块> 。

（4）Less教程

知识百科：
Less是一门CSS预处理语言，它扩展了CSS语言，增加了变量，Mixin，函数等特性，使CSS更易维护和扩展。可以为网站启用可自定义，可管理和可重用的样式表。可以运行在Node或浏览器端。

（5）Bootstrap教程

知识百科：
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web开发更加快捷。Bootstrap提供了优雅的TML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

（6）HTML5核心
（7）HTML5实战

知识百科：
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。

HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。

【JavaScript】

（1）JS核心教程
（2）JS高级教程
（3）jQuery教程

知识百科：
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

【后台服务器端】

（1）Node.js教程

知识百科：
简单的说 Node.js 就是运行在服务端的 JavaScript。 Node.js 是一个基于Chrome JavaScript运行时建立的一个平台。
Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

（2）MongoDB教程

知识百科：
MongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。
MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。

【前端必备框架】

（1）Zepto.js教程

知识百科：
Zepto就是jQuery的移动端版本, 可以看做是一个轻量级的jQuery

• 随着移动端的愈加火爆，目前很多HTML5的框架都在支持移动方向，比如：Vue.js，zepto.js，React Native Weex等等。
• Zepto 是一个轻量级的针对现代高级浏览器的 JavaScript 库， 它与jquery 有着类似的api。 如果你会用 jquery，那么你也会用 zepto。
• Zepto的设计目的是提供 jQuery 的类似的API，但并不是100%覆盖 jQuery 。Zepto设计的目的是有一个5-10k的通用库、下载并快速执行、有一个熟悉通用的API，所以你能把你主要的精力放到应用开发上。

（2）AngularJS教程
（3）AngularJS参考手册

知识百科：

• AngularJS 诞生于2009年，由Misko Hevery等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC（Model–view–controller）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
• AngularJS 是一个 JavaScript框架。它是一个以 JavaScript 编写的库。它可通过 script标签添加到HTML 页面。 AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。
• AngularJS是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中。

（4）Angular8视频教程

【规范集成】

（1）ECMAScript教程

知识百科：
ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会，European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，所以它可以理解为是JavaScript的一个标准,但实际上后两者是ECMA-262标准的实现和扩展。

（2）JS模块化

知识百科：
①在js出现的时候，js一般只是用来实现一些简单的交互，后来js开始得到重视，用来实现越来越复杂的功能，而为了维护的方便，我们也把不同功能的js抽取出来当做一个js文件，但是当项目变的复杂的时候，一个html页面可能需要加载好多个js文件，而这个时候就会出现各种命名冲突，如果js也可以像java一样，把不同功能的文件放在不同的package中，需要引用某个函数或功能的时候，import下相关的包，这样可以很好的解决命名冲突等各种问题，但是js中没有模块的概念，又怎么实现模块化呢?

②模块化开发是一种管理方式，是一种生产方式，一种解决问题的方案，一个模块就是实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块，但是模块开发需要遵循一定的规范，否则就都乱套了，因此，才有了后来大家熟悉的AMD规范，CMD规范。

（3）Git教程

知识百科：
Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。 Git 是 Linus Torvalds 为了帮助管理
Linux 内核开发而开发的一个开放源码的版本控制软件。 Git 与常用的版本控制工具 CVS, Subversion等不同，它采用了分布式版本库的方式，不必服务器端软件支持。

【自动化构建】

（1）Grunt教程

知识百科：
Grunt 是基于 Node.js 的项目构建工具。它可以自动运行你所设定的任务。Grunt拥有数量庞大的插件,几乎任何你所要做的事情都可以用 Grunt 实现。

（2）Gulp教程

知识百科：
①gulp是前端开发过程中自动构建项目的工具，相同作用的还有grunt。构建工具依靠插件能够自动监测文件变化以及完成js/sass/less/html/image/css/coffee等文件的语法检查、合并、重命名、压缩、格式化、浏览器自动刷新、部署文件等功能。
②gulpjs是一个前端构建工具，与gruntjs相比，gulpjs无需写一大堆繁杂的配置参数，API也非常简单，学习起来很容易，而且gulpjs使用的是nodejs中stream来读取和操作数据，其速度更快。如果你还没有使用过前端构建工具，或者觉得gruntjs太难用的话，那就尝试一下gulp吧。

（3）Webpack教程

知识百科：
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependencygraph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

【高级框架】

（1）React教程

知识百科：
React 是一个用于构建用户界面的 JAVASCRIPT 库。 React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。 React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。 React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

（2）Vue教程

知识百科：
Vue 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，方便与第三方库或既有项目整合。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

（3）Promise教程

知识百科：
promise是什么？
1、主要用于异步计算；
2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果；
3、可以在对象之间传递和操作promise，帮助我们处理队列。

（4）Axios教程

知识百科：
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

• 从浏览器中创建 XMLHttpRequest
• 从 node.js 发出 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防止 CSRF/XSRF

（5）Mpvue教程

知识百科：

• Mpvue是一个基于Vue的微信小程序前端框架，可以让我们用vue的语法写小程序的项目。简单来说就是，以前我们写微信小程序，必须借助微信小程序的开发者工具，微信开发工具提供的语法才能写小程序，Mpvue的出现，让我们可以先使用vue写好项目，然后利用Mpvue把我们写好的项目打包成小程序。
• mpvue是一个使用vue.js开发小程序的前端框架，该框架基于vue.js核心，mpvue修改了vue.js的runtime和compiler实现，使其可以运行在小程序环境中，从而为小程序开发引入整套vue.js开发体验。

【项目实战教程】

（1）Vue硅谷外卖
（2）谷粒音乐
（3）硅谷直聘
（4）微信小程序
（5）微信公众号
（6）谷粒后台
（7）硅谷图书
（8）前端面试题

【前端学习资料网站】

1. how2j.cn：https://how2j.cn
2.大地老师-IT营：https://www.itying.com/category-79-b0.html
3.前端面试经验：https://mp.weixin.qq.com/s/pq4IAgkR1s9BfH1s9CaeVQ
4.尚硅谷HTML5实战教程(html5项目实战)：
https://www.bilibili.com/video/av21588692?p=20
5.尚硅谷前端HTML5教程(html5入门经典)
https://www.bilibili.com/video/av21588133
6.尚硅谷CSS3教程（css快速入门）
https://www.bilibili.com/video/av21586861
7.17素材网
https://www.17sucai.com/user/fav-list?id=2029884
8.PHP中文网
https://www.php.cn
9.【前端】HTML基础总结：
https://blog.csdn.net/happygjcd/article/details/103658403
10.HTML入门与进阶以及HTML5：
https://blog.csdn.net/wuyxinu/article/details
11.CSS入门：
https://blog.csdn.net/wuyxinu/article/details/103583618