Web前端開發:我希望得到的編程學習路線圖

對于一些沒有編程經驗的人來說,一開始就學習web開發會讓人覺得非常困難。因為你的能力處于初始階段(你根本不知道你缺少哪方面的知識),所以在你能夠建立一個任意復雜的網站之前,你可能會認為你需要大概幾個月的時間來夯實計算機方面的基礎知識。

其實并非如此!web開發和CS是不同的,你完全可以在沒有太多計算機基礎的情況下開發學習web開發。我這樣說,完全是根據我自己的經驗。

六個月前,當我開始學習web開發時,我還是一個法律學校的在讀學生,而且幾乎不懂任何關于編程的東西—僅僅在開始學習的前幾個小時了解過一些基本知識。四個月后,我收到了來自Pivotal Labs的offer,接著我離開了法律學校,搬到了舊金山。我非常的幸運地遇到了一位極為優秀導師(從黑客學校獲得的收獲絕對不能忽視),所以我不認為我的故事非常具有代表性。但是我認為這很清楚的表明那些沒有計算機背景的人同樣可以成為web開發者,而且它所花費的時間可能比你想像的要少。

這篇博文是為了嘗試幫助那些剛開始學習web開發的人們。這里展示了一個大概流程,這個路線圖會“告訴你在最初的幾月里需要做什么”,它也是我最開始編碼所遵循的路線。

寫這樣一篇博文的想法已經在我腦海里有一段時間了,只是我認為自己知之甚少,所以始終沒有提筆。在寫這篇文章時我還是覺得自己知道的不限,所以如果你在下面的文章中發現任何錯誤與不正確的地方,請一定幫我指正。

點擊鏈接加入群【Web前端開發學習】:https://jq.qq.com/

四個部分

這里大致列出了長短不一的四個部分知識要點,在你學習的前幾個月里你需要掌握這些要點。

1)? web框架的基礎知識(如Ruby on Rails),又名“包含網站模塊及它們之間連接結構”。

2)? 前端開發,又名“如何使內容出現在正確的位置上,而且在瀏覽器中表現得好看”。

3)? 版本控制,又名“如何使用免費易用的軟件,使程序員能夠有組織地保存他們的程序版本。這樣他們就不用擔心修改代碼所帶來的版本混亂,同時也能夠很好地與其它程序員協同開發”。

4)? 部署,又名“如何真正地將你的網站放到互聯網上”。

我把這幾個部分標記為1到4,但這并不意味著它們之間存在任何特定的順序。你可以同時學習這些東西。

第一部分:選擇一種web框架,并開始學習它

在這個部分所需要花費的時間很像這種模式,即“選擇一種web框架”=>“大概10分鐘之內”。“學習這種框架”=>“很多很多個(快樂的)小時”。

現在有很多的web框架可供選擇。而我要討論的是Ruby on Rails,它是我所知道的最好的框架,因為到處都有關于它的優秀的資源。

那么,什么是web框架?我的理解是這樣的:有框架之前,人們在決定做一個新的網站時,往往每次都需要添加一些相同的東西到新的網站。由于這些都是一些重復無聊的工作,所以程序員開發出了框架(例如Rails),這些框架能夠把很多重復性的工作移到web開發之外。人們喜歡說,Rails代表“約定優于配置”。它的意思是,假如你想按照約定的方式開發,那么Rails會使web開發變得簡單。

相關的資源:

我刻意只選擇了無數Rails/Ruby資源的一小部分來說,因為可選擇的資源實在太多了。

I、閱讀Michael Hartl’s精彩且免費的確Rails教程。一個提示:Hartl的教程雖然非常的清晰全面,但你也不可能輕松的完全理解里面的所有內容。細細地去品味它,一旦你發現一些不能理解的東西時,你一定要弄清楚。如果你發現自己只是盲目地去復制/粘貼它的代碼,只是為了完成而完成教程,那么請你停下來。當遇到不懂的知識點時,立即去下面的資源中查找:

● Google。有些人在博客或論壇上寫的內容可能正是你想知道的東西。當你遇到任何問題時首先去查找Google。

Stack Overflow。在那里程序員回答問題的速度絕對讓人吃驚(我的問題往往都在一個小時內得到答案)。

Railscasts。Ryan Bates擁有超過300與Rails相關的線上直播主題。非常驚人的資源。

Rails Guides。這些真正的專業指南是由Rails的核心團隊成員所寫。這些里面的東西需要時間去消化理解(因為里面的大多數內容都是給有經驗的程序員準備的),但是還是有一些介紹性的東西可以拿來學習。

