由于前端開發(fā)的火熱和一些IT巨頭公司對 web前端開發(fā)人員的需求旺盛，讓越來越多的人轉(zhuǎn)入前端。前端開發(fā)領(lǐng)域是IT技術(shù)語言領(lǐng)域唯一一個男女老少都可以快速入門并快速提升興趣的領(lǐng)域，今天就來聊聊前端到底該怎么學(xué)~

話不多說，讓我們直接進(jìn)入今天的主題。

web前端的基本工作職責(zé)和基礎(chǔ)技能(要清楚)

web前端的分類和門派(簡要概述，武林實在是太大啦)。

前端開發(fā)必看的書籍資料(干貨重點)。

如果你已經(jīng)了解清楚以上前2點并思路清晰，那就跳到后面的 “前端開發(fā) :必看的書籍資料 ” 。

web前端的基本工作職責(zé)

推薦一個web前端學(xué)習(xí) QQ群606721798，歡迎大家加入，每天晚上在騰訊課堂都有一個技術(shù)學(xué)習(xí)課,會有老師分享干貨,幫助大家分析解答問題

“入一行，要先知一行 ”;我們來看看Web前端開發(fā)職位無論什么門派都要做到的一些基本工作職責(zé)。

首先，你必須是一個合格的“頁面仔”，這個叫法不好聽，但很生動。

我們都知道，所有呈現(xiàn)的內(nèi)容都是基于HTML網(wǎng)頁的。

如果你的HTML、CSS(包括現(xiàn)在的HTML5+CSS3)基礎(chǔ)不會，或者不夠扎實，都很難在有大的進(jìn)步，或者你的JS很好，但布局基礎(chǔ)不行，還是不能算合格的web前端。

其次，前端主要負(fù)責(zé)實現(xiàn)視覺和交互功能，以及與后端服務(wù)器通信，完成業(yè)務(wù)邏輯?，F(xiàn)在前端的核心價值在于對用戶體驗的極致追求。

那么我們靠什么來提升用戶體驗和人性化操作，讓用戶覺得體驗牛x、舒服呢?(當(dāng)然細(xì)分厲害的公司，會有專門的用戶體驗攻城獅)當(dāng)然是我們自始自終的主角JavaScript了，畢竟它最初就是為瀏覽器而生的腳本語言。

然而，JS這門語言并不是一種強(qiáng)類型語言，更像是一種解釋型語言，所以很多屬性，在不同的瀏覽器環(huán)境解釋有很大不同導(dǎo)致，效果和性能千差萬別，而且很多屬性之長，之多，之巨都很有工作量。

之后，就出現(xiàn)了jQuery這種的框架神器，由于其好用，簡單，效果多樣，兼容完美，高效率等特性，迅速席卷全世界，所以如果想入門，jQuery這個東西你是逃不掉的，而且利用它簡單的語法，你會很快將一些效果實現(xiàn)出來，迅速提升興趣。

再后，既然涉及到視覺和用戶體驗，那么UI設(shè)計知識，你肯定要涉及或者懂一些設(shè)計方面的技能和基本素養(yǎng)，比如PS的一些基本操作，切圖，和顏色值(比如會改個字，隱藏個圖層，改個尺寸，變個顏色什么滴)，屏幕適配方案等，講道理說：平時并不需要我們做，但技能包里絕對要有。

最后，服務(wù)器知識+后端語言基礎(chǔ)，這個職責(zé)和話題就比較hight了，到后面我們會一一解釋。

總之，web前端同樣是程序員，由于前端是位于后端程序和界面設(shè)計師之間的崗位，相當(dāng)于中間橋梁，要完成三者的對接，涉及到廣泛的知識，規(guī)模大到工程級，也就有了前端工程師的說法(某人總結(jié)，很是到位)。

Web前端工程師，是一個要精通本職HTML、CSS、JavaScript，也要了解后端編程，了解界面設(shè)計，了解軟件工程的綜合人才。

看到這一大篇的職責(zé)和技能，你也別害怕，因為這些就像小孩子，會走路，會說話。只要你有興趣，只要有人領(lǐng)路，有教程自然而然就能掌握的技能，至于一些設(shè)計素養(yǎng)，反正你不是UI，有最好，沒有又有什么所謂呢?

web前端的分類和門派

根據(jù)Web前端的細(xì)分工種和業(yè)務(wù)不同，我無恥的把她比擬出來幾個門派，供大家參考，也讓無比龐大的前端劃分變得有趣一些，不然下面我放一張圖，你看了會暈菜。

Web前端知識體系實在是太龐大，先不感慨了，我們趕緊去看干貨!

web前端開發(fā)：必看的書籍資料

HTML + CSS這部分建議在在線教程上學(xué)習(xí)，邊學(xué)邊練，每個屬性后還有在線測試。然后過一遍之后可以模仿一些網(wǎng)站做些頁面。記住這個一定要多練、多練、多練 ，最重要的事兒還得我說三遍?

JavaScript要學(xué)的內(nèi)容實在很多，如果沒有其他編程語言的基礎(chǔ)的話，學(xué)起來可能要費些力，還是建議先通過在線教程學(xué)習(xí)一些基本語法和定義。

然后你必須要看書，然后實踐(好多人問有沒有快速捷徑，我只能告訴你：如果有捷徑，碼農(nóng)們就不用天天如此苦逼了吧)。

記住：忍得住寂寞枯燥，才能拿得到高薪!

對于習(xí)慣看視頻學(xué)習(xí)的同學(xué)，以上內(nèi)容也可以在在線學(xué)習(xí)網(wǎng)站上去搜，現(xiàn)在大部分基礎(chǔ)課程講解都還不錯。跟著敲一起學(xué)，確實可以避免看書查資料的枯燥。

