資料整合|前端完整的學習路線

最近寫了一篇關於前端一些常見輕便耐用的UI框架的小總結,不少小夥伴私信問我,要怎麼學習前端,沒有明確的方向,爲了感謝你們的關注點贊打賞和喜歡,決定把前端的學習進階之路稍微整理一下,也爲了本身能在工做之中思路更加的清晰。姑娘水平能力火候不夠尚在學習中,若有不足,歡迎批評指正補充。php

初級階段 阿里矢量圖標庫:www.iconfont.cn/css

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

JavaScript教程:www.runoob.com/js/js-tutor…前端

css教程:www.runoob.com/css/css-tut…vue

css3教程:www.runoob.com/css3/css3-t…html5

HTML教程:www.runoob.com/html/html-t…node

HTML5教程:www.runoob.com/html/html5-…python

jQuery 教程:www.w3school.com.cn/jquery/inde…mysql

Ajax教程:www.runoob.com/ajax/ajax-i…react

HTTP1教程:www.runoob.com/http/http-m…

HTTP 2教程:www.runoob.com/http/http-t…

jQuery EasyUI教程:www.runoob.com/jeasyui/jqu…

W3C標準教程:www.w3school.com.cn/

HTML5Web 存儲:www.runoob.com/html/html5-…

JSON教程:www.runoob.com/json/json-t…

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

CSS 預處理語言:less.bootcss.com/

Css類庫Sass工具教程:www.w3cplus.com/blog/tags/3…

衆所周知css並不能算是一們真正意義上的「編程」語言,它自己沒法未完成像其它編程語言同樣的嵌套、繼承、設置變量等工做。爲了解決css的不足,開發者們想到了編寫一種對css進行預處理的「中間語言」,能夠實現一些「編程」語言纔有的功能,而後自動編譯成css供瀏覽識別,這樣既必定程度上彌補了css的不足,也無需一種新的語言來代替css以供瀏覽器識別。因而css預處理語言SASS就應運而生了。

進階階段 互聯網的快速發展和激烈競爭,用戶體驗成爲一個重要的關注點,致使專業前端工程師成爲熱門職業,各大公司對前端工程師的需求量都很大,要求也愈來愈高,優秀的前端工程師更是稀缺,學完以上的基礎,作完項目,差很少就能夠了嗎?答案是No,想要成爲一個更加優秀的工程師,進階階段攻略必不可少。

快速開發框架和基礎庫

Express簡介:www.runoob.com/nodejs/node…

MVC簡介:www.runoob.com/design-patt…

jQuery :www.jq22.com/jq1-jq4

Zepto教程:www.runoob.com/w3cnote/zep…

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

iScroll教程: wiki.jikexueyuan.com/project/isc…

Sea.js 手冊與文檔:www.zhangxinxu.com/sp/seajs/do…

MooTool 中文手冊:www.chinamootools.com/

模塊化

ES6 Module整理:segmentfault.com/a/119000000…

CommonJS中文網:www.php.cn/js-tutorial…

webpack 教程:www.runoob.com/w3cnote/web…

browserify 教程:www.gulpjs.com.cn/docs/recipe…

JS模塊化工具requirejs教程:www.runoob.com/w3cnote/req…

ECMAScript 語法 : www.w3school.com.cn/js/pro_js_s…

Gulp構建化工具官網:gulpjs.com/

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

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

Node.js教程:www.runoob.com/nodejs/node…

UI框架:這裏就不一一介紹了,參考上一篇文章:《前端最全的框架總結》

WeUI:www.runoob.com/w3cnote/weu…

Highcharts 圖表教程:www.runoob.com/highcharts/…

ionic 教程:www.runoob.com/ionic/ionic…

Framework教程 : www.w3cplus.com/resource/ta…

NPM 使用介紹:www.runoob.com/nodejs/node…

Framework即架構,它是一個語言開發軟件,提供了軟件開發的框架,使開發更具工程性、簡便性和穩定性。NET Framework經過COM Interop(COM互操做)技術支持COM+和MTS。一個傳統的COM應用程序可以調用一個.NET組件,同時.NET組件(在.NET中稱爲.NET Assembly)也可以調用一個COM組件。這一很是強大的雙向互操做特性使你能夠在應用程序中混合使用兩類技術。

高級階段 在前端這個行業摸爬滾打久了,天然學到的東西會愈來愈多,在大多數人眼裏,互聯網前端開發是一個有着高薪水、高職業榮譽感的行業。沒錯,隨着互聯網大環境的快速崛起,HTML5的發展,絕對屬於既有「錢景」還有前景的的朝陽行業。高收入、前景光明,即便對前端開發的要求愈來愈高,也仍是有許多新人願意來一試身手,紛紛打破頭往這個行業裏面涌。從小白到前端大神的華麗轉身就在此咯

