Come on Baby! 你也可以成為Web開發(fā)工程師！——Web開發(fā)工程師完全成長(zhǎng)指南
時(shí)間：2022-07-27 20:09:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2022-07-27 20:09:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
原文鏈接：The Practical Guide to Becoming a Professional Web Developer
作者：Bill Sourour
轉(zhuǎn)載請(qǐng)?zhí)崆皽贤ú⒆⒚鞒鎏帲?/b>
這篇文章是教你如何成為一名專業(yè)Web開發(fā)工程師的養(yǎng)成指南。我從事Web開發(fā)的相關(guān)工作已經(jīng)有20個(gè)年頭了。在工作中我也很樂于幫助其他開發(fā)者。在接下來(lái)的內(nèi)容里，我將告訴你想要成為一名Web開發(fā)者應(yīng)該學(xué)些什么？怎么去學(xué)？在哪里學(xué)？（大多數(shù)是免費(fèi)的資源）。最后我還會(huì)介紹如何獲得開發(fā)的實(shí)踐經(jīng)驗(yàn)，以及最重要的一點(diǎn)——如何通過(guò)寫代碼賺到錢。
譯者按：為了對(duì)初學(xué)者更加友好，我會(huì)將原文中的大多數(shù)鏈接替換成同類中文資源。
在我們正式開始之前有兩點(diǎn)需要提醒的：
1.你完全可以跳過(guò)文中的部分內(nèi)容。
不管你現(xiàn)在處于學(xué)習(xí)Web開發(fā)的那個(gè)階段，這篇指南都會(huì)對(duì)你有所幫助。本篇教程的每個(gè)章節(jié)根據(jù)描述你掌握知識(shí)的進(jìn)度命名。你可以直接跳到最符合你當(dāng)前情況的部分開始讀。不過(guò)作為一名初學(xué)者，或者只是才打算開始學(xué)習(xí)Web開發(fā)，還是從頭開始閱讀吧。
2.在你選定某個(gè)專業(yè)方向之前先把所有的都嘗試一下。
賺錢不是最重要的，重要的是你需要熱愛你的工作。但你不去嘗試永遠(yuǎn)都不會(huì)知道自己喜歡什么。
在這篇教程中將會(huì)帶你領(lǐng)略Web開發(fā)的各個(gè)領(lǐng)域，首先淺嘗輒止，然后再幫你挑選你所感興趣的方向。在一開始，你不需要精通任何技術(shù)，只需要了解一些皮毛然后就去看看別的。直到你找到了一個(gè)想要努力的方向，再進(jìn)行深入的學(xué)習(xí)。
我已經(jīng)決定要學(xué)習(xí)編程了。我也喜歡Web開發(fā)，但就是不知道可以從哪里開始。
我先得恭喜你做了一個(gè)明智的決定！下定決心的你其實(shí)已經(jīng)邁出了一大步，學(xué)習(xí)Web開發(fā)非常刺激，當(dāng)然有時(shí)候也會(huì)充滿挫折。不過(guò)別擔(dān)心，我這不就是來(lái)幫你的么？
你的首要任務(wù)是盡快地了解Web開發(fā)各個(gè)領(lǐng)域的基礎(chǔ)知識(shí)（通常也統(tǒng)稱“全?！保?。你需要掌握的知識(shí)會(huì)非常寬泛，但也都很基礎(chǔ)。這些都只是為了幫助你尋找到你最喜歡的領(lǐng)域，同時(shí)掌握一些最基本的通用知識(shí)。這樣在你決定專精某項(xiàng)知識(shí)之前，也能處理好各個(gè)方面的困難和挑戰(zhàn)。
學(xué)習(xí)HTML基礎(chǔ)
Hypertext Markup Language 超文本標(biāo)記語(yǔ)言(HTML)用來(lái)控制描述現(xiàn)在你在瀏覽器里看到的網(wǎng)頁(yè)的內(nèi)容和布局。從這里開始，你將會(huì)了解到如何創(chuàng)建可以與之交互的 用戶界面。在你掌握了更多的語(yǔ)言之后，現(xiàn)在的所學(xué)就會(huì)變得尤為重要。
我在下面列出了你需要掌握的有關(guān)HTML的基礎(chǔ)知識(shí)（都是免費(fèi)的在線教程，下列教程來(lái)自菜鳥教程）：
- 簡(jiǎn)介
- 元素
- 標(biāo)題
- 段落
- 頭部
- 列表
- 鏈接
- 圖像
- 表格
- 表單
- 總結(jié)
我現(xiàn)在已經(jīng)掌握了HTML基礎(chǔ)
很棒！這是重要的第一步！現(xiàn)在你該學(xué)點(diǎn)基本的JavaScript啦~
學(xué)習(xí)JavaScript基礎(chǔ)
JavaScript是專門針對(duì)Web的編程語(yǔ)言，所有的主流瀏覽器（Chrome, Firefox, Safari, IE等）都內(nèi)置支持JavaScript語(yǔ)言。你之前使用過(guò)的所有網(wǎng)站和Web應(yīng)用也都包含大量的JavaScript代碼。并且現(xiàn)在的JavaScript語(yǔ)言已經(jīng)擴(kuò)展到了包括服務(wù)器端、桌面應(yīng)用、物聯(lián)網(wǎng)設(shè)備在內(nèi)的各類平臺(tái)。
不過(guò)這才剛剛開始，你只需要了解一些基礎(chǔ)知識(shí)（以下鏈接來(lái)自廖雪峰JavaScript教程）：
- 快速入門
- 數(shù)據(jù)類型和變量
- 數(shù)組
- 對(duì)象
- 條件判斷
- 循環(huán)
- 函數(shù)
- DOM瀏覽器對(duì)象
- 操作DOM
- JSON
- AJAX
- 變量作用域
我已經(jīng)掌握了HTML和JavaScript基礎(chǔ)
你真棒~接下來(lái)該收服CSS基礎(chǔ)知識(shí)啦！
學(xué)習(xí)CSS基礎(chǔ)
CSS 的全稱是層疊樣式表(Cascading Style Sheets)。CSS被用來(lái)定義你在HTML中編寫的元素的外觀。跟著MDN上的CSS入門教程學(xué)習(xí)基礎(chǔ)知識(shí)，在這里學(xué)習(xí)如何用CSS對(duì)網(wǎng)頁(yè)布局。
轉(zhuǎn)向后端
HTML/JavaScript/CSS都是“Web前端開發(fā)”的相關(guān)知識(shí)。也就是說(shuō)你目前掌握的語(yǔ)言基本都是在瀏覽器里運(yùn)行的。是時(shí)候看看后端是什么樣子的了。接下來(lái)我們將學(xué)習(xí)如何寫在服務(wù)器上運(yùn)行的代碼。你并不需要買一臺(tái)真正的服務(wù)器回來(lái)，你自己的電腦已經(jīng)足夠強(qiáng)大啦。
有非常多的后端的編程語(yǔ)言，不過(guò)既然你已經(jīng)了解了JavaScript，我推薦你學(xué)習(xí)NodeJS.NodeJS是一項(xiàng)能夠在服務(wù)器端運(yùn)行JS代碼的技術(shù)。
除此外，你還需要了解一下Express框架和MongoDB.
Express
Express是一個(gè)基于NodeJS的Web應(yīng)用開發(fā)框架，用來(lái)更方便地同網(wǎng)頁(yè)進(jìn)行請(qǐng)求響應(yīng)交互。
Mongo DB
Mongo DB是一個(gè)數(shù)據(jù)庫(kù)。用來(lái)存儲(chǔ)和訪問數(shù)據(jù)。
在這里學(xué)習(xí)Node.js + Express + MongoDB教程。請(qǐng)放心，你并不需要完全精通Node或Mongo，只需要跟著教程讓這個(gè)技術(shù)棧的應(yīng)用跑起來(lái)就好了。
我需要在前端、后端和全棧之間做抉擇。
在你確定你你已經(jīng)理解了前后端的技術(shù)之后，就是時(shí)候做決定了?？扇绻銓?duì)之前所學(xué)還是一知半解，最好先返回去再了解一些相關(guān)的知識(shí)。（這就和玩游戲教學(xué)關(guān)卡通關(guān)之后選職業(yè)一個(gè)概念）
目前，你一共寫了兩種代碼。一種用來(lái)和用戶交互，另一種和數(shù)據(jù)交互。你更喜歡哪一種？
用戶交互？那么你的選擇是前端開發(fā)工程師！ 數(shù)據(jù)交互？那你的選擇是后端開發(fā)工程師！ 都喜歡？恭喜你，你將選擇成為一個(gè)全棧工程師！
哪個(gè)也沒興趣？也要祝賀你，通過(guò)之前的學(xué)習(xí)，你發(fā)現(xiàn)了其實(shí)Web開發(fā)并不適合你，你也不必在這上面浪費(fèi)更多的時(shí)間和金錢了。還是不想放棄？也許你只是沒找到自己喜歡的編程語(yǔ)言？在后面的“我想成為后端工程師”的章節(jié)里挑選你喜歡的語(yǔ)言吧！
我想成為全棧工程師！
很不錯(cuò)！看來(lái)你得把這篇文章完完整整地讀完啦！你需要學(xué)習(xí)的包含前端和后端的所有知識(shí)。
我已經(jīng)掌握了JavaScript/HTML/CSS基礎(chǔ)，我想成為一名前端開發(fā)工程師。
想要成為一名合格的前端開發(fā)工程師，你需要熟練掌握HTML/CSS/客戶端JavaScript.同時(shí)你也需要熟練使用一些開發(fā)框架。
在開始下面內(nèi)容的學(xué)習(xí)之前，確保你已經(jīng)掌握了HTML基礎(chǔ)知識(shí)。
HTML進(jìn)階
JavaScript進(jìn)階
為了讓你更深入地了解JavaScrpit，我要推薦一個(gè)系列書籍，由Kyle Simpson撰寫的《你不知道的JS》。而且整套書都在Github上開源免費(fèi)！
- You-Dont-Know-JS on Github
- 你不知道的JavaScript（上卷）
- 你不知道的JavaScript（中卷）
除了這套書以外，MDN的JavaScript參考文檔也會(huì)對(duì)你非常有用。
掌握了“前端三劍客”（HTML/CSS/JavaScript）固然很重要。但你想真的寫出一些可以賺錢的代碼，還需要熟悉一些框架。
學(xué)習(xí)jQuery
jQuery是史上最受歡迎的JS庫(kù)。雖然一些新近的框架不再依賴jQuery，但假如你想盡快找到一份工作的話，掌握jQuery是十分有必要的。
我推薦你在FreeCodeCamp上學(xué)習(xí)jQuery。之后你可以在jQuery學(xué)習(xí)官網(wǎng)上了解更多的內(nèi)容。
同時(shí)也不要忘了收藏jQueryAPI文檔隨時(shí)查閱。
學(xué)習(xí)主流JS框架
框架是為了幫助我們解決開發(fā)中經(jīng)常會(huì)遇到的問題而開發(fā)出來(lái)的。JavaScript的框架數(shù)不勝數(shù)，我們來(lái)看看新近流行的一些JS框架，你也可以通過(guò)搜索引擎和招聘網(wǎng)站掌握各類框架的需求信息。
React
React是Facebook為了配合Flux架構(gòu)開發(fā)的一款JS框架。主要用來(lái)構(gòu)建用戶界面。最近一段時(shí)間異常的火爆，已經(jīng)遠(yuǎn)遠(yuǎn)甩開了AngularJS.所以你還在等什么：
- React 入門實(shí)例教程
- React 教程
Angular 1 & 2
Angular JS是Google推出的JS框架。剛推出的時(shí)候也是紅極一時(shí)，Angular適用于開發(fā)中大型的Web應(yīng)用。不過(guò)有一點(diǎn)惡心人的是，Google在計(jì)劃推出Angular 2版本時(shí)，感覺他們有必要完全重寫。結(jié)果就導(dǎo)致了1和2用起來(lái)感覺完全像是兩個(gè)不同的框架。假如你想成為一個(gè)Angular專家，你就相當(dāng)于要同時(shí)掌握兩個(gè)框架。
- AngularJS 1 教程
- Angular 2 for TypeScript 中文手冊(cè)
Vue.js
Vue.js的開發(fā)者是尤雨溪。大神也在玩本站襖。Vue.js是一個(gè)用來(lái)構(gòu)筑用戶界面的非常輕量的框架，使用非常方便，上手也會(huì)很快。并且真的很強(qiáng)大，不會(huì)有Angular那么臃腫，也不像React的JSX那么變態(tài)。所以我很推薦新手從學(xué)習(xí)Vue.js開始。
- Vue.js中文官網(wǎng)
- 一個(gè)簡(jiǎn)單的 vue.js 實(shí)踐教程
學(xué)習(xí)Bootstrap
（譯者）學(xué)習(xí)Bootstrap可以看我之前總結(jié)的這篇：
- 有關(guān)Bootstrap你想要知道的都在這里
當(dāng)然Bootstrap也可以和之前所學(xué)的框架協(xié)同使用：
- React Bootstrap
- Angular Bootstrap
恭喜！掌握了上述內(nèi)容之后，你已經(jīng)是一名合格的前端開發(fā)工程師了。
我想成為一名后端開發(fā)工程師！
很不錯(cuò)的選擇！首先你需要選擇后端開發(fā)語(yǔ)言。可供選擇的特別多，各有優(yōu)劣。下圖是一個(gè)編程語(yǔ)言受歡迎程度的排行榜。被框選起來(lái)的是Web開發(fā)中經(jīng)常會(huì)用到的語(yǔ)言。
要是你完全是個(gè)新手，不要著急做決定，先了解一下這幾種語(yǔ)言的特性和語(yǔ)法，最后挑選出你喜歡的。
要是你已經(jīng)掌握了某種語(yǔ)言，那么就專注于它吧！
Java
Java是一門廣受歡迎的跨平臺(tái)語(yǔ)言。它由Oracle公司開發(fā)和維護(hù)。Java可以用來(lái)開發(fā)Android應(yīng)用，桌面軟件，當(dāng)然也能用來(lái)開發(fā)Web應(yīng)用（只用做后端，或者用JSP技術(shù)也可以開發(fā)前端）。Java語(yǔ)言健壯可靠，而且網(wǎng)上有著無(wú)數(shù)的學(xué)習(xí)Java的資源。同樣也是在大學(xué)里廣泛教授的面向?qū)ο缶幊陶Z(yǔ)言。
- Java快速教程
- Java Tutorial for Complete Beginners
C#
C# 是微軟為了對(duì)抗Java開發(fā)的編程語(yǔ)言。它在微軟的平臺(tái)上擁有良好的支持。它同樣也是面向?qū)ο蟮?，也不限于開發(fā)Web應(yīng)用、桌面軟件等。要是你忠于Windows的話，C#也許是個(gè)不錯(cuò)的選擇。
Python
Python是最適合新手，最容易學(xué)習(xí)的編程語(yǔ)言。而且Python廣受歡迎，可以被應(yīng)用在各個(gè)領(lǐng)域。人生苦短，請(qǐng)用Python！
JavaScript
相信通過(guò)之前的學(xué)習(xí)你對(duì)JavaScript已經(jīng)有所了解了。NodeJS的出現(xiàn)讓JS在服務(wù)器端運(yùn)行成為了可能?，F(xiàn)在再深入了解一下吧！
Ruby
Ruby是一朵奇葩。愛它的人對(duì)它癡狂，它處在編程語(yǔ)言排行榜的前10名，但增長(zhǎng)卻非常緩慢。Ruby本身是一種介于函數(shù)式編程和命令是編程之間的語(yǔ)言。我推薦你嘗試一下，興許你會(huì)變成它的狂熱粉絲呢。另外，近些年來(lái)Ruby語(yǔ)言的工作機(jī)會(huì)也有很多。
PHP
雖然近一段時(shí)間PHP看起來(lái)有點(diǎn)過(guò)氣了。但是請(qǐng)不要忘記，PHP是全世界最好的語(yǔ)言。而且單就Web開發(fā)這一塊來(lái)講，全世界的網(wǎng)站有多一半是用PHP開發(fā)的。PHP7的推出極大地改善了其運(yùn)行效率，Laravel框架也讓編寫PHP代碼變得無(wú)比優(yōu)雅。PHP不是原作者的菜，但譯者最早學(xué)習(xí)的編程語(yǔ)言就是PHP，在這里也不想挑起語(yǔ)言之爭(zhēng)，總之PHP值得你嘗試著學(xué)習(xí)一下。
我已經(jīng)學(xué)了很多Web開發(fā)的知識(shí)，但是缺乏實(shí)踐經(jīng)驗(yàn)。
沒有任何經(jīng)驗(yàn)的話是很難找到工作的。
第一步是試著完成一兩個(gè)個(gè)人項(xiàng)目，來(lái)熟悉掌握開發(fā)流程。
在你的項(xiàng)目開發(fā)完畢后，試著在Github這類平臺(tái)上發(fā)布會(huì)對(duì)你很有幫助。
Github
Github基于版本控制軟件Git建立，是全球最大的開源項(xiàng)目托管網(wǎng)站。你可以在上面儲(chǔ)存、管理、發(fā)布你的代碼。Github是你作為一名開發(fā)者必須使用的網(wǎng)站。
開發(fā)個(gè)人項(xiàng)目
下面推薦一些你可以嘗試的個(gè)人開發(fā)項(xiàng)目：
- 使用React、Node.js、MongoDB、Socket.IO開發(fā)一個(gè)角色投票應(yīng)用
- Laravel完成一個(gè)多用戶的博客系統(tǒng)
FreeCodeCamp上面同樣有著各種各樣的實(shí)踐項(xiàng)目，在這里推薦兩個(gè)：
- 創(chuàng)建一個(gè)番茄鐘計(jì)時(shí)器 （純前端）
- 開發(fā)一個(gè)書籍分享網(wǎng)站 （全棧）
實(shí)踐經(jīng)驗(yàn)
接下來(lái)你需要一些真實(shí)的經(jīng)驗(yàn)。這意味著你需要與他人協(xié)作，參與到真實(shí)的項(xiàng)目中來(lái)。個(gè)人項(xiàng)目自然有其用處，但在找工作時(shí)還不夠有說(shuō)服力。
1.為開源項(xiàng)目做貢獻(xiàn)
Github上面有著成千上萬(wàn)的開源項(xiàng)目，這些項(xiàng)目中有著許多公開的bug等著你去提供修復(fù)。在你的簡(jiǎn)歷中加上你為一些知名項(xiàng)目貢獻(xiàn)代碼的事跡，將會(huì)是你濃墨重彩的一筆。你可以通過(guò)Code Triage來(lái)關(guān)注你感興趣的項(xiàng)目進(jìn)展。
2.為你的家人或朋友“打工”
專門為你做生意的朋友或家人開發(fā)一款Web應(yīng)用或者一個(gè)網(wǎng)站吧。為他們解決實(shí)際的問題，給他們提供幫助。不過(guò)在選人之前最好慎重考慮，最好這個(gè)人的需求可以在90天左右的時(shí)間開發(fā)完畢，而且你們倆的關(guān)系也最好是比較親近的。不要因?yàn)殚_發(fā)中途的一些矛盾搞得你們最后連朋友都沒得做。
3.為非盈利組織工作
這將會(huì)是一個(gè)非常棒的選擇！為非盈利機(jī)構(gòu)開發(fā)Web應(yīng)用，解決他們的實(shí)際問題。你可以在Catch a Fire上找到這樣的項(xiàng)目。另外，如果你通過(guò)了FreeCodeCamp的所有挑戰(zhàn)，你也能夠獲得為非盈利機(jī)構(gòu)開發(fā)Web項(xiàng)目的機(jī)會(huì)。
4.出賣勞動(dòng)力
你可以在網(wǎng)上找一些外包項(xiàng)目來(lái)做，為了避免廣告之嫌，譯者在這里就不推薦國(guó)內(nèi)的網(wǎng)站了，反正一搜一大把。
我現(xiàn)在已經(jīng)積累了一些實(shí)踐經(jīng)驗(yàn)了，怎么才能找到工作呢？
寫一份兒牛X閃閃的簡(jiǎn)歷
- 一份優(yōu)秀的前端開發(fā)工程師簡(jiǎn)歷是怎么樣的？
- 程序員簡(jiǎn)歷應(yīng)該怎么寫？
開發(fā)一個(gè)在線簡(jiǎn)歷網(wǎng)站
開發(fā)一個(gè)介紹你自己的個(gè)人站點(diǎn)！你可以把你之前做過(guò)的所有項(xiàng)目都鏈接到上面。說(shuō)明各個(gè)項(xiàng)目都解決了什么樣的實(shí)際問題。這會(huì)對(duì)你很有幫助！
準(zhǔn)備好編程面試
- 前端面試題收集
- Python的面試題
- 一套完整的學(xué)習(xí)手冊(cè)幫助自己準(zhǔn)備 Google 的面試
掌握通用的面試技巧
- 面試70問 經(jīng)典回答
- 程序員面試要準(zhǔn)備哪些方面的內(nèi)容？
- 修改面試前你都做了什么準(zhǔn)備？
出發(fā)去找工作吧！
不要妄圖一瞬間就找到你心儀的公司和喜愛的崗位。先找到一份可以寫代碼養(yǎng)活自己的工作再說(shuō)。等到你積累了更多的經(jīng)驗(yàn)，自然也就能邁出下一步了。
我想要成為一名自由職業(yè)者！
自己當(dāng)自己的老板聽起來(lái)是非常爽的。但事實(shí)上自由職業(yè)并不像想象的那么輕松。在這里推薦Brennan Dunn寫了許多有關(guān)自由職業(yè)者的文章：
DoubleYourFreelancing.com
在外國(guó)的網(wǎng)站上注冊(cè)成為自由職業(yè)者對(duì)大多數(shù)人來(lái)說(shuō)有些不切實(shí)際，國(guó)內(nèi)這一塊發(fā)展也比較混亂，為了避免廣告之嫌，譯者也就不推薦鏈接了。
我朝著成為一名Web開發(fā)者的方向努力了，但我現(xiàn)在感覺力不從心。
我很理解你的心情。這本來(lái)就不是一件容易的事情，而且任何口口聲聲說(shuō)著學(xué)Web開發(fā)很容易的人自己其實(shí)都不怎么樣，要么就是想要騙你錢。假如你現(xiàn)在有些不知所措，那么重新思考一下這些問題：
不忘初心
問問你自己，你甚至可以寫下來(lái)！你當(dāng)初為什么要決定走上這條路？你的想法仍然沒有改變么？那么為什么要停下來(lái)呢！？繼續(xù)迎難而上吧！
腳踏實(shí)地
現(xiàn)在你已經(jīng)考慮了很多，腦子里想到了最壞的結(jié)果，也期冀最好的愿景，還有現(xiàn)實(shí)中最可能發(fā)生的情況。你完全可以把這些想法都記錄下來(lái)。沒有必要畏懼，面對(duì)現(xiàn)實(shí)，腳踏實(shí)地地一步步走下去。
歡迎在評(píng)論區(qū)分享你的心得體會(huì)。
歡迎關(guān)注我的專欄 https://zhuanlan.zhihu.com/icode
關(guān)鍵詞：工程師,指南,成長(zhǎng)
在線咨詢