进阶攻略|前端完整的学习路线

最近写了一篇关于前端一些常见轻便耐用的UI框架的小总结，很多小伙伴私信问我，要怎么学习前端，没有明确的方向，为了感谢大家的关注点赞打赏和喜欢，决定把前端的学习进阶之路稍微整理一下，也为了自己能在工作之中思路更加的清晰。姑娘水平能力火候不够尚在学习中，如有不足，欢迎批评指正补充。

初级阶段

阿里矢量图标库：http://www.iconfont.cn/

ps使用教程：http://www.16xx8.com/

JavaScript教程：http://www.runoob.com/js/js-tutorial.html

css教程：http://www.runoob.com/css/css-tutorial.html

css3教程：http://www.runoob.com/css3/css3-tutorial.html

HTML教程：http://www.runoob.com/html/html-tutorial.html

HTML5教程：http://www.runoob.com/html/html5-intro.html

jQuery 教程：http://www.w3school.com.cn/jquery/index.asp

Ajax教程：http://www.runoob.com/ajax/ajax-intro.html

HTTP1教程：http://www.runoob.com/http/http-methods.html

HTTP 2教程:http://www.runoob.com/http/http-tutorial.html

jQuery EasyUI教程：http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html

W3C标准教程：http://www.w3school.com.cn/

HTML5Web 存储：http://www.runoob.com/html/html5-webstorage.html

JSON教程：http://www.runoob.com/json/json-tutorial.html

canvas教程：http://www.runoob.com/html/html5-canvas.html

CSS 预处理语言：http://less.bootcss.com/

Css类库Sass工具教程：http://www.w3cplus.com/blog/tags/302.html

众所周知css并不能算是一们真正意义上的“编程”语言，它本身无法未完成像其它编程语言一样的嵌套、继承、设置变量等工作。为了解决css的不足，开发者们想到了编写一种对css进行预处理的“中间语言”，可以实现一些“编程”语言才有的功能，然后自动编译成css供浏览识别，这样既一定程度上弥补了css的不足，也无需一种新的语言来代替css以供浏览器识别。于是css预处理语言SASS就应运而生了。

进阶阶段

互联网的快速发展和激烈竞争，用户体验成为一个重要的关注点，导致专业前端工程师成为热门职业，各大公司对前端工程师的需求量都很大，要求也越来越高，优秀的前端工程师更是稀缺，学完以上的基础，做完项目，差不多就可以了吗？答案是No，想要成为一个更加优秀的工程师，进阶阶段攻略必不可少。

快速开发框架和基础库

Express简介：http://www.runoob.com/nodejs/nodejs-express-framework.html

MVC简介：http://www.runoob.com/design-pattern/mvc-pattern.html

jQuery ：http://www.jq22.com/jq1-jq4

Zepto教程：http://www.runoob.com/w3cnote/zepto-js-source-analysis.html

Swiper 教程：http://www.swiper.com.cn/

iScroll教程：  http://wiki.jikexueyuan.com/project/iscroll-5/

Sea.js 手册与文档：http://www.zhangxinxu.com/sp/seajs/docs/zh-cn/module-definition.html

MooTool 中文手册：http://www.chinamootools.com/

sea.js教程：http://www.jb51.net/article/47507.htm

模块化

ES6 Module整理：https://segmentfault.com/a/1190000007499196

CommonJS中文网：http://www.php.cn/js-tutorial-360130.html

webpack 教程：http://www.runoob.com/w3cnote/webpack-tutorial.html

browserify 教程：http://www.gulpjs.com.cn/docs/recipes/browserify-with-globs/

JS模块化工具requirejs教程：http://www.runoob.com/w3cnote/requirejs-tutorial-1.html

ECMAScript 语法 : http://www.w3school.com.cn/js/pro_js_syntax.asp

Gulp构建化工具官网:https://gulpjs.com/

SuperSlide.js教程： http://www.superslide2.com/

zoom.js教程：http://lab.hakim.se/zoom-js/

