不得不承認我做了三年開發，現在正在轉前端，我接下來會發布或者轉載的都是關於我學習或者別人學習前端的一些資料

一、前言

1.為什麽要學前端開發？

我本來是想學java的，買了一堆java書籍，但怎麽變成了學前端，已經無從根究，我自己也是沒答案。不過既然已經走上了這條路，而且前端還算有趣，那就接著走下去吧。一個優秀的程序員不會只懂一門語言，因此，java什麽的，早晚會接觸到。也許，那不是java，而會是Haskell、Phython等任何編程語言。

2.前端開發是做什麽的？

老實說，這問題我傾向於復制粘貼網上答案來應付了事。可想想逢年過節時，親朋好友們百分百會問到這個問題，我就說一下吧。

敷衍的A：“做網站，搞網頁開發的”。

偏科的B：“做UI設計的，做微信公眾號的”。

裝逼的C：“改變世界的”。

認真的D：“前端開發有許多方向，比如網站重構，UI設計，web應用開發，物聯前端，前端AR...(省略一千字)”。

兼容性最強的萬能答案：“寫代碼的，對，就是傳說中的程序員！坐辦公室用電腦的！”。

3.前端開發有錢途嗎？

當然有，做啥沒前途？乞討乞到極致，也能乞成千萬富翁。

一般來說，剛入門的新人，工資都高不到哪兒去，從1k到1w都有。註意，是剛入門，不是剛入行！管理層以下，絕大多數情況都是技術實力正比於薪資！

互聯網發達地區的薪資水平會高一截，如北京上海深圳廣州杭州，互聯網公司會比其他行業公司的薪資水平高一截。同等能力下，牛逼的小公司比大公司的薪資要高一點。

4.我該怎麽學前端？

這是個很大的問題。從學習方式來說，有自學與培訓。從學習方法來講，那真是沒法數，每個人都有屬於自己的合適的自己的方法，有的人覺得看看視頻就能學會，有的是覺得光看書就完全get技能了，還有的人覺得在群裏多和大佬們聊聊吹吹水就可以掌握想要的知識。

做夢吧。

前端有三大基礎JavaScript、CSS、HTML。光HTML就不是上述方法能掌握的，更遑論JavaScript？JavaScript是門直譯型的語言，是面向對象的。對象是啥，一只喵星人一個手機一個你就是一個對象。當然，JavaScript裏的對象是代碼組成的，而在JavaScript裏，幾乎一切都是對象。

但凡是對象，那肯定是復雜的。你復雜嗎？為什麽復雜？對象的復雜性，很大程度取決於它自身與其依賴的周圍環境。人在陸地上可以活得好好的，扔進水裏，能活幾分鐘？水陸環境的不同，增加了人的復雜些。換成你手機也一樣，把它丟進火裏或水裏試試。

這跟JavaScript有什麽關系？

沒關系。

才怪。JavaScript是腳本語言，是條寄生蟲，不寄生在宿主身上就沒生命力的東西。它的宿主是什麽？瀏覽器 or Node。

本質上，瀏覽器和Node都給JavaScript提供了運行時的環境，所以，這個東西，才是JavaScript的幕後老板。我們稱之為JavaScript Interpreter，當然，不止這麽一種叫法，還有什麽Redering Engine等等，總之，它們都可以將JavaScript代碼翻譯成機器碼，供計算機認識與使用。

沒有靈魂的人，跟死人沒什麽兩樣。

JavaScript被翻譯成機器碼後，就有了靈魂，活過來了。

你看，JavaScript其實也是個對象。這麽復雜的東西，光看書看視頻聽人說，能真正懂它嗎？不能。這些行為最多幫我們知道它，了解它的知識體系與底層原理，順便拓展一下眼界。要真正懂它，得不斷地去使用它，以各種方式去使用它。

就像你跟一個姑娘談戀愛，光看照片看她日誌有什麽用，你要牽她的手，親吻她，擁抱她，愛她，跟她交流，做各種羞羞的事，才會真正懂她。不是麽？

JavaScript尚且如此，包含它的整個前端還用說嗎？

Just do it！

5.從哪裏開始前端的第一步？

廢話了一堆，來點幹貨。首先，回答問題前，我們來趟時空旅行。

1993年，超文本標記語言HTML（Hyper Text Markup Language）第一版面世，它只支持超鏈接的純文本html文檔。純到什麽地步？純文本！超鏈接！沒了。

純文本是什麽概念？在你的電腦桌面新建一個txt文檔，在裏面寫上

hello world

保存文檔為html類型。然後雙擊打開它，你就可以在瀏覽器裏看到hello world了！

這就是純文本html文檔，純的不能再純的一個網頁。

超鏈接呢？以記事本方式打開剛才的文檔，把hello world替換成

<a href="http://www.baidu.com">hello world</a>

