web前端入坑第二篇：web前端到底怎麼學？乾貨資料！
hi，大家好！
我的第一篇文章：【web前端到底是什麼？有前途嗎？】，在我沒想到如此 ‘HOT’ 的情況下 得到很多好評和有效傳播。
也為我近期新開的 個人前端公眾號：前端你別鬧（webunao）
直接增加了幾百粉（果然，帥的人大家都喜歡。）
被國內著名技術部落格 CSDN 推上部落格首頁，並且經過我授權在其他公眾號也轉載了不少。
我覺得我這片入門文章可以小火，究其原因 有以下幾點
web前端是如此的火熱，關注度也逐年升高
由於前端開發的火熱 和 一些IT巨頭公司 對 web前端開發 人員的需求旺盛，讓越來越多的孩子轉入前端
前端開發領域 是it技術語言領域唯一一個 男女老少都可以快速入門並快速提升興趣的領域（嘿嘿：妹子那絕對是最多的！）
我文風實在是太逗比了，我顏值實在是太帥了
web前端到底怎麼學？
那麼在講 web前端怎麼學 這個大命題之前呢，依據我本人的尿性，還是得先把你拉入坑，讓你在坑裡好好學 O(∩_∩)O
由於第一篇文章，有說到
O(∩_∩)O 好了，我們已經相識了，我們進入相知的階段（我擦，太快了吧？）
web前端的歷史淵源 和一些出處，童鞋們大概都有所瞭解了。
下面我們進入【相愛】階段（我都不認識你，就tm相愛了？）
歌詞雲：* 想說愛你不容易 *!
但是我會想方設法讓你愛上她（web前端開發）。
一般據我經驗，在喜歡並且決定和她戀愛之前，我都會做一下充分準備和調查，有必要了解和研究清楚 ‘她’ 的幾個特性和習慣
- web前端的基本工作職責 和基礎技能（要清楚）
- web前端的分類和門派（簡要概述，武林 實在是太大啦）
- 前端開發 必看的書籍資料（乾貨重點）
如果 你已經瞭解清楚以上前2點並思路清晰，那就直接 和她相愛吧-直接跳入 【前端開發 必看的書籍資料】
1.web前端的基本工作職責（要清楚）
“ 入一行，要先知一行 ”；我們來看看web前端開發職位 無論什麼門派都要做到的一些基本工作職責。
首先，你必須是一個合格的“頁面仔”，這個叫法不好聽，但很生動；
我們都知道，所有呈現的內容都是基於HTML 網頁的。
如果你的html、css（包括現在的HTML5+CSS3）基礎不會，或者不夠紮實，都很難在有大的進步，或者你的JS 很好，但佈局基礎不行，還是不能算合格的web前端。
其次，前端主要負責實現視覺和互動功能，以及與後端伺服器通訊，完成業務邏輯。現在前端的核心價值在於對使用者體驗的極致追求。
那麼我們靠什麼來提升使用者體驗和人性化操作，讓使用者覺得體驗牛x、舒服呢？（當然細分厲害的公司，會有專門的 使用者體驗攻城獅）
當然是我們自始自終的主角 JavaScript了，畢竟它最初就是為瀏覽器而生的指令碼語言。
然而，JS這門語言並不是一種強型別語言，更像是一種解釋型語言，所以很多屬性，在不同的瀏覽器環境解釋有很大不同導致，效果和效能千差萬別，而且很多屬性之長，之多，之巨都很有工作量。
之後，就出現了Jquery 這種的框架神器，由於其好用，簡單，效果多樣，相容完美，高效率等特性，迅速席捲全世界，所以如果想入門，jquery 這個東西你是逃不掉的，而且利用它簡單的語法，你會很快將一些效果實現出來，迅速提升興趣。
再後，既然涉及到視覺 和使用者體驗，那麼UI 設計知識，你肯定要涉及或者懂一些設計方面的技能和基本素養，比如PS的一些基本操作，切圖，和顏色值（比如會改個字，隱藏個圖層，改個尺寸，變個顏色什麼滴），螢幕適配方案等，講道理說：平時並不需要我們做，但技能包裡絕對要有。
最後，伺服器知識+後端語言基礎，這個職責和話題就比較hight了，到後面我們會一一解釋。
總之，web前端同樣是程式設計師，由於前端是位於後端程式和介面設計師之間的崗位，相當於中間橋樑，要完成三者的對接，涉及到廣泛 的知識，規模大到工程級，也就有了前端工程師的說法（某人總結，很是到位）。
 * web前端工程師，是一個要精通本職html,css,javascript，也要了解後端程式設計，瞭解介面設計，瞭解軟體工程的綜合人才。 （臥擦！這才入門，web前端就這麼多職能 和掌握的基本技能，不開森了 ，哼！） 哈哈，看到這一大篇的職責和技能，你並不要害怕，因為這些就像小孩子，會走路，會說話。 只要你有興趣，只要有人領路，有教程自然而然就能掌握的技能，至於一些設計素養，反正你不是UI，有最好，沒有又有什麼所謂呢？ —2.web前端的分類和門派（簡要概述，武林 實在是太大啦）