Node.js教程:http://www.runoob.com/nodejs/nodejs-tutorial.html

UI框架：这里就不一一介绍了，参考上一篇文章：《前端最全的框架总结》

WeUI：http://www.runoob.com/w3cnote/weui-for-weixin-web.html

Highcharts 图表教程：http://www.runoob.com/highcharts/highcharts-tutorial.html

ionic 教程：http://www.runoob.com/ionic/ionic-tutorial.html

Framework教程  ：   http://www.w3cplus.com/resource/tags/187.html

NPM 使用介绍:http://www.runoob.com/nodejs/nodejs-npm.html

Framework即架构，它是一个语言开发软件，提供了软件开发的框架，使开发更具工程性、简便性和稳定性。NET Framework通过COM Interop（COM互操作）技术支持COM+和MTS。一个传统的COM应用程序能够调用一个.NET组件，同时.NET组件（在.NET中称为.NET Assembly）也能够调用一个COM组件。这一非常强大的双向互操作特性使你可以在应用程序中混合使用两类技术。

高级阶段

在前端这个行业摸爬滚打久了，自然学到的东西会越来越多，在大多数人眼里，互联网前端开发是一个有着高薪水、高职业荣誉感的行业。没错，随着互联网大环境的快速崛起，HTML5的发展，绝对属于既有“钱景”还有前景的的朝阳行业。高收入、前景光明，即使对前端开发的要求越来越高，也还是有许多新人愿意来一试身手，纷纷打破头往这个行业里面涌。从小白到前端大神的华丽转身就在此咯

PHP教程：http://www.runoob.com/php/php-tutorial.html

Ruby教程：http://www.runoob.com/ruby/ruby-tutorial.html

MySQL教程：http://www.runoob.com/mysql/mysql-tutorial.html

Redis 教程:http://www.runoob.com/redis/redis-tutorial.htm

MongoDB 教程：http://www.runoob.com/mongodb/mongodb-tutorial.html

Hybrid混合式开发：  http://www.infoq.com/cn/articles/hybrid-app-development-combat/

Linux教程:http://www.runoob.com/linux/linux-tutorial.html

Vue.js 入门教程：http://www.runoob.com/w3cnote/vue-js-quickstart.html

AngularJS教程：http://www.runoob.com/angularjs/angularjs-tutorial.html

React.js 教程：http://www.runoob.com/react/react-tutorial.html

Require.js  教程： http://requirejs.org/

BackBone中文文档：http://www.css88.com/doc/backbone/

Knockout.js 教程：http://www.aizhengli.com/knockoutjs/knockoutjs.html

Ember.js教程：https://emberjs.com/

ECMAScript6:http://blog.csdn.net/daily886/article/details/53765658

微信小程序开发资源汇：http://www.runoob.com/w3cnote/wx-xcx-repo.html

移动端教程：http://www.runoob.com/w3cschool-app

完整线路图：http://blog.csdn.net/u011047006/article/details/52597178

polymer中文网：https://polymer-zh.cn/

Deft.js官网：http://deftjs.org/

ASP.NET MVC教程：http://www.runoob.com/aspnet/mvc-intro.html

拓展技能

前端的技术多到学不完，所以，对于开发中常用的，一定要多看多练，做到对某一项精通，其余的都是换汤不换药，再辅助性道德进行学习，可以不断拓展自己的知识面，下面是一些拓展技能，虽不涉及技术，但一定可以提高自身的竞争力。花瓣，必应，千图本是设计师的网站，作为前端工程师，有时也会充当UI的角色

SEO优化:http://www.searcheo.cn/post/seo.html

站长之家：http://www.chinaz.com/

Python基础教程：http://www.runoob.com/python/python-tutorial.html

必应网：https://cn.bing.com/

花瓣网：https://huaban.com/

千图网：http://www.58pic.com/

开发工具

