?基礎(chǔ)知識：
1. html + css 這部分建議在 w3school 在線教程 上學習捞蛋，邊學邊練，每章后還有小測試尊惰。 之后可以模仿一些網(wǎng)站做些頁面讲竿。
2. javascript 要學的內(nèi)容實在很多，如果沒有其他編程語言的基礎(chǔ)的話弄屡，學起來可能要費些力题禀，還是建議先在 網(wǎng)頁制作web前端部落上學習。之后建議馬上看《javascript語言精粹》琢岩，js是一門很混亂的語言投剥，這本書能夠幫助你區(qū)分哪些是語言的精華，哪些是糟粕担孔，對于語言精華江锨，應(yīng)該深入學習。糟粕部分能看懂別人寫的代碼就行糕篇，自己就不用嘗試了啄育。
對于習慣看視頻學習的同學，以上內(nèi)容也可以在 web前端html5研究中心官網(wǎng)上學習拌消。大概看了下挑豌，內(nèi)容還不錯。
?進階：
有了以上基礎(chǔ)墩崩，就可以進行一般的靜態(tài)網(wǎng)頁設(shè)計氓英，不過對于復(fù)雜的頁面還需要進一步學習。
1. css鹦筹。截至今日（2016.09.10）天貓铝阐、淘寶、支付寶都已停止對ie6,7的支持铐拐，未來相信大多數(shù)網(wǎng)站都會停止對ie6徘键，7的支持，ie8的市場份額也不像兩年前那么高了遍蟋，webkit內(nèi)核已成為市場主流吹害。對于css的學習，我推薦分三塊：“基礎(chǔ)概念”虚青，“css2.1規(guī)范”它呀，“css3規(guī)范”。必看 精通CSS（第2版） (豆瓣)，看完這本書你應(yīng)該對：盒子模型钟些，流動烟号，block，inline政恍，層疊，樣式優(yōu)先級达传，等概念非常了解了篙耗。這本確實有些年頭了，但基礎(chǔ)概念部分講述非常清晰宪赶，可以稱之為經(jīng)典宗弯。ie6，7相關(guān)的內(nèi)容可以不看搂妻。css3的部分可以參考：CSS3實用指南 (豆瓣)蒙保。這本書同樣有些老，只是最新出版的書中沒發(fā)現(xiàn)有特別好的欲主。
2. javascript邓厕。上面提到內(nèi)容還不足以讓你勝任js編程。在有了基礎(chǔ)之后扁瓢，進一步學習內(nèi)容包括：
a) 框架详恼。推薦 zepto，簡單易用引几，在簡單學習js后昧互，直接上手 zepto 即可完成一些簡單的項目。zepto 源碼簡單清晰伟桅，也適合新手閱讀敞掘。補充： 可以使用 codecademy 學習 javascript，zepto楣铁，用戶體驗真的很好（感謝 TonyOuyang ）玖雁。最近比較熱門的框架是React, VUE, Angular這些, 根據(jù)需要稍作了解即可。隨著ie瀏覽器市場份額的下降民褂，以及移動端的發(fā)展茄菊，標準原生js已經(jīng)可以在實際項目中使用（目前還需要借助es5shim、babel等）赊堪，重點還是ES5, ES6, ES7面殖。
b) javascript 語言范式 。這個名字可能并不恰當哭廉，只是我找不到可以描述“面向?qū)ο蟆奔沽牛昂瘮?shù)式”這個兩個概念的概念。javascript不完全是一個面向?qū)ο蟮恼Z言，它的很多設(shè)計理念都有函數(shù)編程語言的影子辽幌，甚至說如果你不用面向?qū)ο笤鲅停耆梢园阉斫獬梢婚T函數(shù)式編程語言。javascript的很多語言特性乌企，都是因為他具有函數(shù)式語言的特點才存在的虑润。這部分推薦先學習面向?qū)ο蟮幕纠碚摚瑢Ψ庋b加酵，繼承拳喻，多態(tài)等概念要理解，維基百科猪腕，百度百科會是你的幫手冗澈，另外推薦《object oriented javascript》，應(yīng)該有中文版陋葡。對與函數(shù)式編程可以參考這篇文章：JavaScript 中的函數(shù)式編程實踐
c) javascript 語言內(nèi)部機制亚亲。必須弄清如下概念：js中變量的作用域，變量傳遞方式腐缤，函數(shù)的定義環(huán)境與執(zhí)行環(huán)境捌归，閉包，函數(shù)的四種調(diào)用方式（一般函數(shù)柴梆，對象的方法陨溅，apply，call）绍在，以及四種調(diào)用方式下门扇，‘this'指向的是誰。這部分內(nèi)容你會在《javascript語言精粹》中詳細了解偿渡。
d) dom編程臼寄，這個web前端工程師的核心技能之一。必讀《dom編程藝術(shù)》溜宽，另外《高性能javascript》這本書中關(guān)于dom編程的部分講的也很好吉拳。
e) ajax編程，這是另一核心技術(shù)适揉。ajax建議在網(wǎng)上查些資料留攒，了解這個概念的來龍去脈，百度百科嫉嘀，維基百科上的內(nèi)容就足夠了炼邀。真正編程是很容易的，如今幾乎所有框架都對ajax有良好的封裝剪侮，編程并不復(fù)雜拭宁。另外，ajax未來幾年會被 Fetch Standard 取代，也需要了解杰标。另外關(guān)于xhr2兵怯，cors（跨站資源共享），formData文件上傳腔剂，也需要了解媒区。
f) es5, es6。現(xiàn)在開發(fā)js大部分基于es5的掸犬，ie8以下通過es5-shim驻仅。但利用一些工具，現(xiàn)在已經(jīng)可以直接寫es6代碼了登渣，尤其在reactjs，nodejs類型的項目中毡泻。對于從es5胜茧，es6每個階段js發(fā)生了哪些變化都需要系統(tǒng)學習，學習順序建議是 JavaScript基礎(chǔ) -> es5 -> es6仇味，越靠前的越重要呻顽。一些參考鏈接：ECMAScript 5 compatibility tableECMAScript 6入門ES5 ? 張鑫旭
3. html5。需要了解html都提供了哪些api丹墨，然后項目中用起來廊遍。這部分沒有什么難理解的，關(guān)鍵在于能用html5解決業(yè)務(wù)問題贩挣，以及不支持html5的瀏覽器的降級方案喉前。這部分體現(xiàn)了前端的一個思想：面向未來編程，今早將新技術(shù)引入業(yè)務(wù)中來王财，而不是過分考慮兼容性問題卵迂，進而導致面向過去編程。
?再進一階 · 代碼層面：
有了以上知識绒净，對于大多數(shù)小型網(wǎng)站见咒，你應(yīng)該已經(jīng)可以寫出能夠工作的代碼了。但要想成為更專業(yè)的前端挂疆，你還需繼續(xù)努力改览。更高的要求大概還有四方面：1易維護，2可測試缤言，3高性能宝当，4低流量（移動端）。
1. 易維護墨闲。對于頁面你該理解‘樣式’今妄，‘數(shù)據(jù)’，‘行為’三者分離，對應(yīng)的當然就是css,html,js盾鳞。對于js代碼犬性，你最好了解設(shè)計模式，重構(gòu)腾仅，MVC等內(nèi)容乒裆。
2. 可測性。
3. 高性能推励。必讀《高性能javascript》
4. 低流量鹤耍。移動端關(guān)注比較多。
?再進一階 · 工程層面：
前端項目同樣面臨軟件生命周期的各個環(huán)節(jié)验辞，首先是代碼管理稿黄，你必須學會使用svn和git。其次是代碼的構(gòu)建跌造，如今前端代碼構(gòu)建已經(jīng)不是簡單的壓縮一下了杆怕，需要進行依賴管理、模塊合并壳贪、各種編譯陵珍，必須要學會使用grunt、gulp等前端構(gòu)建工具违施。
推薦：
一個大牛的直播授課? 手把手教你怎么學習? 你是在學習前端都可以的來的? 不管是框架.JavaScript還是node? 都可以來的? 點擊鏈接加入群【前端交流總?cè)孩邸浚?a target="_blank" rel="nofollow">https://jq.qq.com/?_wv=1027&k=47YpkWp群號是543761540同樣歡迎大牛進來交流的
補充：
對于前段開發(fā)互纯，基本內(nèi)容就這些了，可以根據(jù)自己的興趣愛好選擇性學習以下內(nèi)容磕蒲。
1. 交互設(shè)計留潦。大公司依然有專業(yè)人士搞這些，不過不懂交互的前端一定不是好前端亿卤。推薦《簡約至上》愤兵。
2. 后端。應(yīng)該說前段工程師必須至少了解一門后端語言排吴，不過如果愛好也可深入學習秆乳，入手難度比較低的應(yīng)該是php了。這部分由可分為基于頁面钻哩，基于框架兩種屹堰。大型項目都是基于框架開發(fā)的，建議至少了解一個MVC框架街氢，比如php的ci, yii, yaf 等扯键，好還框架的設(shè)計思想都大同小異。如今NodeJs在大公司已經(jīng)得到普遍的使用珊肃，推薦大家使用在Node上使用Express框架做一些后端服務(wù)的開發(fā)荣刑。
3. Android和ios開發(fā)馅笙。時至今日，前端的工作領(lǐng)域已經(jīng)非常廣泛厉亏，native的界面開發(fā)本質(zhì)上也是前端開發(fā)董习，個大公司都面臨著Native環(huán)境和web環(huán)境頁面同時維護的問題，如果能夠在技術(shù)上得到統(tǒng)一爱只，將會有巨大的價值皿淋。對于學有余力的同學，應(yīng)該了解Native開發(fā)的基本流程恬试，至少了解到界面構(gòu)建的技術(shù)窝趣。
4. 如果你能夠認真看到這里，說明你對前端有真愛训柴，最后說一個編程習慣的問題哑舒，絕對是保你工作平安，少出故障幻馁。代碼提交前必須做的三個事情：
A. git diff（svn diff）,檢查所有變更散址；
B. 跑一邊單元測試；
C. 手動運行一遍所有demo.