II、在進行I學習的同時,Hartl將告訴你Rails的工作原理。但是如果你不懂Ruby,那么太多的Rails會讓你覺得像在變魔術。這里列出了你在學習Ruby時應該用到的一些資源,你應該按照資源列出的順序來學習它們:

●?前往Codecademy學習編程的基本元素(循環,數據結構)。目前Codecademy教程是用Javascript講的,不過沒關系—反正無論如何你也是要學Javascript的,況且現在的重點主要是熟悉編碼的基本要素。(強烈建議:如果你想讓學習更有挑戰,登錄projecteuler.net,然后用自己所學的東西來解決上面的一些問題)。

●?閱讀瀏覽這個優秀的Ruby教程。當你閱讀它時,打開你的終端(如Mac上的iterm),打開irb(the interactive ruby shell),并立即開始實踐你正在學習的語法。(搜索“terminal”和“irb”,如果你壓根不知道它們是什么。)

●?在做上述工作的同時,下載并閱讀Ruby Koas。它是一系列豐富有趣的練習,這些練習涵蓋了大多數Ruby的基礎知識。

●?最后,閱讀Eloquent Ruby。Eloquent Ruby適合那些對編程已經達到某種程度的人,所以在你讀完Koans和Ruby教程之前不要去讀它。Eloquent Ruby將不僅告訴你Ruby的工作原理,還會告訴你應該如何使用Ruby(例如,Ruby程序員決定的方式就是最好的實踐方式)。

第二部分:學習前端的東西

對于“前端”和“后端”不完整/不準確的定義可能會是這樣的:web開發中的“后端”是指你存儲和組織網站數據的地方。例如Yelp這樣的網站要存儲很多東西:它的用戶和用戶的個人資料、大量的餐廳信息、哪個用戶對一個特別的餐廳做了什么評價,等等。

Yelp把這些信息存儲在服務器上,這些服務器就是分布在不同地方的大型計算機。當你搜索“Pizza in San Francisco”,你的計算機會發送一個請求到Yelp的服務器,Yelp服務器收到后回發HTML形式的請求信息(Yelp每次都以這種方式來指示服務器的行為方式)到你的瀏覽器,瀏覽器會被渲染(例如:將HTML分離成文本和圖片,然后讓這些圖片和文本在瀏覽器窗口中以正確的方式顯示出來)。這后面的一部分—有關數據應該如何出現在用戶窗口的指令(而不是什么數據應該被回送)—就是“前端”。

相關的資源:

●?在w3schools上學習HTML和CSS。編注:謝謝下面的一些評論者指出了w3schools的不足。大家可以轉到w3Fools獲取一些更好的資源列表。HTML是一種標記語言,用來管理頁面的結構。例如,需要有一個頁頭,后面要跟一個段落。CSS則決定這個頁面顯示出來的樣式。例如,頁頭的字體大小為18,跟著的段落中文字內容為藍色。

●?學習Javascript。Javascript決定了頁面上的元素如何表現。例如,頁頭開始時會被隱藏,但當用戶點擊某個按鈕時又會漸漸地顯示在頁面上。這里有一個非常優秀的Javascript框架稱之為jQuery,它基本上適合每個人使用,而且學習起來有趣直觀。這里有一個小型的教程,


點擊鏈接加入群【Web前端開發學習】:https://jq.qq.com/

第三部分:學習版本控制(如:Git)

大致地說,版本控制系統使程序員能夠在任何時間點及時的保存(正式說法是“commit”)他們的代碼。當一個項目結束時,一個程序員可能已經積累了數百或數千份這樣的代碼備份。

我之前并沒有意識到版本控制的重要性。當我在寫一篇文章時,我并沒有把我對文章做的每一次修改保存到Word文檔中。當我寫代碼時,情況會有所不同嗎?

事實證明,答案至少是兩方面的。首先,程序員寫代碼時往往會導致意想不到的問題。當問題發生時,我們可以很輕松地回滾到上一個正常工作的代碼版本。然后,程序員經常工作于同一個項目中。在這種情況下,他們需要能夠很輕松地合并他們的代碼。類似Git這樣的版本控制系統(目前最流行的)可以很容易地做到以上兩點。

相關的資源:

Hartl會向你介紹Git,但他不會解釋得太多。要了解更多,去這里:

●?Git介紹:由Github的人員建立(這是一個了不起的網站,它讓程序員很容易地共享代碼并協同工作—你應該最先訪問Github去學習)。