PHP教程:www.runoob.com/php/php-tut…

Ruby教程:www.runoob.com/ruby/ruby-t…

MySQL教程:www.runoob.com/mysql/mysql…

Redis 教程:www.runoob.com/redis/redis…

MongoDB 教程:www.runoob.com/mongodb/mon…

Hybrid混合式開發: www.infoq.com/cn/articles…

Linux教程:www.runoob.com/linux/linux…

Vue.js 入門教程:www.runoob.com/w3cnote/vue…

AngularJS教程:www.runoob.com/angularjs/a…

React.js 教程:www.runoob.com/react/react…

Require.js 教程: requirejs.org/

BackBone中文文檔:www.css88.com/doc/backbon…

Knockout.js 教程:www.aizhengli.com/knockoutjs/…

Ember.js教程:emberjs.com/

ECMAScript6:blog.csdn.net/daily886/ar…

微信小程序開發資源匯:www.runoob.com/w3cnote/wx-…

移動端教程:www.runoob.com/w3cschool-a…

完整線路圖:blog.csdn.net/u011047006/…

polymer中文網:polymer-zh.cn/

Deft.js官網:deftjs.org/

ASP.NET MVC教程:www.runoob.com/aspnet/mvc-…

拓展技能 前端的技術多到學不完,因此,對於開發中經常使用的,必定要多看多練,作到對某一項精通,其他的都是換湯不換藥,再輔助性道德進行學習,能夠不斷拓展本身的知識面,下面是一些拓展技能,雖不涉及技術,但必定能夠提升自身的競爭力。花瓣,必應,千圖本是設計師的網站,做爲前端工程師,有時也會充當UI的角色

SEO優化:www.searcheo.cn/post/seo.ht…

站長之家:www.chinaz.com/

Python基礎教程:www.runoob.com/python/pyth…

必應網:cn.bing.com/

花瓣網:huaban.com/

千圖網:www.58pic.com/

開發工具 Web市場上有不少Web前端開發工具,有的是開源的,能夠免費的使用它們用來教學或調試程序,有的使用方便,有的擁有強大的功能等,每一種都有不一樣的優點。咱們能夠從中學習適合本身是工具。Web前端開發工具種類不少,因此極大地知足了不一樣需求的開發人員的不一樣需求等等。這些平臺頗有趣,交互性強,特別適用於初學者。

Markdown菜鳥教程網:blog.csdn.net/simplebam/a…

Eclipse 教程:www.runoob.com/eclipse/ecl…

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

HBuilder 使用教程:www.runoob.com/w3cnote/hbu…

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

Dreamweaver:www.qinxue.com/220.html?sy…

Github 簡明教程:www.runoob.com/w3cnote/git…

SVN 教程:www.runoob.com/svn/svn-tut…

Google使用全攻略: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 教程:www.w3cplus.com/blog/tags/3…

Gulp 基於流的自動化構建工具 :www.gulpjs.com.cn/

Brunch 構建工具:hao.jobbole.com/brunch/

Yeoman構建工具:www.jianshu.com/p/9f3e6bcdb…

webpack:www.runoob.com/w3cnote/web…

babel編譯工具:www.ruanyifeng.com/blog/2016/0…

Git版本管理:www.uml.org.cn/pzgl/201204…

前端工具庫:www.qdfuns.com/tools.php

另外,還有不少工做中使用的工具,在下一篇文章《前端工程師必備工具》有完整的介紹,敬請期待。未完待續。。

前端書籍和網站推薦: 在閒暇之時,怎麼能少了書籍來打發時光,所以,再來一波滿滿的乾貨,咱們的大前端,做爲一門知識,怎麼能少實實在在的書籍?

一百本優質前端書籍百度雲盤連接:pan.baidu.com/s/1b88n6Y

一些不錯的編程學習網站:www.runoob.com/w3cnote/cod…

前端開發面試題 當以上這些知識都學完以後,那就開啓你的求職之路吧,求職之時,要通過筆試,機試,面試三大流程,最重要的就是筆試了,如何在筆試之中嶄露頭角,那就是把網上全部的面試題都背誦一遍,分分鐘秒殺一批人,順利入職就不難了。

固然,前進得道路上怎少得了一塊兒奮鬥的小夥伴了;歡迎你們加入學習圈子一塊兒向大神邁進:QQ羣號:426334209

相關文章
相關標籤/搜索