根據web前端的細分工種 和 業務不同，我無恥的把她比擬出來幾個門派，供大家參考，也讓無比龐大的前端劃分變得有趣一些，不然下面我放一張圖， 你看了會暈菜。
這裡我先簡單說幾種，我們常常熟知的幾個門派
比如：
【少林派】：七十二般武藝樣樣精通 - web網站開發
【武當派】：以柔克剛 - 移動APP開發
【峨嵋派】：傾國傾城 - canvas 資料視覺化
【華山派】：劍法精湛 - nodejs開發
【逍遙派】：瀟灑飄逸 - HTML5遊戲
讓你暈菜的技能樹 ，客觀您感受一下先
由於web前端知識體系 實在是太龐大，這是另一個話題，三言兩語是描述不清的，我們後面會專門開一個專題文章，來講解和討論這個話題。
 好累，我們趕緊去看乾貨 —3.前端開發 必看的書籍資料（乾貨重點-入門篇）
一、 html + css 這部分建議在 w3school 線上教程 上學習，邊學邊練，每個屬性後還有線上測試。 然後過一遍之後可以模仿一些網站做些頁面。記住這個一定要多練 多練 多練 ，最重要的事兒 還得我說三遍？
二、 javascript 要學的內容實在很多，如果沒有其他程式語言的基礎的話，學起來可能要費些力，還是建議先在 w3school上學習一些基本語法 和定義。
然後你必須要看書，然後實踐（好多人問 有沒有快速捷徑，我只能告訴你：如果有捷徑，碼農們就不用天天如此苦逼了吧）。
忍得住寂寞枯燥，才能拿得到高薪
對於習慣看視訊學習的同學，以上內容也可以在 慕課網 這個線上學習網站上去搜，現在裡面基礎課程講解都還不錯。跟著敲一邊，確實可以避免看書查資料的枯燥
 下面多圖預警，多書預警。 以下內容都是經過我自己本身的學習路線經驗，還有網路各路大神共同整理的資料 彙總，幫助源源不斷入坑的新人更好的學習。 前端書籍必讀、必買（本帥認為） ★★ 越多，推薦等級越高，和難度無關。最好按照我給的順序入門，這樣不會讓你枯燥，想放棄，如果先推薦經典的厚的，滿篇定義，我估計是害你們放棄。【JavaScript】