●?Git進階:感謝評論者Polygonchorus提供的這個網站,看起來真的很棒。

●?Git指南:新穎且簡單。在這里可以學習基本的命令。

●?Git的社區圖書:一個很好的參考資料,你可能不需要從頭到尾的通篇閱讀它。

第四部分:學習如何部署(如Heroku)

當你開發網站時,絕大多數時間你都會在你的開發環境中去驗證檢查—換句話說,就是在你自己的電腦上,而不是在互聯網上。

擁有這樣一個開發環境的理由很簡單:將你的代碼上載到一個遠程服務器需要一定的時間(例如,上載到互聯網中一個實際的服務器上)。由于你的網站正處于開發階段,你需要不斷地檢查你的網站,而每次當你上載新的代碼時,你都需要20-30秒去等待服務器的響應,然后才能看到新代碼運行的效果,這確實很煩人。

當你覺得準備好了,你可以很容易地使用Heroku來部署你的代碼(Hartl說明了怎樣去部署)。這里是在Rails3環境下設置Heroku的相關信息:

關于此路線圖的一些重要想法

以上的這個資源足夠你學習幾個月的,但它們不會帶你走得更遠。我只是希望,在學習過那么多知識之后,你能夠從自己建立的項目中學習提高。下面是一些離別的想法:

選擇一個能激發你興趣的想法,并在你覺得準備好之前就付諸于實踐。我甚至建議你在完成Hartl教程之前就開始你自己的項目。工作于自己的項目,是讓你迷上web開發最容易的方法。

我在這里提到了一些優秀的學習資源,當你要建立一個自己的網站時,這些資源只涵蓋了很小一部分知識。時刻保持查閱未知知識點的習慣,不用擔心—即使是最好的程序員也需要這樣做。

你會經常地遇到bug和其它一些問題。這可能會讓人沮喪,但你要盡量保持冷靜,并系統地去思考。記住實踐是解決問題的最佳方法,同時記錄下那些經常出現的bug。當問題出現時,思考問題出現的可能路徑(類似這樣的推理過程:OK,我的用戶無法正確登錄。這可能由什么原因造成?嗯…這可能是A、B或C造成的。如果是A,我可能會想到…)。寫出來或者大聲說出來,如果這樣有幫助的話。千萬不要只是坐在那里,盯著代碼,并希望能夠頓悟。

與其它程序員一起工作,并向他們學習。與其他人一起編碼并討論代碼,我覺得這是最快最有趣的學習方式(我非常推薦結對編程)。

祝你好運!

—————————————-

有些評論指出,由于web開發只是編程的一個子集,本文標題用“學習web開發”取代“學習編程”可能更好。他們的觀點非常對,所以我希望本文的標題不會誤導人們認為web開發就是編程的全部(其實還有很多,很多我們不懂的東西)。這么理解吧,web開發仍然是編程的一個子集,所以那些學習web開發的人同時也在學習如何編程。

想學好前端的可以來我們晚上的課堂聽課,每天晚上都會講一個小案例或小項目或分析前端面試以及工作和發展,更多的是談一些學習路線和方法,加web前端開發學習qq群:617327703(這些都是免費的,每天都有)給你課堂地址。群里還會不定時的傳些資料

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,563評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,694評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,672評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,965評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,690評論 6 413
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,019評論 1 329
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,013評論 3 449
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,188評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,718評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,438評論 3 360
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,667評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,149評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,845評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,252評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,590評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,384評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,635評論 2 380

推薦閱讀更多精彩內容

  • 一、異同對比選擇1、Python和ruby的相同點: * 都強調語法簡單,都具有更一般的表達方式。python是縮...
    沃倫蓋茨閱讀 4,173評論 2 24
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,765評論 25 708
  • 蝶戀花·桃花 蝶戀花·桃花(一) 什川四月花爛漫。 風光旖旎,客游桃梨園。 雙橋聳峙花錦簇, 岸邊垂柳醉春煙。 梨...
    魏周全閱讀 729評論 0 0
  • 《豫章喻氏宗譜源流序》 古人錫土賜姓,帝王元制也。別其氏族,乃諸侯之制也。若夫大夫有家,以大史掌...
    雨后嘉茗閱讀 4,323評論 4 7
  • 關 注“武 漢 IT 行 業 指 南”掌 握 第 一 手 IT 情 報 你 就 是 下 一 個 IT 之 王 01...
    IT行業情報局閱讀 344評論 0 0