高貴的前端程序猿們：

如何在前端開發這種高精尖的技術領域找到心儀的工作？實現在咖啡館喝喝咖啡敲敲代碼就能升職加薪、買房買車、迎娶白富美走上人生巔峰的職業夢想？這篇《進化論：從0到100，前端猿茁壯成長的精神飼料史》，肯定能給你事業的加速動力。

[[177988]]

前端開發工作已經變的越來越復雜，僅僅是想羅列一份前端開發的學習列表就已經是一件艱巨的工作。曾經只要會編寫HTML, CSS和Javascript就是能夠找到一份前端開發工作的全部要求。而現在，web開發遠遠不止是簡單編碼。因為我們的互聯網上有了更多的內容，也因為有更多的人、更多設備可以訪問互聯網,  web前端開發技能也就更多了。我們現在需要考慮的問題很多，比如載入時間，性能，不同的屏幕尺寸, 不同的輸入方式, build系統, 部署策略，還有如何組織好我們的代碼。

[[177989]]

這還是想象中前端開發么？好吧其實只要你有熱情，這些還是很有趣的，現在就來仔細看看，一份前端開發的工作，到底需要你準備些什么?

入行行頭：5大硬件

請準備好以下東西

1. 一顆人類的大腦：智商在平均水平線以上即可

2. 一份強烈的渴望：我的代碼要可以運行在任何一個有瀏覽器的設備上。

3. 一臺筆記本電腦：不需要花費很多錢得那種，只要它可以運行Windows, Mac OS X, 或Linux系統。當然你也可以只用一臺臺式機，但是那樣就不能帶著它坐在咖啡館里...

4. 一個文本編輯器：可以推薦的比如Atom,Visual Studio Code, TextMate, 它們都有在Mac OS, Windows的免費版本，什么還有Sublime, WebStorm? 啊，那些都很流行，不過需要需要一筆不少于70美元的花費...

5. 一個翻墻代理：這個大家都懂的，我就不解釋了

初級資質要求

[[177990]]

一些專業基礎

你需要學會瀏覽器能理解的三大語言：HTML, CSS, Javascript - 神圣的三位一體！

非常重要的一點是，一定要理解這三大語言后再去學習別的，確保知道怎樣在各種尺寸的屏幕上排列好你的網頁，怎樣在一個按鈕被按下后do something!

一些很有用的學習資源

• Codeacademy: interactive, code-along tutorials (this site is the bomb btw) 

• Web Development for Beginners: article from webplatform.org.

• MDN：https://developer.mozilla.org/en-US/docs/Web

中級進階路徑

[[177991]]

[[177992]]

一旦掌握了三大語言，就可以開始學習專業的開發流程啦：

1. Command line：好吧,命令行也許都會,但是要掌握最基本的操作,熟悉怎樣配置你的環境,還有那些奇怪的shell腳本，因為你會經常用到它們。

2. CSS已經不夠用了,我們有了CSS的預處理：Sass, LESS。

3. 知道如何搭建一個build系統：Gulp 或Grunt 這類的構建任務腳本器,編譯LESS成CSS, concatenating Javascript, minify壓縮靜態資源, 選一個異步或同步的方式加載它們，然后一個好的build系統要能自動做到那些,包括一個本地的web服務器用于測試代碼。

4. 代碼版本管理，git。

5. 在github上分享你的代碼！

6. 部署! 讓你的網站上線。可以找一個免費的服務提供商，比如heroku.com, https://pages.github.com

這些幾乎就是現代前端開發者會用到的工具和技術，好了，你現在可以成為一個前端開發工程師了。

高級炸裂裝備

你已經能夠為你的朋友的業務搭建一個網站了，簡潔的排版，高清大照片，你成功了，它甚至在你的手機都看著很棒。那么還有什么值得學的？

把你的網站和一個內容管理系統(CMS）集成在一起。一個CMS能夠讓你通過用戶界面增、刪、改、組織你的內容，不需要任何代碼。這就是那些博客網站如何工作的。比如免費的WordPress，去熟悉一個開源的CMS吧，會很有用的。

學習怎樣搭建一個CMS，意味著你講要熟悉一個服務器端的語言，比如Node.js, 或PHP，然后你還會想要知道怎樣和數據庫打交道，比如MySql或者MongoDB。

來熟悉一種Javascript框架吧，這樣你可以真正的搭建一個交互出色的web應用，那真的很重要，比如Angular, React, Ember。只要挑一個你喜歡的，但是一定要精通它。

Javascript design patterns，javascript也有設計模式？ 是的，讀一下吧。

突破天際的大招[[177993]]

溝通技巧！你需要和你的小伙伴們溝通，他們是你的coder伙伴，你的老板，你的用戶，你的....stackoverflow.com， 有問題找stackoverflow，擴展一下人脈把，上meetup.com, 在博客上寫一些你的學習體驗， 在Gitgub 貢獻一下你的Pull request。

界面設計和用戶體驗設計UI/UX design，前段開發的小伙伴需要具備基本的UI/UX設計知識。

搜索優化，要知道怎樣提高網站的搜索排名，更容易被人們搜索到。

CSS過度效果，給你的按鈕寫一個hover的CSS動畫，還有你的從右邊滑入的導航菜單也需要一個平滑的動畫。

關于性能，讓你的網站盡可能快的被加載，減少DOM的reflow和repaint操作，防止滾動性能瓶頸，優化Javascript, 翻墻讀一讀這個吧 google web developer fundamentals。

用一些測試框架來實現Javascript單元測試，比如Jasmine，QUnit。

持續集成Continuous integration (CI)，知道怎樣配置一套和伙伴們一起使用的自動測試和部署的工具，比如CircleCI, Travis CI, Jenkins.

超好用的其他加成技能

>[[177994]]

↓↓↓這些并非必須，但能幫你脫穎而出：

用CSS3, SVG, Canvas API 實現動畫。

后端開發， Node.js

最后：去找工作吧！

[[177995]]

有了技能是不夠的，你需要能展示它們，你還能干的是：

1. 搭建一個小網站，公開你的gitub代碼庫，確保你的代碼和文檔清楚漂亮，還有一份README

2. 去meetup.com找你的老板或者投資人吧，開一個博客，申請一個linkedin帳號

3. 因為web技術總是在變化，最后，即使找到了一份稱心的工作，還是需要stay motivated, 你需要時常去下面這些地方轉轉：CSS Tricks，SitePoint，Smashing Magazine

4. 當然還有些像CSDN這樣中文社區，總之遇到任何難題，社區里有總有樂于助人的。

5. 保持好的職業態度：Stay humble, and build cool shit