【第一本】《JavaScript DOM程式設計藝術》★★★★★  最好的JS入門書籍，最讓人有興趣讀完的那種書。 它通過一個 幻燈片 案例，從頭到尾教你實現出來，最後效果實現的同時，基本的JS常用屬性，你也就滾瓜爛熟了，很有成就感。（個人很偏向這種風格書籍，此書讓我徹底愛上前端js） 一目瞭然地告訴你如何用JS操作DOM（這是瀏覽器端程式設計的基本功），還灌輸了最符合標準的程式設計理念。可惜有點老，最新一版是2010年的。不過不影響閱讀和實現，全部按照最新ES5屬性就行了。 — 【第二本】《JavaScript高階程式設計》 ★★★★  又稱紅寶書，（我喜歡叫 望眼鏡） 雅虎首席前端架構師，YUI的作者Zakas出品。雖然書名帶了“高階”二字，但是講得都很基礎的屬性內容，事無鉅細。 關鍵一點是翻譯的也很到位，並不是如嚼蠟一般，這很重要。看此書，我建議配著下面的犀牛書一起 看效果更佳。 — 【第三本】《JavaScript權威指南》 ★★★★★  著名的淘寶前端團隊翻譯的，看譯者列表都是一堆前期大神。 這本書又叫犀牛書，被國人譽為：javascript開發者的聖經。網上對此書評價很多很好，大概意思是說這 本書是一本JavaScript文件手冊，更適合當作字典和備忘錄查詢來使用。 我也是對這本書有很厚的感情和依賴（忘了屬性就拿來翻翻，總有收穫），個人感覺這本書還是寫得枯燥了些，畢竟是工具性質，不適合當作第一本入門來看，不過內容絕對是五顆星，無可挑剔！神書 — 【第四本】《JavaScript語言精粹》 ★★★★★  作者是大名鼎鼎的 【老道】，我的JS 偶像，我github第一個關注的就是這個大鬍子叔叔。 他是 JSON格式的發明和維護者，也有很多著作和對JS 這門語言的超多貢獻，可見此人功力絕對頂級！ 這本書，屬於稍微入門以後看的，瞭解了一些中高階概念 比如：閉包、原型鏈、作用域鏈、繼承封裝等以後， 看此書有如神助，看一頁相當於犀牛書幾十頁的講解（不吹牛逼，當時我是這感覺的）先說
JavaScript,因為前面說了，css最好跟著視訊練習，畢竟都是視覺化的，像做藝術。
【CSS】
【第一本】《Head first HTML&CSS》 ★★★  好的入門書。看兩遍就對HTML & CSS 有個大概印象了。 此時把w3cschool作為備查手冊收藏起來，結合此書，事半功倍，成就感爆棚。 — 【第二本】《CSS權威指南（第三版）》 ★★★★  最權威的CSS書籍，除了閱讀W3C的文件外的不二選擇（就是翻譯太操蛋，可能有的詞你以為是火星語，不過不影響閱讀）。 有時間可以反覆看，有css3內容，並當做字典隨時查。類似犀牛書 — 【第三本】《圖解CSS3：核心技術與案例實踐》 ★★★  這本書講解的是最新的CSS3（前幾本書停留在CSS2.1時代，2.1是基礎），CSS3也是必學的，不然真的跟不上時代了。 — 【第四本】《CSS禪意花園》 ★★★★  這本書很值得期待，我看過PDF版本的，那時候還沒翻譯出來，翻譯的也一般，不過作者是巨牛逼的，聽說對css理解的就像自己的左右手，光靠寫CSS 他年薪就輕鬆百萬了。。汗顏！思路清晰，圖文並茂，還解決一些疑難雜症和高階技巧，類似於JS的語言精粹了，大神級別。 — 好了，差不多就推薦到這裡，CSS這基本是基於情懷，羅列一下，買不買都沒必要，想當年我學CSS 是挨著幾個僅有的視訊，一個屬性一個屬性的練習，還有IE6 各種相容問題，虐到爆，那酸爽（現在你們是性福的，基本不用相容IE6 這個老東西了，）。 真正起到決定作用的，還是JS語言的掌握和實踐，JS能力越強 基礎越穩固，你的前端能力就會越好， 自然薪資越高，所以現實點說大家，大家一起努力吧，讓money 都到碗裡來  *** （有些童鞋認為：從來不需要買紙質書，我全程PDF就行了嘛，不過我建議有些書還是要紙質的，這樣有感覺，也可以做筆記，甚至隨時當工具書字典來查詢，由於前端的特殊性和js語言的屬性之繁多龐雜，我建議你還是要買紙質的書。幫助很大，而且我告訴你有了錢要補上正版呃） 那麼PDF截圖奉上，嘿嘿 如果需要請到此大神網站 網盤下載，應有盡有，此處應該有掌聲！ 地址：[http://www1.w3cfuns.com/feres.php?do=picture&listtype=book](http://www1.w3cfuns.com/feres.php?do=picture&listtype=book) 【
CSS】類， 如果視訊看完了，練習的熟練了，你還需要一些書的推薦和查詢，也是有必要的，我再來給你羅列幾本經典的收藏書，買不買均可的。
本篇最後（我真的很累，原創很累的，所以我得結尾了，後一篇在介紹更多的乾貨）
我總結了部分一些知乎大神舉薦的書評連線（微信不可外鏈，可檢視我部落格） 和我自己覺得要看的書，羅列如下，供君參考（嘿嘿！是不說我正經起來，很不習慣？）
★ 越多，難度越高。
這個文章花費了我不少時間整理收集，然而還是不到冰山一角，至少入門夠用了，所以請看到的同學，盡心收藏並幫助傳播，可以幫到更多的新人和疑惑中的轉型的從業者，我將會非常高興和欣慰，也將有更大的動力和精神來繼續更新和貢獻微薄之力。
有人問我：又沒人給你錢，你何必這麼辛苦，還得工作，還得寫文章。然而我說我不在乎錢那是不可能的。
我還告訴你們，這真的是我的興趣和責任，因為我經歷了前端洪荒的年代和苦楚，所以我很願意分享和幫助新來者，少走彎路和浪費時間。
到最後：興趣都會變成錢！堅持下來就好。也希望大家支援
能在江湖混跡多年的，肯定不是靠工具和潮流。絕對是靠的不斷提升的內功
希望大家明白，趁年輕 一定要忍住枯燥，打好基礎!
在最後，特別感謝，賀賀妹子（傻），辛苦整理提供一些資料和配圖，讓我的文章更加生動和有趣。我想她一定是被我的顏值折服了吧！
入坑方式： 歡迎加入~！氣氛熱情，歡樂多，妹子多！
掃描屏二維碼或直接搜尋，可以關注 我的前端公眾號 ： 前端你別鬧
及時更新一些前端解惑和段子
如果未留言就轉載，或者轉載不署我名字的，你將會越來越醜！很準的呃