以下內(nèi)容都是結(jié)合我自己的學(xué)習(xí)路線與經(jīng)驗，再整理匯總了網(wǎng)絡(luò)各路大神的資料，希望能幫助源源不斷入坑的新人更好的學(xué)習(xí)。

web前端書籍必讀、必買

最好按照我給的順序入門，這樣不會讓你枯燥，想放棄，如果先推薦經(jīng)典的厚的，滿篇定義，我估計是害你們放棄。

1 . JavaScript

先說 JavaScript，因為前面說了，CSS最好跟著視頻練習(xí)，畢竟都是可視化的，像做藝術(shù)。

《JavaScript DOM編程藝術(shù)》

最好的JS入門書籍，最讓人有興趣讀完的那種書。

它通過一個幻燈片案例，從頭到尾教你實現(xiàn)出來，最后效果實現(xiàn)的同時，基本的JS常用屬性，你也就滾瓜爛熟了，很有成就感。(個人很偏向這種風(fēng)格書籍，此書讓我徹底愛上前端js)

一目了然地告訴你如何用JS操作DOM(這是瀏覽器端編程的基本功)，還灌輸了最符合標(biāo)準(zhǔn)的編程理念?？上в悬c老，最新一版是2010年的。不過不影響閱讀和實現(xiàn)，全部按照最新ES5屬性就行了。

《JavaScript高級程序設(shè)計》

又稱紅寶書，雅虎首席前端架構(gòu)師，YUI的作者Zakas出品。雖然書名帶了“高級”二字，但是講得都很基礎(chǔ)的屬性內(nèi)容，事無巨細(xì)。關(guān)鍵一點是翻譯的也很到位，并不是如嚼蠟一般，這很重要?？创藭?#xff0c;我建議配著下面的犀牛書一起看效果更佳。

《JavaScript權(quán)威指南》

著名的淘寶前端團(tuán)隊翻譯的，看譯者列表都是一堆前期大神。

這本書又叫犀牛書，被國人譽(yù)為：JavaScript開發(fā)者的圣經(jīng)。網(wǎng)上對此書評價很多很好，大概意思是說這本書是一本JavaScript文檔手冊，更適合當(dāng)作字典和備忘錄查詢來使用。

我也是對這本書有很厚的感情和依賴(忘了屬性就拿來翻翻，總有收獲)，個人感覺這本書還是寫得枯燥了些，畢竟是工具性質(zhì)，不適合當(dāng)作第一本入門來看，不過內(nèi)容絕對是五顆星，無可挑剔!神書

《JavaScript語言精粹》

作者是大名鼎鼎的 【老道】，我的JS偶像，我github第一個關(guān)注的就是這個大胡子叔叔。他是 JSON格式的發(fā)明和維護(hù)者，也有很多著作和對JS這門語言的超多貢獻(xiàn)，可見此人功力絕對頂級!

這本書，屬于稍微入門以后看的，了解了一些中高級概念比如：閉包、原型鏈、作用域鏈、繼承封裝等以后，看此書有如神助，看一頁相當(dāng)于犀牛書幾十頁的講解(不吹牛逼，當(dāng)時我是這感覺的)

2 . CSS

CSS類，如果視頻看完了，練習(xí)的熟練了，你還需要一些書的推薦和查詢，也是有必要的，我再來給你羅列幾本經(jīng)典的收藏書，買不買均可的。。

《Head first HTML&CSS》

好的入門書?？磧杀榫蛯TML & CSS有個大概印象了。

此時把w3cschool作為備查手冊收藏起來，結(jié)合此書，事半功倍，成就感爆棚。

《CSS權(quán)威指南(第三版)》

最權(quán)威的CSS書籍，除了閱讀W3C的文檔外的不二選擇(就是翻譯太操蛋，可能有的詞你以為是火星語，不過不影響閱讀)。有時間可以反復(fù)看，有css3內(nèi)容，并當(dāng)做字典隨時查。類似犀牛書。

《圖解CSS3：核心技術(shù)與案例實踐》

這本書講解的是最新的CSS3(前幾本書停留在CSS2.1時代，2.1是基礎(chǔ))，CSS3也是必學(xué)的，不然真的跟不上時代了。

《CSS禪意花園》

這本書很值得期待，我看過PDF版本的，那時候還沒翻譯出來，翻譯的也一般，不過作者是巨牛逼的，聽說對css理解的就像自己的左右手，光靠寫CSS他年薪就輕松百萬了。。汗顏!思路清晰，圖文并茂，還解決一些疑難雜癥和高級技巧，類似于JS的語言精粹了，大神級別。

好了，差不多就推薦到這里，CSS這基本是基于情懷，羅列一下，買不買都沒必要，想當(dāng)年我學(xué)CSS是靠著幾個僅有的視頻，一個屬性一個屬性的練習(xí)，還有IE6各種兼容問題，虐到爆，那酸爽(現(xiàn)在你們是幸運的，基本不用兼容IE6這個老東西了)。

真正起到?jīng)Q定作用的，還是JS語言的掌握和實踐，JS能力越強(qiáng)基礎(chǔ)越穩(wěn)固，你的前端能力就會越好，自然薪資越高，所以現(xiàn)實點說大家，大家一起努力吧，讓money都到碗里來!

有些童鞋認(rèn)為：從來不需要買紙質(zhì)書，我全程PDF就行了嘛，不過我建議有些書還是要紙質(zhì)的，這樣有感覺，也可以做筆記，甚至隨時當(dāng)工具書字典來查詢，由于前端的特殊性和js語言的屬性之繁多龐雜，我建議你還是要買紙質(zhì)的書，幫助很大。