web前端開發，自學的流程可以怎樣?

12-28

大一男，專業軟體設計，但是初
學c語言後，並不是很有興趣，但是不想大學荒廢，或者一味學習沒興趣的東西。我們的專業課里有網頁設計，我很喜歡，感覺自己設計的東西能立刻看到，很有興趣，之後了解到了web前端開發，想問問知乎各位大拿，如何自學web前端開發。比如基礎走哪些書，進階了怎樣，然後如何完善。還有想問有沒有哪些相關的論壇，可以推薦一下。謝謝啦~

推薦一下，最近在寫的一個開源應用——Growth。

APP來源於: 對Web應用開發的一個流程認識。

當我到了一個項目時，我發現這是一個遺留系統（沒有人知道為什麼這裡是這樣的），儘管我們有足夠的測試覆蓋率。接著在我們的另外一個項目里，我們不得不選擇了基於別的項目組的代碼（畢竟是同樣的業務），這是一份遺留代碼（充滿bug、難以維護），並且沒有人有興緻去維護好別人留下的代碼。隨後，我們開始重構現有的系統，使用新的技術、新的架構。儘管如此，我們的新代碼卻一直徘徊在遺留代碼的邊緣。

最後，我就想到了Web開發實際上就是七個步驟：

從零開始
編碼
上線
數據分析
持續交付
遺留系統
回顧與新架構

即之前的Web七日談，也算是開發的本質：

主頁視圖

主頁視圖如下所示:

技能圖譜。點擊右上角的圖標可以進入技能圖譜，技能圖譜將展示現在你學到的技術棧，並且可以向你推薦未來應該學習的技術棧。圖標上的10則表示你新GET到的功能點數。
學習路線。學習路線是依據七日來規劃的，每一日關注的點不同，如在第一天關注於如何從零開始去搭建項目。
切換視圖。當前有兩種視圖，即路線圖和七日談。

七日談模式

七日談模式關注於一些理論。如下圖所示：

右上角的簡介。會介紹一些每一個事項相關的信息。
GET技能。用於構建技能圖譜、提供成長指南。
工具和書單。提供一些實用的工具，以及閱讀書單等等。

路線圖模式

路線圖關注於一些可以嘗試開始的事項。如下圖所示：

在每個Card中會包含如下的Todo List:

向左滑動即可以完成這個事項。

菜單

Github: phodal/growth · GitHub

在線: Growth Ren

已在360手機助手、小米應用商店、豌豆莢、Google Play等應用商店上線

直接下載：http://fir.im/phodal

歡迎提供意見和反饋~~

授人以漁：我學java自己做的，你也可以試著做一張，然後按照流程督促自己學習。

謝邀。
我不是大拿，但是，幾年前，我也與題主一樣，對如何入門、如何進階感到困惑。題主大一，就已經有了明確的學習方向，給個贊！

先說一下個人覺得重要的事情：練好基本功！練好基本功！練好基本功！

---- 補充一條非常重要的內容 ----

請務必養成寫好代碼、可維護的代碼的習慣/能力。不然會被其他程序員打死的。嗯。或者罵死。除非，你這輩子不跟其他程序員合作，或者不跟其他程序員交流，或者，不打算做程序員。

---- 補充完了， 2017-01-13 ----

【基礎該走哪些書】
推薦的至少讀一遍的：
《JavaScript高級程序設計》（第3版）
《JavaScript權威指南》
《CSS權威指南》

然後，可以利用github pages服務搭建靜態博客。
既然是在學校，那麼，多讀書。一定要打好基礎。

【進階】
只會瀏覽器端開發，目前恐怕入不了各大廠的門檻，強烈學習nodejs。這個過程中，會了解到HTTP相關的知識。

推薦讀物：
《Nodejs與Express開發》
《深入淺出NodeJS》

建議此時也可以接觸一些前端MVC框架，例如AngularJS, VueJS. 推薦學習React，了解前端的組件化開發思想。

【完善自己】
請重視數據結構和演算法。

當你熟練使用某個框架或者庫了以後，可以嘗試去閱讀其源碼。

軟體工程相關的知識，也要重視。例如版本控制（務必熟練掌握Git操作，推薦在線版的《Pro Git 第2版中文版》），敏捷開發，代碼可維護性（編程風格等）。

答非所問一個，其實題主現在覺得前端很好玩，設計能馬上變現，這些都可能是錯覺。我一開始也是這麼入的前端的坑。但是上個暑假實習的時候發現真的做起事來分工是很細的尤其大公司。作為一個普通前端其實很設計沒太大關係，只是實現而已。然而實現當中要考慮的各種組建化，可復用性等等其實還是計算機方面的知識。所以希望題主能夠考慮一下是真的喜歡開發還是設計。明確目標之後全力研究幾年，大學畢業不管選了哪樣應該都有好的結果。

1.w3cschool
2.瀏覽器開發者工具
3.右鍵源碼
4.看開源控制項