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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

web前端的分類和門派

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

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

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

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

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

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

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

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

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

web前端書籍必讀、必買

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

1 . JavaScript

先說 JavaScript，因?yàn)榍懊嬲f了，CSS最好跟著視頻練習(xí)，畢竟都是可視化的，像做藝術(shù)。

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

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

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

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

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

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

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

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

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

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

《JavaScript語言精粹》

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

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

2 . CSS

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

《Head first HTML&CSS》

好的入門書?？磧杀榫蛯?duì)HTML & CSS有個(gè)大概印象了。

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

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

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

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

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

《CSS禪意花園》

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

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

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

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