Web市场上有很多Web前端开发工具，有的是开源的，可以免费的使用它们用来教学或调试程序，有的使用方便，有的拥有强大的功能等，每一种都有不同的优势。我们可以从中学习适合自己是工具。Web前端开发工具种类很多，所以极大地满足了不同需求的开发人员的不同需求等等。这些平台很有趣，交互性强，特别适用于初学者。

Markdown菜鸟教程网：http://blog.csdn.net/simplebam/article/category/6685809

Eclipse 教程：http://www.runoob.com/eclipse/eclipse-tutorial.html

ps使用教程：http://www.16xx8.com/

HBuilder 使用教程:http://www.runoob.com/w3cnote/hbuilder-intro.html

WebStorm使用教程：https://www.jetbrains.com/webstorm/

Dreamweaver：http://www.qinxue.com/220.html?sysref=dreamweaver

Github 简明教程：http://www.runoob.com/w3cnote/git-guide.html

SVN 教程：http://www.runoob.com/svn/svn-tutorial.html

nodepad++：

轻量化，软件下载下来只有6MB，解压后不过10MB左右，其中还包括了语言文件帮助文件等。绿色开源，Notepad++是一款符合GPL协议的开源软件，同样可以在官方下载ZIP包解压即用。和很多文本编辑器一样，提供了代码补全，代码高亮功能，但其中有的需依赖插件的扩展。

Fireworks：

是Adobe推出的一款网页作图软件，软件可以加速 Web 设计与开发， 是一款创建与优化 Web 图像和快速构建网站与 Web 界面原型的理想工具。Fireworks 不仅具备编辑矢量图形与位图图像的灵活性， 还提供了一个预先构建资源的公用库，

Sublime：

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

编译工具：

Grunt 教程：http://www.w3cplus.com/blog/tags/372.html

Gulp 基于流的自动化构建工具 ：http://www.gulpjs.com.cn/

Brunch 构建工具：http://hao.jobbole.com/brunch/

Yeoman构建工具：http://www.jianshu.com/p/9f3e6bcdb274

webpack：http://www.runoob.com/w3cnote/webpack-tutorial.html

babel编译工具：http://www.ruanyifeng.com/blog/2016/01/babel.html

Git版本管理：http://www.uml.org.cn/pzgl/201204285.asp

另外，还有很多工作中使用的工具，在下一篇文章《前端工程师必备工具》有完整的介绍，敬请期待。未完待续。。

前端书籍和网站推荐：

在闲暇之时，怎么能少了书籍来打发时光，因此，再来一波满满的干货，我们的大前端，作为一门知识，怎么能少实实在在的书籍？

一百本优质前端书籍百度云盘链接：http://pan.baidu.com/s/1b88n6Y

一些不错的编程学习网站：http://www.runoob.com/w3cnote/code-website-recommend.html

前端开发面试题

当以上这些知识都学完之后，那就开启你的求职之路吧，求职之时，要经过笔试，机试，面试三大流程，最重要的就是笔试了，如何在笔试之中崭露头角，那就是把网上所有的面试题都背诵一遍，分分钟秒杀一批人，顺利入职就不难了。

http://www.360doc.com/content/16/0702/17/13518188_572450563.shtml

技能汇总：前端技能汇总：http://www.runoob.com/w3cnote/frontend-knowledge-structure.html

项目中必备

30组常用前端开发组件库：http://www.luoxiao123.cn/1196.html

在我看来，组件化其实就是把各种常用的功能封装好，便于下次调用。例如对话框，.文件上传
，富文本编辑器，日历，树形菜单，表格分页，表单验证等等，当然了，也可以根据项目需求，自己写组件进行封装，以便循环利用。

前端大神的GitHub上的项目：http://www.qdfuns.com/notes/14464/27e8f350150aeb6534f83dbdbb590d33.html

总结完这篇文章，突然觉得前端的路太漫长，要学习的东西非常的多，希望自己早日成为一个大神

注：本文作者祈澈姑娘，转载请声明2017.08.18 14:42* 字数 3083 阅读 4评论 1喜欢 1 编辑文章