保存。雙擊打開這文檔，你會在瀏覽器裏看到帶下劃線的hello world，點擊它，如果你能上網，那麽毫無疑問，它會跳轉到百度的首頁。這麽一個簡單的文檔，居然可以鏈接到百度，神奇嗎？這就是超鏈接。鏈接互聯網上的所有。

時間往前走。

1994年，層疊樣式表CSS（Cascading Style Sheets）問世，這時它還沒成為標準，直到1996才有第一版標準。CSS做了什麽？回答這個問題得先知道HTML幹了什麽。HTML定義了文檔的類型與內容。CSS，則決定了這些內容該如何展現。如果把HTML文檔比喻成一幅紙畫，那麽CSS就是造物主的神力，它可以讓紙畫上的貓咪隱身，也可以讓紙畫上的鮮花變換顏色，甚至能讓裏面的小鳥飛出來，讓高山變成平地，讓滄海變成桑田。夢幻吧。

打開剛才的文檔，把內容替換成

<a href="http://www.baidu.com" style="color: red">hello world</a>

保存。雙擊打開它，你會在瀏覽器裏看到紅色的hello world。這裏，style引入了CSS樣式，color給這些文字打開了顏色的大門，red，湧入了進來，把它們染成了紅色。

1996年，JavaScript第一版誕生。只有HTML與CSS的世界太單調，鳥會飛，卻無法互相交流，貓咪看不到老鼠，老鼠也看不到貓，它們過著孤獨的生活。這樣的世界不真實，於是，JavaScript來了。JavaScript賦予了這些生命思考、感知與交流的能力，從此這世界變得無比精彩，無數文明誕生與消亡，演繹宇宙洪荒。

再次打開我們的文檔，把內容替換成

<a href="http://www.baidu.com" style="color: red">hello world</a>
<script>
alert(‘ni hao‘);
</script>

保存。雙擊打開它，你會在瀏覽器裏看到一個彈出的提示框，上面寫著，ni hao。這裏，script引入了JavaScript代碼，alert表示彈出一個提示框，括號裏的是提示的內容。沒錯，人類，你被瀏覽器發現了！它在向你打招呼！

好了。

回到開始的問題上來，在哪開始前端的第一步？

如果你剛才跟著我敲了一遍例子，那麽你已經踏出了第一步。接下來的學習，是把HTML，CSS，JavaScript的所有基礎知識快速泛讀一遍（不求甚解，只求心中有個印象，大概知道都有些什麽知識，真正要了解那些知識，應該放在後面的實踐中學習，如此，效率極高），你可以在W3C或者菜鳥上面翻閱這些資料，或者在MND裏閱讀更詳細的內容。相信MDN以後會是你經常光顧的一個地方，它就像前端的百科全書，網絡圖書館，你想要的了解的，基本都能在裏找到。

這個過程，集中精力不受幹擾，可能需要花費大約2~3個小時的時間。

然後，讓我們來玩遊戲吧。

6.在遊戲中學前端？

沒幾個人會不喜歡玩遊戲的，除非他沒有童年。

我們要玩的，是一個闖關遊戲。只要按照遊戲規則，完成指定的任務，就可以進入下一關。完成任務的方式，沒錯，就是寫代碼。

不用擔心，有足夠多的提示能讓十足的前端菜鳥輕易完成前面的一些挑戰。嗯，別告訴我你是十二足的....

先看個例子，如下圖所示：

圖中演示了遊戲中的兩個簡單關卡，看不懂不要緊，實際去挑戰，就明白了。相信這是個非常有趣，並且富有成就感的過程。

這免費遊戲出自FreeCodeCamp，當今世界上最受歡迎最流行的技術類開源項目，粉絲遍布上百個國家，你可以在GitHub上找到它的組織，當然，它在中國也有分支，簡稱FCC中文社區。

上圖的例子，便是在FCC中文社區完成的。筆者當初就是在FCC學習了一段時間，還沒完成前端的所有挑戰，便已找到一份滿意的工作，並且認識了許多前端小夥伴們，他們都非常友善，樂於分享，互幫互助，其中不乏非常厲害的大佬大神們。

遊戲過程中，多多查閱MDN，你會學到很多知識。關卡挑戰成功與否不是最重要的，最重要的，是我們在這過程中，學會了什麽。知識，方法，思維方式，編程思想，and so on...

如果你完成了遊戲裏所有前端的挑戰還沒找到工作，那麽我百分百敢肯定，要麽就是你目標太高，要麽，必定是你沒認真挑戰，恐怕，谷歌百度抄了不少答案吧。有用嗎？自欺欺人而已。

請盡量自己獨立完成。

完成FCC前端挑戰大概需要一到兩個月時間，牛人不到十天可以搞定（請收下我的膝蓋...）。

假設你已經完成了挑戰，讓我們進入下一個話題，前端究竟在幹什麽。

為什麽要轉前端。