簡要概述自學前端的5個月（大家來提提意見）？
說實在的，這本就是寫一篇文章的，不過既然提問，就問一下大家都有的問題吧。
本人從5個月前開始學習前端（本人物理學出身，量子物理什麼的那種），至於為什麼學，一是出於愛好，二也是想從事著行業。話題有點偏，咱們回過來說。初學，資源簡直閉塞的要死，看w3cSchool，學HTML，CSS，JS。剛開始的時候都會去請教各種各樣前端前輩經驗，然而殊不知不同人有不同人的擅長領域，也就沒太多學HTML，CSS。（現在才知道挺重要的，處理瀏覽器兼容以及HTML5和CSS3）。JS也是看犀牛（大家肯定都看過）等系列，jquery神馬的，就是看官方文檔了。當時覺得學會這麼多差不多了，可以去秋招了，然而，現實也是給了個不小的打擊，如何photoshop切圖？web的性能優化？用戶體驗？可訪問性？等等問題，我覺得茫然兩個字已經不足以形容了，就應該用**代替（你懂得）。現在也是實習了快1個月，接觸到的東西，說白了，就像你學會了技能偏偏你沒藍的感覺。
想請教各位，前端這條路究竟該怎麼走？（來自已不是菜鳥，卻又不是大神，站在十字路口的小白）
不請自來。本人學習HTML+CSS到現在大概兩個月吧，從9月開學到現在。純菜鳥一枚～
首先，一開始就是在知乎找各種大神的學習之路，以求借鑒，不過後來發現順著大神的路走著走著摸出了自己的思路。所以來賣弄一下
接下來就理理我對各種學習資料的看法吧。（適合剛剛開始，0基礎的小鮮肉）
1、要認識到HTML是頁面的主體結構，CSS負責頁面布局，JS負責交互這樣的大致概念。2、總結知乎的各路回答，大致上有推薦w3cschool，imooc，codecademy的。其中我覺得w3cschool更像是一本字典吧，而imooc和codecademy更適合新手學習。因為在裡面練習的同時也可以實時的看到所寫出來的效果如何。imooc和codecademy對此: imooc是國內的，中文界面，適合沒有英文基礎的！！！記住：沒有英文基礎！！！鑒於HTML的直白程度，基本上就是告訴瀏覽器說：這是段落，這是表格，這種程度，而且是用英文首字母縮寫。所以推薦如果學過英語的都可以去codecademy上學習，他上面對每個標籤都解釋得很清楚，辭彙量不大，在瀏覽器上安裝一個詞典插件基本學完無壓力，還增加辭彙量有木有！！3、再有是知乎上會推薦關注大神博客～嗯，我覺得以我目前的水平專業文我是看不懂了，不過抄抄大神的博客界面練練手還是可以的 注意版權哦，抄之前聯繫博主～
總結，對於小菜鳥入門前端第一步毋庸置疑是看書，把一本介紹HTML+CSS+JavaScript的入門書給啃了，接著就是趁熱打鐵，開練，上codecademy一個一個標籤慢慢熟悉。這時可以開始逛逛知乎，看看別人是怎麼學的。在codecademy上學完HTML教程後，不要閑著，找一個自己喜歡的博客，仿造一個靜態頁面出來。這樣基本上就掌握了HTML+CSS的基礎知識了。接著就是學JAVASCRIPT啦～目前我也就是這種水平
2015.11.02更：這不是廣告|更詳細的內容可以去我微博看看哦：剛剛發了一篇學習日誌。LyronLee的微博2016.09.19更：= =。我跌倒了，目前在前端路上停滯不前……血淚教訓，各位同志堅持住。我爭取趕上你們！！！我會回來的非計算機專業的薄弱環節在於，編譯原理，數據結構和演算法，操作系統，軟體工程。
這些都要補一補，練練內功，其他的都是隨著時間積累，經驗增多。編譯原理：
講了程序語言對問題建模的方式。物理學是用物理模型對現實世界建模，編程是用形式語言對計算過程建模。學物理的，至少這一點是有優勢的，不至於民科，能最快的區分出模型和模型解釋的現象。數據結構和演算法：
講了解決問題的步驟性的套路。這一點可以類比偏微分方程的求解，本科量子力學應該涉及到了勒讓德多項式，以及用邊界條件截斷為有限多項式。學物理的，至少這一點是有優勢的。鏈表，二叉樹，優先隊列，紅黑樹，無向圖，可以理解為問題的理想模型，演算法來操作他們，並維持他們結構的不變性。操作系統：
是一個大的管理軟體，控制電腦內可用的所有資源，怎樣分配和回收資源。理解各個模塊是如何組織的，能從底層對程序的運行機制更深入的了解。操作系統也做為了一個抽象層，用戶可以不考慮具體的實現細節。軟體工程：
野路子出來的，大多沒有工程化的認識。怎樣進行版本控制，怎樣進行風險管理，如何進行需求分析，軟體開發流程是什麼，這些都沒有概念。以及代碼怎樣寫是整潔的，什麼樣的架構是靈活可擴展的。綜上，轉行出來的，因為有自身的知識背景，很容易平移到計算機行業來，比輟學或者興起來學習的優勢大很多。剩下的就是經驗的積累，和專業性基礎知識的學習了。
題主多努力，3年以後可能會達到其他人本科畢業的水平。但是你自己行業內的知識，其他人是永遠學不到的。研一結束的暑假決定轉行學前端。從七月到現在，斷斷續續。開始在知乎上關注了 @路人甲的專欄。然後開始看專欄里分享的極客學院的前端視頻。後來在知乎的回答里看見有人推薦去codecademy里把JS的前五個部分做完，於是開始學習JS。
HTML+CSS的應用是在慕課網看Busy老師的視頻學的。就是那個手把手教你構建電商項目~
這才開始真正知道網頁是怎麼個寫法~也知道了如何用fireworks切圖。對於兼容性也有了一定掌握，可以獨立通過查資料去解決兼容問題了~（因為覺得Busy老師講的很棒，一度想去墨魚前端培訓。。然而不想找家裡要錢Orz）到9月份，開始迷上了three.js。。開始各種折騰。。至於做的東西~最開始看到知乎里的回答說，需要建立博客來記錄學習歷程，展現自己的學習能力。於是折騰好久，用HEXO搭建了博客。。。（純粹是個人筆記本= =）過程中，接觸到了Node.js、Git以及Github。。。真的很虐心。。。有了Github。。。就想自己做點東西了。。第一個應用是跟著慕課網上 @materliu 的React畫廊應用的課程做的。。。看了第一節，前置知識：yeoman,grunt,sass,AMD,commonJS。。。我簡直。。。於是乎，開始補前置知識。。雖然AMD,CMD,commonJS，grunt現在都還是很懵逼。。開始做才發現。。yeoman搭建的模板是ES6寫的。。目錄與視頻也有很多變化。。於是ES6走起。。。（看了個大概。。）webpack走起。。（現在對打包工具依舊懵逼。。）跟著敲完了發現ESLint各種報錯。。。我改Orz。。
最終終於做出來了React Webpack Template Title。。然而只能兼容chrome。。（正在找原因。。postcss的錯？）接著就開始想著仿製下網頁了。。。仿製什麼呢。。當然是我 &總的來說。。學習前端真的非常非常有意思！！！！但是總覺得自己學的不精，學的不夠，AJAX，HTTP，PHP，關於與後端交互的部分只知道個大概。。前端題目？總也做不完。。
學習之路。。。一眼望不到邊。。（但是內心裡都是興奮！）最後。。。。。。好想找個實習。。。。。這個答案適合前端入門以後，希望提升自己，以便在工作中能夠有更好產出的人。
進行了5個月的自學，難能可貴，聰明如你的人，應該掌握了不少前端開發的基礎知識。但現狀卻是，不得不面對著許多現實開發中的問題抓瞎。很不幸，你選的英雄聰明歸聰明，就是任性了一點，打娘胎出生就沒帶智力屬性，哈開玩笑。其實這沒什麼大不了的，因為幾乎所有人都會經歷這種階段，從學習者邁向開發者的階段。 練級練到這份上，不管是工作中或是找工作的時候碰到的問題，很多都將是實際的工程問題了，更好的代碼組織，更自動化的工作流程，如果想要在工作中能夠更好的產出，現階段要學的東西為兩大塊，如何組織代碼，如何構建項目。組織樣式代碼
利用 SMACSS 規則化分樣式模塊。有大牛曾經說過，開發大型項目的訣竅，就是不要開發大型項目。其言下之意指的是將大型項目分解為一個個小的模塊逐個擊破，SMACSS 就是一套分解樣式模塊的最佳實踐的集合，類似編程語言中的MVC 。它會告訴你如何科學的切分 CSS代碼，可以讓樣式模塊職責清晰，同時具有高可維護性和高可擴展性。https://smacss.com/ SMACSS官方網站
很不幸，我沒有找到 SMACSS 中文網，網上有蠻多零散的中文資料，請自行搜集整理。學習方法是通讀文檔（或者自己整理好的中文資料），並且參考對比下面提供的兩個目錄模板，在開發項目的過程中作出實際調整。
https://github.com/jonathanpath/SASS-SMACSS SMACSS項目模板一
https://github.com/minamarkham/sassy-starter 項目模板二
其中項目模板一主要是提供了一個清晰的 SMACSS 推薦的目錄結構，模板二除了目錄結構外，還增加了 SASS 語言構建工具的配置。
學習更高級的樣式語言以提升樣式表的可維護性。 我相信不少人走到這一步之後沒少被 CSS 坑，CSS 除了易編寫外，還以難維護聞名全宇宙。正因為如此，巨人們發明了能編譯為 CSS 的更高級的樣式語言，其中的 LESS 和 SASS 便是萬眾矚目的兩種，任學一種，僅僅利用其中提供的模塊導入和變數兩個基本功能，樣式的可維護性就會有巨大提升，心動了么。http://lesscss.org/ LESS英文文檔
http://less.bootcss.com/ LESS中文文檔
http://sass-lang.com/ SASS英文文檔
http://sass.bootcss.com/ SASS中文文檔
LESS／SASS 可以兩種都學，不過最好是先學一種，兩種的入門難度都不高，其中 LESS 的語法完全兼容 CSS 的語法，學習成本低， 同時也可以方便的將原有的 CSS 遷移為 LESS。而 sass 功能則更為強大。學習的方法很簡單，快速瀏覽文檔中的 startup 部分，將編譯器在 script 標籤中引入頁面，讓樣式在瀏覽器里生效，接著用 SMACSS 提供的規則，將幾個個原來的以 CSS 編寫樣式的簡單的頁面（比如博客首頁），改為相應的模塊化的 LESS 或者 SASS 就算入門。
做到上述兩點，相信你在使用css寫樣式的時候會有些許頭緒，可以科學的分隔和關聯樣式文件，以至於當樣式規模越來越大的時候，也能夠更好的把控它們，不至於相互干擾導致失控。組織 javascript 代碼——模塊化 javascript。
模塊化 javascript 是幾乎所有前端的架構的根本，經常聽到的前端架構名字，例如 MVC MVVM FLUX 等，都是用來指導如何劃分 js 邏輯模塊的思想。業內對 javascript 模塊化的規範當下比較流行的有 AMD ， CommonJS ， es6 module 三種， 每種都有自己的應用場景。其中 AMD 是在瀏覽器端通過 ajax 技術非同步載入模塊。而 CommonJS 和 es6 module 都是在 js 編譯階段將模塊載入。
AMD 目前已經過了盛行的時期，不過它的學習成本低廉，稍作投入就能得到不錯的效果，並且有一定的應用場景，還是值得學習的。AMD 規範最流行的實現就是 requirejs 。http://www.requirejs.cn/ requirejs 中文文檔
http://www.ruanyifeng.com/blog/2012/10/javascript_module.html 一個比較好的教程
學習方法是，將之前做的個人項目跟著教程和文檔把 js 模塊化就ok了。
待續待續……我覺得你這個時候可以去了解一些工具和原理方面的東西。
比如：grunt、gulp等前端自動化工具Angular、React等框架。如果題主在實習的話，那就看看公司用哪些東西你就學哪些東西。然後你就會發現前端原來不僅僅是用jQuery操作操作DOM而已。另外可以了解一下TCP、HTTP協議相關的東西，這方面可以看看《Web性能權威指南》，不難，但是很清楚，看完可以對性能優化有個大概的認識。我學了一年了，打算下學期想找一份關於前端的實習，，感覺的路會很遠，但我又不想搞自己學的專業。而且我現在學的專業聽說挺火熱的，可惜心不在那，只能把自己想做的做好。
1、不要碰ie系列。2、只針對最新版chrome進行學習與開發。3、把google用起來，使用英文搜索，國內的技術文章和前面兩點有衝突。4、現在是前端框架混戰的時代，不要每個都學，找一個，我建議emberjs（簡直是編程界的經典，設計得很好，有理有據），學下去後就別改了，深入學深入用。完後就能看懂其它框架了，有深度就很容易拓展廣度，畢竟有對比度在那裡。5、別碰jQ，這也是要你只使用最新版chrome開發的原因。這能讓你了解到最前沿的web技術底層的介面設計以及書寫精簡的css。6、在你入門js後，建議你，馬上轉用typescript。知道為什麼有人說web水深但也容易么，因為那些風格詭異的bug總是來自於莫名其妙的代碼，然而如果你用合理的方式去實現，根本不會遇到這些bug。js語言有很多不合理的地方，所以建議用js超集，是為了讓你接觸更好的語言特性，不要因為語言自身的缺陷而分散注意力。css方面可以用原生，lesa、scss也是可以用，但是我建議還是用原生css，這能讓你寫出更優秀的html布局方案與css命名方案。不信的話你看看那些用css預處理生出來的代碼就知道，有一半的字元都落到選擇器上了，開發者也是有意無意。如果用原生css，會讓你受益更多的。7、關於學習的建議，收集js、css庫，遇到偏門的問題，最好的解決方法是看這些庫的源碼。
不太支持之前的回答說的
非計算機專業的薄弱環節在於，編譯原理，數據結構和演算法，操作系統，軟體工程。
這些都要補一補，練練內功，其他的都是隨著時間積累，經驗增多。
根據題主的實際情況，如果一上來就要學這些計算機基礎課程，估計是個人都會喪失興趣吧。
我本科軟體工程專業，前端知識其實在學校里一點都沒學到，也沒有課程教。完全是自學前端。就我的感受來說，興趣還是最為重要的。自學前端一開始最重要的，你能做出來一個效果很炫的東西。當你能把HTML+CSS+JS基礎都搞定了，你自然就會研究諸如ES6/7 React Angular 之類的框架。當你覺得你基礎知識不夠的時候，也就自然會去補一補數據結構和演算法，操作系統相關知識。所以最重要的是興趣和成就感興趣和成就感興趣和成就感
建議題主站在十字路口時，摸摸自己的胸口，看看自己還熱愛前端嗎？就你描述來說，其實你的前端基礎也並不是那麼的牢靠，才會有這樣那樣的懵逼。如果你還願意繼續走前端的道路，耐下心來來，好好學習，現在的實習就是一個很好的機會，讓你補補基礎。
PS：前端的知識體系已經不像以前，現在的前端也不是HTML+CSS+JS這麼簡單，如果你想在前端路上走更遠。我想你現在應該做的是沉下心來，干好手頭事的同時，好好學習下ES6/7，react/angular/vue之類的框架。已經大四了，專業環境，轉的前端分享一下經歷，共勉。
八月中旬，最初接觸HTML——URL to learn web programming http://www.w3schools.com/，英文站做的很良心，每一個小步驟都講得特別清晰（小到怎麼打開一個記事本- -）。
9月中旬決定考研，複習了數據結構（高中學過OI），自學了計算機網路，操作系統，積累了一點自學的信心。
10月中旬決定自學前端，①從圖書館搜了一些雜七雜八的書入門了（有些書好坑..），開始了兩個星期的啃書之路，在Learn to code（習題集...）上刷了刷題，練練手感。
理論篇——這個階段主要是打基礎的，了解了HTML的各種標籤，CSS的各種屬性，JavaScript基本語法，jQuery的選擇器和一些基本的動畫特效實現，推薦李剛的《瘋狂HTML5/CSS3/JavaScript講義》（參考手冊...），對於每各種屬性都講得非常細緻；《鋒利的jQuery》對於jQuery的講解很詳細；《CSS禪意花園》了解一些基本的設計理念。
②學到Ajax，開始找視頻資料學習了——慕課網慕課網-國內最大的IT技能學習平台，加入前端工程師計劃，跟著視頻寫一些代碼。（學習路徑更加明確了，HTML5格式視頻的播放也超贊！）
體驗篇——收穫了很多特別有用的實戰技能，包括神器sublime的使用，Ajax，Bootstrap，JSON，PHP+MySQL入門，一些IE兼容性問題的處理，HTML的語義化，font-awesome，HTML5 canvas，CSS3......（太多...）
③11月下旬，逛校園招聘會，搭建了一個簡單的個人博客(沒發布...)，找到了第一份比較靠譜的前端實習（都是淚...），接手一些簡單的前端工作，製作招商頁面「預付365」一站式綜合消費整合支付平台 （主要是為了練習Bootstrap...）。
實戰篇——找實習的時候，帶著自己的小Demo會比較有說服力。工作時，多了解一些工作需求（切圖，特效..），並把自己之前學到的知識用進去，多練習，多溝通。
④目前，一邊實習，一邊開始看一些比較經典的書籍如《JavaScript權威指南》，深入的掌握PS，了解移動Web H5的開發，同時切切頁面，查漏補缺。
成長篇——初識Node.js（npm，編譯JS等很方便...），理解JS的函數作用域，作用域鏈，原型鏈...還有PS的各種工具...
以後的路（好長，滿滿的都是未來）——了解Webkit渲染原理，深入學習移動端開發，深入理解MVC架構、Http協議，Canvas，Node.js......總之，繼續打怪升級，擁抱變化！
套用電影中的一句話，「拿研究量子物理的大腦來研究js，總覺得有點。。。"
我是動手黨，做項目，一個項目學一個知識點。還有不要著急，生也有涯而前段也無涯，所以工作需要用到什麼，就先學什麼。幹上幾年就成老油條啦。你倒是做點實際的東西啊……………………………………
我也是自學了4個月前端咯~共勉共勉~
iskilltree/skilltree · GitHub跟著這個技能樹點點吧~CSS比JS難。CSS比JS難。CSS比JS難。
犀牛書其實寫得不怎麼樣，建議看《You Don"t Know JS》系列叢書，最好的javascript教科書，沒有之一。對比之下你就知道犀牛書多爛了。
你不會我學弟吧，也是物理學出生，轉戰前端，首先自學過程很無聊，做項目提升很大，做自己的產品經理，一次一個項目，逐步提升難度，對於web性能方面可以看看&<高性能html5&>,切圖不難學起來分分鐘的事，校招大多看的學習能力，怎麼提升自己當然是多敲代碼，少上知乎，多造輪子，坑遇的多了，自然就經驗足了。 還有做前端，不要局限於前端，了解一門後端語言(PHP，python，nodejs，不要拘泥於語言的選擇),拓展自己知識的廣度和深度，非計科出身，如果想要在碼農這條路上走的更遠，就得學學，計算機組成原理，操作系統，數據結構與演算法，網路協議，這些基礎知識也許這些在實際的前端工作中作用不大，但是卻能提升你思考問題的全面性，還有處理問題的邏輯習慣。無聊的時候也可以自己買個雲伺服器，搭個小網站，自己搞定伺服器搭建，前端，後端，資料庫，搞不定就去網上找，百度不到就谷歌初級問題基本可以找到，或者找到思路，現在真的是個好時代，個人獲取知識的成本幾乎為零。 前端框架方面，可以看看jq原理，目前挺火的react，angular。
找一些網站的設計稿自己切一下圖 (現代瀏覽器像素級還原，IE6+ 布局沒嚴重錯誤)
根據一些同時有移動版和桌面版的設計稿切一下響應式，保證任何情況下 (e.g. 寬度 &>=320) 布局不出錯，設計圖覆蓋的尺寸可以實現像素還原原生 JS 學好後學 jQuery 和選擇一個 MVC/MVVM 框架 (然而千萬不要學 React 否則你會分分鐘痛不欲生)
用一個 MVVM 框架和一個路由框架寫一個基於 hashchange 事件的單頁應用，要求兼容 IE8+ 和其他現代瀏覽器 (伺服器端只要求提供 JSON API—你跟著 http://ASP.NET 的教程走就行了)
或者用 history.pushState() 和 popstate 事件寫一個單頁，要求完整支持 IE10+ 和其他現代瀏覽器，IE8 和 9 就 fallback 到一般的導航研究 Bootstrap/Foundation/AmazeUI 等 CSS 庫內部實現
學習 BEM 等 CSS 規範學一下 SCSS 等編譯成 CSS 的語言，TypeScript 等編譯成 JavaScript 的語言。然後了解一下 Node 的各種工具，會他們的拼寫就行了
npm, Grunt, gulp.js, webpack (大小寫不一定對具體看官網)// 坐和放寬之後的更新
其實計算機基礎方面唯一需要在這個階段了解的就是計算機網路。學會切圖後就可以先學計算機網路，只要了解 HTTP 部分就可以了。這對於優化資源載入和 Ajax, 解決謎之緩存問題等可以起到一定理論指導作用，也讓你對翻♂牆軟體實現的內部機制有所了解。// 更新結束你覺得自己可以去應聘前端了。這個時候再去背一點數據結構，二叉樹和排序。死記硬背就好，拿到 offer 就可以忘了 (逃