最近寫了一篇關(guān)于前端一些常見輕便耐用的UI框架的小總結(jié)，很多小伙伴私信問我，要怎么學習前端，沒有明確的方向，為了感謝大家的關(guān)注點贊打賞和喜歡，決定把前端的學習進階之路稍微整理一下，也為了自己能在工作之中思路更加的清晰。姑娘水平能力火候不夠尚在學習中，如有不足，歡迎批評指正補充。
初級階段
阿里矢量圖標庫：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 預(yù)處理語言：http://less.bootcss.com/
Css類庫Sass工具教程：http://www.w3cplus.com/blog/tags/302.html
眾所周知css并不能算是一們真正意義上的“編程”語言，它本身無法未完成像其它編程語言一樣的嵌套、繼承、設(shè)置變量等工作。為了解決css的不足，開發(fā)者們想到了編寫一種對css進行預(yù)處理的“中間語言”，可以實現(xiàn)一些“編程”語言才有的功能，然后自動編譯成css供瀏覽識別，這樣既一定程度上彌補了css的不足，也無需一種新的語言來代替css以供瀏覽器識別。于是css預(yù)處理語言SASS就應(yīng)運而生了。
進階階段
互聯(lián)網(wǎng)的快速發(fā)展和激烈競爭，用戶體驗成為一個重要的關(guān)注點，導(dǎo)致專業(yè)前端工程師成為熱門職業(yè)，各大公司對前端工程師的需求量都很大，要求也越來越高，優(yōu)秀的前端工程師更是稀缺，學完以上的基礎(chǔ)，做完項目，差不多就可以了嗎？答案是No，想要成為一個更加優(yōu)秀的工程師，進階階段攻略必不可少。
快速開發(fā)框架和基礎(chǔ)庫
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/
模塊化
ES6 Module整理：https://segmentfault.com/a/1190000007499196
CommonJS中文網(wǎng)：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構(gòu)建化工具官網(wǎng):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框架：這里就不一一介紹了，參考上一篇文章：《前端最全的框架總結(jié)》
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即架構(gòu)，它是一個語言開發(fā)軟件，提供了軟件開發(fā)的框架，使開發(fā)更具工程性、簡便性和穩(wěn)定性。NET Framework通過COM Interop（COM互操作）技術(shù)支持COM+和MTS。一個傳統(tǒng)的COM應(yīng)用程序能夠調(diào)用一個.NET組件，同時.NET組件（在.NET中稱為.NET Assembly）也能夠調(diào)用一個COM組件。這一非常強大的雙向互操作特性使你可以在應(yīng)用程序中混合使用兩類技術(shù)。
高級階段
在前端這個行業(yè)摸爬滾打久了，自然學到的東西會越來越多，在大多數(shù)人眼里，互聯(lián)網(wǎng)前端開發(fā)是一個有著高薪水、高職業(yè)榮譽感的行業(yè)。沒錯，隨著互聯(lián)網(wǎng)大環(huán)境的快速崛起，HTML5的發(fā)展，絕對屬于既有“錢景”還有前景的的朝陽行業(yè)。高收入、前景光明，即使對前端開發(fā)的要求越來越高，也還是有許多新人愿意來一試身手，紛紛打破頭往這個行業(yè)里面涌。從小白到前端大神的華麗轉(zhuǎn)身就在此咯
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混合式開發(fā)：? 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
微信小程序開發(fā)資源匯：http://www.runoob.com/w3cnote/wx-xcx-repo.html
移動端教程：http://www.runoob.com/w3cschool-app
完整線路圖：http://blog.csdn.net/u011047006/article/details/52597178
polymer中文網(wǎng)：https://polymer-zh.cn/
Deft.js官網(wǎng)：http://deftjs.org/
ASP.NET MVC教程：http://www.runoob.com/aspnet/mvc-intro.html
拓展技能
前端的技術(shù)多到學不完，所以，對于開發(fā)中常用的，一定要多看多練，做到對某一項精通，其余的都是換湯不換藥，再輔助性道德進行學習，可以不斷拓展自己的知識面，下面是一些拓展技能，雖不涉及技術(shù)，但一定可以提高自身的競爭力。花瓣，必應(yīng)，千圖本是設(shè)計師的網(wǎng)站，作為前端工程師，有時也會充當UI的角色
SEO優(yōu)化:http://www.searcheo.cn/post/seo.html
站長之家：http://www.chinaz.com/
Python基礎(chǔ)教程：http://www.runoob.com/python/python-tutorial.html
必應(yīng)網(wǎng)：https://cn.bing.com/
花瓣網(wǎng)：https://huaban.com/
千圖網(wǎng)：http://www.58pic.com/
開發(fā)工具
Web市場上有很多Web前端開發(fā)工具，有的是開源的，可以免費的使用它們用來教學或調(diào)試程序，有的使用方便，有的擁有強大的功能等，每一種都有不同的優(yōu)勢。我們可以從中學習適合自己是工具。Web前端開發(fā)工具種類很多，所以極大地滿足了不同需求的開發(fā)人員的不同需求等等。這些平臺很有趣，交互性強，特別適用于初學者。
Markdown菜鳥教程網(wǎng)：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
Google使用全攻略：https://www.w3cschool.cn/googlesyqgl/
nodepad++：
輕量化，軟件下載下來只有6MB，解壓后不過10MB左右，其中還包括了語言文件幫助文件等。綠色開源，Notepad++是一款符合GPL協(xié)議的開源軟件，同樣可以在官方下載ZIP包解壓即用。和很多文本編輯器一樣，提供了代碼補全，代碼高亮功能，但其中有的需依賴插件的擴展。
Fireworks：
是Adobe推出的一款網(wǎng)頁作圖軟件，軟件可以加速 Web 設(shè)計與開發(fā)， 是一款創(chuàng)建與優(yōu)化 Web 圖像和快速構(gòu)建網(wǎng)站與 Web 界面原型的理想工具。Fireworks 不僅具備編輯矢量圖形與位圖圖像的靈活性， 還提供了一個預(yù)先構(gòu)建資源的公用庫，
Sublime：
Sublime Text具有漂亮的用戶界面和強大的功能，例如代碼縮略圖，Python的插件，代碼段等。還可自定義鍵綁定，菜單和工具欄。Sublime Text 的主要功能包括：拼寫檢查，書簽，完整的 Python API ， Goto 功能，即時項目切換，多選擇，多窗口等等。Sublime Text 是一個跨平臺的編輯器，同時支持Windows、Linux、Mac OS X等操作系統(tǒng)。
編譯工具：
Grunt 教程：http://www.w3cplus.com/blog/tags/372.html
Gulp 基于流的自動化構(gòu)建工具 ：http://www.gulpjs.com.cn/
Brunch 構(gòu)建工具：http://hao.jobbole.com/brunch/
Yeoman構(gòu)建工具：http://www.lxweimin.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://www.qdfuns.com/tools.php
另外，還有很多工作中使用的工具，在下一篇文章《前端工程師必備工具》有完整的介紹，敬請期待。未完待續(xù)。。
前端書籍和網(wǎng)站推薦：
在閑暇之時，怎么能少了書籍來打發(fā)時光，因此，再來一波滿滿的干貨，我們的大前端，作為一門知識，怎么能少實實在在的書籍？
一百本優(yōu)質(zhì)前端書籍百度云盤鏈接：http://pan.baidu.com/s/1b88n6Y
一些不錯的編程學習網(wǎng)站：http://www.runoob.com/w3cnote/code-website-recommend.html
前端開發(fā)面試題
當以上這些知識都學完之后，那就開啟你的求職之路吧，求職之時，要經(jīng)過筆試，機試，面試三大流程，最重要的就是筆試了，如何在筆試之中嶄露頭角，那就是把網(wǎng)上所有的面試題都背誦一遍，分分鐘秒殺一批人，順利入職就不難了。
http://www.360doc.com/content/16/0702/17/13518188_572450563.shtml
技能匯總：前端技能匯總：http://www.runoob.com/w3cnote/frontend-knowledge-structure.html
項目中必備
30組常用前端開發(fā)組件庫：http://www.luoxiao123.cn/1196.html
在我看來，組件化其實就是把各種常用的功能封裝好，便于下次調(diào)用。例如對話框，.文件上傳
，富文本編輯器，日歷，樹形菜單，表格分頁，表單驗證等等，當然了，也可以根據(jù)項目需求，自己寫組件進行封裝，以便循環(huán)利用。
前端大神的GitHub上的項目：http://www.qdfuns.com/notes/14464/27e8f350150aeb6534f83dbdbb590d33.html
總結(jié)完這篇文章，突然覺得前端的路太漫長，要學習的東西非常的多，希望自己早日成為一個大神
前端開發(fā)神器：http://tools.udn.yyuap.com/
原文作者：祈澈姑娘
技術(shù)博客：http://www.lxweimin.com/u/05f416aefbe1
90后前端妹子，愛編程，愛運營，愛折騰。
堅持總結(jié)工作中遇到的技術(shù)問題，堅持記錄工作中所所思所見，歡迎大家一起探討交流。
文末福利：關(guān)注「編程微刊」公眾號 ，在微信后臺回復(fù)「領(lǐng)取資源」，獲取IT資源200G干貨大全。公眾號回復(fù)“1”，拉你進程序員技術(shù)討論群
