最近寫了一篇關于前端一些常見輕便耐用的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/ 模塊化 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 Google使用全攻略：https://www.w3cschool.cn/googlesyqgl/ 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://www.qdfuns.com/tools.php 另外，還有很多工作中使用的工具，在下一篇文章《前端工程師必備工具》有完整的介紹，敬請期待。未完待續。。 ### 六： 前端書籍和網站推薦： 在閑暇之時，怎么能少了書籍來打發時光，因此，再來一波滿滿的干貨，我們的大前端，作為一門知識，怎么能少實實在在的書籍？ 一百本優質前端書籍百度云盤鏈接：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 總結完這篇文章，突然覺得前端的路太漫長，要學習的東西非常的多，希望自己早日成為一個大神 前端開發神器：http://tools.udn.yyuap.com/