最近写了一篇关于前端一些常见轻便耐用的UI框架的小总结，很多小伙伴私信问我，要怎么学习前端，没有明确的方向，为了感谢大家的关注点赞打赏和喜欢，决定把前端的学习进阶之路稍微整理一下，也为了自己能在工作之中思路更加的清晰。姑娘水平能力火候不够尚在学习中，如有不足，欢迎批评指正补充。

初级阶段

阿里矢量图标库：http://www.iconfont.cn/

ps使用教程：http://www.16xx8.com/

JavaScript教程：http://www.runoob.com/js/js-tutorial.html

css教程：http://www.runoob.com/css/css-tutorial.html

css3教程：http://www.runoob.com/css3/css3-tutorial.html

HTML教程：http://www.runoob.com/html/html-tutorial.html

HTML5教程：http://www.runoob.com/html/html5-intro.html

jQuery 教程：http://www.w3school.com.cn/jquery/index.asp

Ajax教程：http://www.runoob.com/ajax/ajax-intro.html

HTTP1教程：http://www.runoob.com/http/http-methods.html

HTTP 2教程:http://www.runoob.com/http/http-tutorial.html

jQuery EasyUI教程：http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html

W3C标准教程：http://www.w3school.com.cn/

HTML5Web 存储：http://www.runoob.com/html/html5-webstorage.html

JSON教程：http://www.runoob.com/json/json-tutorial.html

canvas教程：http://www.runoob.com/html/html5-canvas.html

CSS 预处理语言：http://less.bootcss.com/

Css类库Sass工具教程：http://www.w3cplus.com/blog/tags/302.html

众所周知css并不能算是一们真正意义上的“编程”语言，它本身无法未完成像其它编程语言一样的嵌套、继承、设置变量等工作。为了解决css的不足，开发者们想到了编写一种对css进行预处理的“中间语言”，可以实现一些“编程”语言才有的功能，然后自动编译成css供浏览识别，这样既一定程度上弥补了css的不足，也无需一种新的语言来代替css以供浏览器识别。于是css预处理语言SASS就应运而生了。

进阶阶段

互联网的快速发展和激烈竞争，用户体验成为一个重要的关注点，导致专业前端工程师成为热门职业，各大公司对前端工程师的需求量都很大，要求也越来越高，优秀的前端工程师更是稀缺，学完以上的基础，做完项目，差不多就可以了吗？答案是No，想要成为一个更加优秀的工程师，进阶阶段攻略必不可少。

快速开发框架和基础库

Express简介：http://www.runoob.com/nodejs/nodejs-express-framework.html

MVC简介：http://www.runoob.com/design-pattern/mvc-pattern.html

jQuery ：http://www.jq22.com/jq1-jq4

Zepto教程：http://www.runoob.com/w3cnote/zepto-js-source-analysis.html

Swiper 教程：http://www.swiper.com.cn/

iScroll教程：  http://wiki.jikexueyuan.com/project/iscroll-5/

Sea.js 手册与文档：http://www.zhangxinxu.com/sp/seajs/docs/zh-cn/module-definition.html

MooTool 中文手册：http://www.chinamootools.com/

sea.js教程：http://www.jb51.net/article/47507.htm

模块化

ES6 Module整理：https://segmentfault.com/a/1190000007499196

CommonJS中文网：http://www.php.cn/js-tutorial-360130.html

webpack 教程：http://www.runoob.com/w3cnote/webpack-tutorial.html

browserify 教程：http://www.gulpjs.com.cn/docs/recipes/browserify-with-globs/

JS模块化工具requirejs教程：http://www.runoob.com/w3cnote/requirejs-tutorial-1.html

ECMAScript 语法 : http://www.w3school.com.cn/js/pro_js_syntax.asp

Gulp构建化工具官网:https://gulpjs.com/

SuperSlide.js教程： http://www.superslide2.com/

