本科生如何系統地學習前端開發？

說一下我個人理解跟建議，僅供參考

第一步，先看一本前端入門的書＋《Javascript權威指南》：前端入門的書隨便哪本都行，主要是了解一下前端HTML + CSS + Javascript大致是怎么回事，有個概念，腦海中留個大致輪廓就好，非要推薦的話，可以看看《HTML5權威指南》，Apress的書都還不錯。入門之后，啃一下《Javascript權威指南》這本JS中的圣經，傳說中的犀牛書。成為一個優秀的前端工程師的充要條件是什么我不知道，但我覺得至少完完整整的啃過一次犀牛書肯定是一個必要條件。這一步完成就算入門了吧。

第二步，練習實踐打代碼：如果有課程大作業的話，可以好好做做不要劃水。要是沒有的話，可以在Website Templates上找幾個模版，自己實現一下它的樣式和動效，練一下手。之后可以嘗試著去接一些外包做做，或者在老師的實驗室、學校的組織社團里做一些這方面的前端coding的工作。總得來說，就是要練手。說實在的，前端很多的工作搬磚性質挺強的，所以無它，唯手熟爾。個人建議，第二步可以在犀牛書看到12章左右的時候，就開始了。這一步走了大半年能算上道了吧。

第三步，在實踐的過程中學習各類流行的庫、框架和工具：打代碼的過程中，總會接觸到一些庫啊，框架啊，工具啊等等，有的是因為突然感覺效率不高，然后自己找了一些用，有的是因為某個項目或者工作里要求使用某些庫和框架。在這種時候，建議不要通過書或者視頻來學習這些庫和框架，而是通過他們的官方文檔來進行學習。原因有三點，首先，因為前端的發展很快，緊跟腳步還是滿重要的，書和視頻這種東西都有滯后性，等好的書和視頻都出來了，說不定就已經流行大半年了。其次，就是其實書和視頻中所講的所有內容，其實基本上都能從這些庫和框架中的官方文檔中找到，所以學會通過文檔來學習才是真正一勞永逸的正確姿勢。最后，看文檔其實是一個使用工具的過程，無論什么語言、框架和庫，記住所有細節顯然是不太現實的，學會如何快速的利用文檔回憶或者查找相關的技術點也是作為一個優秀工程師必備的技能。第三步可以和第二步同時進行。另外建議庫和框架有的可以會用就行，不必深究，但是有些優秀的、流行的還是可以好好學一下，深挖一下，比如jQuery，Angular，React，Bootstrap，Pure，Ionic，Framework7等等。這幾個都能用得熟練的話，算得上合格了吧。

第四步，學習研究一些優秀庫和框架的源碼、實現與思想：庫和框架說到底都是工具，用多了，作為一個有追求的、好奇的工程師，總歸會想研究一下這個工具的源碼、實現和其設計思想，在這個過程中，你可以閱讀上世界上最優秀的前端程序員寫的代碼和使用的設計思想，對你自己的姿勢水平提升會有很大的幫助。之前在阿里面試的時候，二面的leader建議我如果想看源碼的話，可以看看雅虎的YUI，是一個非常學院派的庫。當然看看jQuery肯定也沒問題，挺好的。但是不建議一下子就看Angular，React這種這么大而全的框架，可以深究一下整體的設計思想和部分部件的源碼吧。這一步搞了大半年的話，算得上一個優秀的前端工程師了。

第五步，嘗試加入一些開源庫和框架的工作：研究多了，總會感覺某些框架或者某些庫有些小瑕疵，想自己試試。或者之前自己經常寫的一些樣式和功能想抽象出來，弄出一個通用的組件和庫什么的。這個過程，俗稱造輪子。可能不一定造出的輪子比現有的好，但是在這個過程中，你會漲很多姿勢水平，而且造著造著，誰不定就能造出一個大家都喜愛用的輪子。達到這一步，我覺得你能算得上一個大牛級別的前端工程師了。

第六步，加入頂級庫、框架的核心開發組或者研究、開發語言本身：這一步完全不了解，可以作為一個目標，個人感覺到了這一步，可以算的上前端中的大神了。例如之前在新浪，現在在鏈家的鳥哥，是PHP的核心開發組成員，這種級別，足以稱得上大神。

其他：

1. 構建工具推薦使用grunt＋npm＋bower

2. 編輯器推薦使用sublime，IDE推薦使用webstorm