最近寫(xiě)了一篇關(guān)于前端一些常見(jiàn)輕便耐用的UI框架的小總結(jié)，很多小伙伴私信問(wèn)我，要怎么學(xué)習(xí)前端往毡，沒(méi)有明確的方向鼻疮，為了感謝大家的關(guān)注點(diǎn)贊打賞和喜歡，決定把前端的學(xué)習(xí)進(jìn)階之路稍微整理一下，也為了自己能在工作之中思路更加的清晰萄唇。姑娘水平能力火候不夠尚在學(xué)習(xí)中损趋，如有不足巩检，歡迎批評(píng)指正補(bǔ)充恬涧。
初級(jí)階段
阿里矢量圖標(biāo)庫(kù)：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標(biāo)準(zhǔn)教程：http://www.w3school.com.cn/
HTML5Web 存儲(chǔ)：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ù)處理語(yǔ)言：http://less.bootcss.com/
Css類(lèi)庫(kù)Sass工具教程：http://www.w3cplus.com/blog/tags/302.html
眾所周知css并不能算是一們真正意義上的“編程”語(yǔ)言，它本身無(wú)法未完成像其它編程語(yǔ)言一樣的嵌套碴巾、繼承溯捆、設(shè)置變量等工作。為了解決css的不足厦瓢，開(kāi)發(fā)者們想到了編寫(xiě)一種對(duì)css進(jìn)行預(yù)處理的“中間語(yǔ)言”提揍，可以實(shí)現(xiàn)一些“編程”語(yǔ)言才有的功能，然后自動(dòng)編譯成css供瀏覽識(shí)別煮仇，這樣既一定程度上彌補(bǔ)了css的不足劳跃，也無(wú)需一種新的語(yǔ)言來(lái)代替css以供瀏覽器識(shí)別。于是css預(yù)處理語(yǔ)言SASS就應(yīng)運(yùn)而生了浙垫。
進(jìn)階階段
互聯(lián)網(wǎng)的快速發(fā)展和激烈競(jìng)爭(zhēng)刨仑，用戶(hù)體驗(yàn)成為一個(gè)重要的關(guān)注點(diǎn)，導(dǎo)致專(zhuān)業(yè)前端工程師成為熱門(mén)職業(yè)夹姥，各大公司對(duì)前端工程師的需求量都很大杉武，要求也越來(lái)越高，優(yōu)秀的前端工程師更是稀缺辙售，學(xué)完以上的基礎(chǔ)轻抱，做完項(xiàng)目，差不多就可以了嗎旦部？答案是No祈搜，想要成為一個(gè)更加優(yōu)秀的工程師，進(jìn)階階段攻略必不可少士八。
快速開(kāi)發(fā)框架和基礎(chǔ)庫(kù)
Express簡(jiǎn)介：http://www.runoob.com/nodejs/nodejs-express-framework.html
MVC簡(jiǎn)介：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 手冊(cè)與文檔：http://www.zhangxinxu.com/sp/seajs/docs/zh-cn/module-definition.html
MooTool 中文手冊(cè)：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 語(yǔ)法 : 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)，它是一個(gè)語(yǔ)言開(kāi)發(fā)軟件婚度，提供了軟件開(kāi)發(fā)的框架蘸秘，使開(kāi)發(fā)更具工程性、簡(jiǎn)便性和穩(wěn)定性陕见。NET Framework通過(guò)COM Interop（COM互操作）技術(shù)支持COM+和MTS秘血。一個(gè)傳統(tǒng)的COM應(yīng)用程序能夠調(diào)用一個(gè).NET組件味抖，同時(shí).NET組件（在.NET中稱(chēng)為.NET Assembly）也能夠調(diào)用一個(gè)COM組件评甜。這一非常強(qiáng)大的雙向互操作特性使你可以在應(yīng)用程序中混合使用兩類(lèi)技術(shù)。
高級(jí)階段
在前端這個(gè)行業(yè)摸爬滾打久了仔涩，自然學(xué)到的東西會(huì)越來(lái)越多忍坷，在大多數(shù)人眼里，互聯(lián)網(wǎng)前端開(kāi)發(fā)是一個(gè)有著高薪水、高職業(yè)榮譽(yù)感的行業(yè)佩研。沒(méi)錯(cuò)柑肴，隨著互聯(lián)網(wǎng)大環(huán)境的快速崛起，HTML5的發(fā)展旬薯，絕對(duì)屬于既有“錢(qián)景”還有前景的的朝陽(yáng)行業(yè)晰骑。高收入、前景光明绊序，即使對(duì)前端開(kāi)發(fā)的要求越來(lái)越高硕舆，也還是有許多新人愿意來(lái)一試身手，紛紛打破頭往這個(gè)行業(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混合式開(kāi)發(fā)：? http://www.infoq.com/cn/articles/hybrid-app-development-combat/
Linux教程:http://www.runoob.com/linux/linux-tutorial.html
Vue.js 入門(mén)教程：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
微信小程序開(kāi)發(fā)資源匯：http://www.runoob.com/w3cnote/wx-xcx-repo.html
移動(dòng)端教程：http://www.runoob.com/w3cschool-app
完整線(xiàn)路圖：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ù)多到學(xué)不完抚官，所以，對(duì)于開(kāi)發(fā)中常用的阶捆，一定要多看多練凌节，做到對(duì)某一項(xiàng)精通，其余的都是換湯不換藥洒试，再輔助性道德進(jìn)行學(xué)習(xí)倍奢，可以不斷拓展自己的知識(shí)面，下面是一些拓展技能垒棋，雖不涉及技術(shù)娱挨，但一定可以提高自身的競(jìng)爭(zhēng)力〔度花瓣跷坝，必應(yīng)，千圖本是設(shè)計(jì)師的網(wǎng)站碉碉，作為前端工程師柴钻，有時(shí)也會(huì)充當(dāng)UI的角色
SEO優(yōu)化:http://www.searcheo.cn/post/seo.html
站長(zhǎng)之家：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/
開(kāi)發(fā)工具
Web市場(chǎng)上有很多Web前端開(kāi)發(fā)工具，有的是開(kāi)源的垢粮，可以免費(fèi)的使用它們用來(lái)教學(xué)或調(diào)試程序贴届，有的使用方便，有的擁有強(qiáng)大的功能等蜡吧，每一種都有不同的優(yōu)勢(shì)毫蚓。我們可以從中學(xué)習(xí)適合自己是工具。Web前端開(kāi)發(fā)工具種類(lèi)很多昔善，所以極大地滿(mǎn)足了不同需求的開(kāi)發(fā)人員的不同需求等等。這些平臺(tái)很有趣君仆，交互性強(qiáng)翩概，特別適用于初學(xué)者牲距。
Markdown菜鳥(niǎo)教程網(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 簡(jiǎn)明教程：http://www.runoob.com/w3cnote/git-guide.html
SVN 教程：http://www.runoob.com/svn/svn-tutorial.html
Google使用全攻略：https://www.w3cschool.cn/googlesyqgl/
nodepad++：
輕量化，軟件下載下來(lái)只有6MB钥庇，解壓后不過(guò)10MB左右牍鞠，其中還包括了語(yǔ)言文件幫助文件等。綠色開(kāi)源评姨，Notepad++是一款符合GPL協(xié)議的開(kāi)源軟件难述，同樣可以在官方下載ZIP包解壓即用。和很多文本編輯器一樣吐句，提供了代碼補(bǔ)全龄广，代碼高亮功能，但其中有的需依賴(lài)插件的擴(kuò)展蕴侧。
Fireworks：
是Adobe推出的一款網(wǎng)頁(yè)作圖軟件择同，軟件可以加速 Web 設(shè)計(jì)與開(kāi)發(fā)， 是一款創(chuàng)建與優(yōu)化 Web 圖像和快速構(gòu)建網(wǎng)站與 Web 界面原型的理想工具净宵。Fireworks 不僅具備編輯矢量圖形與位圖圖像的靈活性敲才， 還提供了一個(gè)預(yù)先構(gòu)建資源的公用庫(kù)，
Sublime：
Sublime Text具有漂亮的用戶(hù)界面和強(qiáng)大的功能择葡，例如代碼縮略圖紧武，Python的插件，代碼段等敏储。還可自定義鍵綁定阻星，菜單和工具欄。Sublime Text 的主要功能包括：拼寫(xiě)檢查已添，書(shū)簽妥箕，完整的 Python API ， Goto 功能更舞，即時(shí)項(xiàng)目切換畦幢，多選擇，多窗口等等缆蝉。Sublime Text 是一個(gè)跨平臺(tái)的編輯器宇葱，同時(shí)支持Windows、Linux刊头、Mac OS X等操作系統(tǒng)黍瞧。
編譯工具：
Grunt 教程：http://www.w3cplus.com/blog/tags/372.html
Gulp 基于流的自動(dòng)化構(gòu)建工具 ：http://www.gulpjs.com.cn/
Brunch 構(gòu)建工具：http://hao.jobbole.com/brunch/
Yeoman構(gòu)建工具：http://www.reibang.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
前端工具庫(kù)：http://www.qdfuns.com/tools.php
另外，還有很多工作中使用的工具原杂，在下一篇文章《前端工程師必備工具》有完整的介紹印颤，敬請(qǐng)期待。未完待續(xù)污尉。膀哲。
前端書(shū)籍和網(wǎng)站推薦：
在閑暇之時(shí)，怎么能少了書(shū)籍來(lái)打發(fā)時(shí)光被碗，因此某宪，再來(lái)一波滿(mǎn)滿(mǎn)的干貨，我們的大前端锐朴，作為一門(mén)知識(shí)兴喂，怎么能少實(shí)實(shí)在在的書(shū)籍？
一百本優(yōu)質(zhì)前端書(shū)籍百度云盤(pán)鏈接：http://pan.baidu.com/s/1b88n6Y
一些不錯(cuò)的編程學(xué)習(xí)網(wǎng)站：http://www.runoob.com/w3cnote/code-website-recommend.html
前端開(kāi)發(fā)面試題
當(dāng)以上這些知識(shí)都學(xué)完之后焚志，那就開(kāi)啟你的求職之路吧衣迷，求職之時(shí)，要經(jīng)過(guò)筆試酱酬，機(jī)試壶谒，面試三大流程，最重要的就是筆試了膳沽，如何在筆試之中嶄露頭角汗菜，那就是把網(wǎng)上所有的面試題都背誦一遍，分分鐘秒殺一批人挑社，順利入職就不難了陨界。
http://www.360doc.com/content/16/0702/17/13518188_572450563.shtml
技能匯總：前端技能匯總：http://www.runoob.com/w3cnote/frontend-knowledge-structure.html
項(xiàng)目中必備
30組常用前端開(kāi)發(fā)組件庫(kù)：http://www.luoxiao123.cn/1196.html
在我看來(lái)，組件化其實(shí)就是把各種常用的功能封裝好痛阻，便于下次調(diào)用菌瘪。例如對(duì)話(huà)框，.文件上傳
阱当，富文本編輯器俏扩，日歷，樹(shù)形菜單弊添，表格分頁(yè)动猬，表單驗(yàn)證等等，當(dāng)然了表箭，也可以根據(jù)項(xiàng)目需求赁咙，自己寫(xiě)組件進(jìn)行封裝，以便循環(huán)利用免钻。
前端大神的GitHub上的項(xiàng)目：http://www.qdfuns.com/notes/14464/27e8f350150aeb6534f83dbdbb590d33.html
總結(jié)完這篇文章彼水，突然覺(jué)得前端的路太漫長(zhǎng)，要學(xué)習(xí)的東西非常的多极舔，希望自己早日成為一個(gè)大神
前端開(kāi)發(fā)神器：http://tools.udn.yyuap.com/
原文作者：祈澈姑娘
技術(shù)博客：http://www.reibang.com/u/05f416aefbe1
90后前端妹子凤覆，愛(ài)編程，愛(ài)運(yùn)營(yíng)拆魏，愛(ài)折騰盯桦。
堅(jiān)持總結(jié)工作中遇到的技術(shù)問(wèn)題慈俯，堅(jiān)持記錄工作中所所思所見(jiàn)，歡迎大家一起探討交流拥峦。
文末福利：關(guān)注「編程微刊」公眾號(hào) 贴膘，在微信后臺(tái)回復(fù)「領(lǐng)取資源」，獲取IT資源200G干貨大全略号。公眾號(hào)回復(fù)“1”刑峡，拉你進(jìn)程序員技術(shù)討論群