zoom.js教程：http://lab.hakim.se/zoom-js/

Node.js教程:http://www.runoob.com/nodejs/nodejs-tutorial.html

UI框架：这里就不一一介绍了，参考上一篇文章：《前端最全的框架总结》

WeUI：http://www.runoob.com/w3cnote/weui-for-weixin-web.html

Highcharts 图表教程：http://www.runoob.com/highcharts/highcharts-tutorial.html

ionic 教程：http://www.runoob.com/ionic/ionic-tutorial.html

Framework教程  ：   http://www.w3cplus.com/resource/tags/187.html

NPM 使用介绍:http://www.runoob.com/nodejs/nodejs-npm.html

Framework即架构，它是一个语言开发软件，提供了软件开发的框架，使开发更具工程性、简便性和稳定性。NET Framework通过COM Interop（COM互操作）技术支持COM+和MTS。一个传统的COM应用程序能够调用一个.NET组件，同时.NET组件（在.NET中称为.NET Assembly）也能够调用一个COM组件。这一非常强大的双向互操作特性使你可以在应用程序中混合使用两类技术。

高级阶段

在前端这个行业摸爬滚打久了，自然学到的东西会越来越多，在大多数人眼里，互联网前端开发是一个有着高薪水、高职业荣誉感的行业。没错，随着互联网大环境的快速崛起，HTML5的发展，绝对属于既有“钱景”还有前景的的朝阳行业。高收入、前景光明，即使对前端开发的要求越来越高，也还是有许多新人愿意来一试身手，纷纷打破头往这个行业里面涌。从小白到前端大神的华丽转身就在此咯

PHP教程：http://www.runoob.com/php/php-tutorial.html

Ruby教程：http://www.runoob.com/ruby/ruby-tutorial.html

MySQL教程：http://www.runoob.com/mysql/mysql-tutorial.html

Redis 教程:http://www.runoob.com/redis/redis-tutorial.htm

MongoDB 教程：http://www.runoob.com/mongodb/mongodb-tutorial.html

Hybrid混合式开发：  http://www.infoq.com/cn/articles/hybrid-app-development-combat/

Linux教程:http://www.runoob.com/linux/linux-tutorial.html

Vue.js 入门教程：http://www.runoob.com/w3cnote/vue-js-quickstart.html

AngularJS教程：http://www.runoob.com/angularjs/angularjs-tutorial.html

React.js 教程：http://www.runoob.com/react/react-tutorial.html

Require.js  教程： http://requirejs.org/

BackBone中文文档：http://www.css88.com/doc/backbone/

Knockout.js 教程：http://www.aizhengli.com/knockoutjs/knockoutjs.html

Ember.js教程：https://emberjs.com/

ECMAScript6:http://blog.csdn.net/daily886/article/details/53765658

微信小程序开发资源汇：http://www.runoob.com/w3cnote/wx-xcx-repo.html

移动端教程：http://www.runoob.com/w3cschool-app

完整线路图：http://blog.csdn.net/u011047006/article/details/52597178

polymer中文网：https://polymer-zh.cn/

Deft.js官网：http://deftjs.org/

ASP.NET MVC教程：http://www.runoob.com/aspnet/mvc-intro.html

拓展技能

前端的技术多到学不完，所以，对于开发中常用的，一定要多看多练，做到对某一项精通，其余的都是换汤不换药，再辅助性道德进行学习，可以不断拓展自己的知识面，下面是一些拓展技能，虽不涉及技术，但一定可以提高自身的竞争力。花瓣，必应，千图本是设计师的网站，作为前端工程师，有时也会充当UI的角色

SEO优化:http://www.searcheo.cn/post/seo.html

站长之家：http://www.chinaz.com/

Python基础教程：http://www.runoob.com/python/python-tutorial.html

必应网：https://cn.bing.com/

花瓣网：https://huaban.com/

千图网：http://www.58pic.com/

开发工具

Web市场上有很多Web前端开发工具，有的是开源的，可以免费的使用它们用来教学或调试程序，有的使用方便，有的拥有强大的功能等，每一种都有不同的优势。我们可以从中学习适合自己是工具。Web前端开发工具种类很多，所以极大地满足了不同需求的开发人员的不同需求等等。这些平台很有趣，交互性强，特别适用于初学者。

Markdown菜鸟教程网：http://blog.csdn.net/simplebam/article/category/6685809

Eclipse 教程：http://www.runoob.com/eclipse/eclipse-tutorial.html

ps使用教程：http://www.16xx8.com/

HBuilder 使用教程:http://www.runoob.com/w3cnote/hbuilder-intro.html

WebStorm使用教程：https://www.jetbrains.com/webstorm/

Dreamweaver：http://www.qinxue.com/220.html?sysref=dreamweaver

Github 简明教程：http://www.runoob.com/w3cnote/git-guide.html

SVN 教程：http://www.runoob.com/svn/svn-tutorial.html

nodepad++：

轻量化，软件下载下来只有6MB，解压后不过10MB左右，其中还包括了语言文件帮助文件等。绿色开源，Notepad++是一款符合GPL协议的开源软件，同样可以在官方下载ZIP包解压即用。和很多文本编辑器一样，提供了代码补全，代码高亮功能，但其中有的需依赖插件的扩展。

Fireworks：

是Adobe推出的一款网页作图软件，软件可以加速 Web 设计与开发， 是一款创建与优化 Web 图像和快速构建网站与 Web 界面原型的理想工具。Fireworks 不仅具备编辑矢量图形与位图图像的灵活性， 还提供了一个预先构建资源的公用库，

Sublime：

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

编译工具：

Grunt 教程：http://www.w3cplus.com/blog/tags/372.html

Gulp 基于流的自动化构建工具 ：http://www.gulpjs.com.cn/

Brunch 构建工具：http://hao.jobbole.com/brunch/

Yeoman构建工具：http://www.jianshu.com/p/9f3e6bcdb274

webpack：http://www.runoob.com/w3cnote/webpack-tutorial.html

babel编译工具：http://www.ruanyifeng.com/blog/2016/01/babel.html

Git版本管理：http://www.uml.org.cn/pzgl/201204285.asp

另外，还有很多工作中使用的工具，在下一篇文章《前端工程师必备工具》有完整的介绍，敬请期待。未完待续。。

前端书籍和网站推荐：

在闲暇之时，怎么能少了书籍来打发时光，因此，再来一波满满的干货，我们的大前端，作为一门知识，怎么能少实实在在的书籍？

一百本优质前端书籍百度云盘链接：http://pan.baidu.com/s/1b88n6Y

一些不错的编程学习网站：http://www.runoob.com/w3cnote/code-website-recommend.html

前端开发面试题

当以上这些知识都学完之后，那就开启你的求职之路吧，求职之时，要经过笔试，机试，面试三大流程，最重要的就是笔试了，如何在笔试之中崭露头角，那就是把网上所有的面试题都背诵一遍，分分钟秒杀一批人，顺利入职就不难了。

http://www.360doc.com/content/16/0702/17/13518188_572450563.shtml

技能汇总：前端技能汇总：http://www.runoob.com/w3cnote/frontend-knowledge-structure.html

项目中必备

30组常用前端开发组件库：http://www.luoxiao123.cn/1196.html

在我看来，组件化其实就是把各种常用的功能封装好，便于下次调用。例如对话框，.文件上传
，富文本编辑器，日历，树形菜单，表格分页，表单验证等等，当然了，也可以根据项目需求，自己写组件进行封装，以便循环利用。

前端大神的GitHub上的项目：http://www.qdfuns.com/notes/14464/27e8f350150aeb6534f83dbdbb590d33.html

总结完这篇文章，突然觉得前端的路太漫长，要学习的东西非常的多，希望自己早日成为一个大神

注：本文作者祈澈姑娘，转载请声明