由于(yú)前端開發的(de)火熱和(hé / huò)一些IT巨頭公司對 web前端開發人(rén)員的(de)需求旺盛，讓越來(lái)越多的(de)人(rén)轉入前端。前端開發領域是(shì)IT技術語言領域唯一一個(gè)男女老少都可以(yǐ)快速入門并快速提升興趣的(de)領域，今天就(jiù)來(lái)聊聊前端到(dào)底該怎麽學~

話不(bù)多說(shuō)，讓我們直接進入今天的(de)主題。

web前端的(de)基本工作職責和(hé / huò)基礎技能(要(yào / yāo)清楚)

web前端的(de)分類和(hé / huò)門派(簡要(yào / yāo)概述，武林實在(zài)是(shì)太大(dà)啦)。

前端開發必看的(de)書籍資料(幹貨重點)。

如果你已經了(le／liǎo)解清楚以(yǐ)上(shàng)前2點并思路清晰，那就(jiù)跳到(dào)後面的(de) “前端開發 :必看的(de)書籍資料 ” 。

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

推薦一個(gè)web前端學習 QQ群606721798，歡迎大(dà)家加入，每天晚上(shàng)在(zài)騰訊課堂都有一個(gè)技術學習課,會有老師分享幹貨,幫助大(dà)家分析解答問題

“入一行，要(yào / yāo)先知一行 ”;我們來(lái)看看Web前端開發職位無論什麽門派都要(yào / yāo)做到(dào)的(de)一些基本工作職責。

首先，你必須是(shì)一個(gè)合格的(de)“頁面仔”，這(zhè)個(gè)叫法不(bù)好聽，但很生動。

我們都知道(dào)，所有呈現的(de)内容都是(shì)基于(yú)HTML網頁的(de)。

如果你的(de)HTML、CSS(包括現在(zài)的(de)HTML5+CSS3)基礎不(bù)會，或者不(bù)夠紮實，都很難在(zài)有大(dà)的(de)進步，或者你的(de)JS很好，但布局基礎不(bù)行，還是(shì)不(bù)能算合格的(de)web前端。

其次，前端主要(yào / yāo)負責實現視覺和(hé / huò)交互功能，以(yǐ)及與後端服務器通信，完成業務邏輯。現在(zài)前端的(de)核心價值在(zài)于(yú)對用戶體驗的(de)極緻追求。

那麽我們靠什麽來(lái)提升用戶體驗和(hé / huò)人(rén)性化操作，讓用戶覺得體驗牛x、舒服呢?(當然細分厲害的(de)公司，會有專門的(de)用戶體驗攻城獅)當然是(shì)我們自始自終的(de)主角JavaScript了(le／liǎo)，畢竟它最初就(jiù)是(shì)爲(wéi / wèi)浏覽器而(ér)生的(de)腳本語言。

然而(ér)，JS這(zhè)門語言并不(bù)是(shì)一種強類型語言，更像是(shì)一種解釋型語言，所以(yǐ)很多屬性，在(zài)不(bù)同的(de)浏覽器環境解釋有很大(dà)不(bù)同導緻，效果和(hé / huò)性能千差萬别，而(ér)且很多屬性之(zhī)長，之(zhī)多，之(zhī)巨都很有工作量。

之(zhī)後，就(jiù)出(chū)現了(le／liǎo)jQuery這(zhè)種的(de)框架神器，由于(yú)其好用，簡單，效果多樣，兼容完美，高效率等特性，迅速席卷全世界，所以(yǐ)如果想入門，jQuery這(zhè)個(gè)東西你是(shì)逃不(bù)掉的(de)，而(ér)且利用它簡單的(de)語法，你會很快将一些效果實現出(chū)來(lái)，迅速提升興趣。

再後，既然涉及到(dào)視覺和(hé / huò)用戶體驗，那麽UI設計知識，你肯定要(yào / yāo)涉及或者懂一些設計方面的(de)技能和(hé / huò)基本素養，比如PS的(de)一些基本操作，切圖，和(hé / huò)顔色值(比如會改個(gè)字，隐藏個(gè)圖層，改個(gè)尺寸，變個(gè)顔色什麽滴)，屏幕适配方案等，講道(dào)理說(shuō)：平時(shí)并不(bù)需要(yào / yāo)我們做，但技能包裏絕對要(yào / yāo)有。

最後，服務器知識+後端語言基礎，這(zhè)個(gè)職責和(hé / huò)話題就(jiù)比較hight了(le／liǎo)，到(dào)後面我們會一一解釋。

總之(zhī)，web前端同樣是(shì)程序員，由于(yú)前端是(shì)位于(yú)後端程序和(hé / huò)界面設計師之(zhī)間的(de)崗位，相當于(yú)中間橋梁，要(yào / yāo)完成三者的(de)對接，涉及到(dào)廣泛的(de)知識，規模大(dà)到(dào)工程級，也(yě)就(jiù)有了(le／liǎo)前端工程師的(de)說(shuō)法(某人(rén)總結，很是(shì)到(dào)位)。

Web前端工程師，是(shì)一個(gè)要(yào / yāo)精通本職HTML、CSS、JavaScript，也(yě)要(yào / yāo)了(le／liǎo)解後端編程，了(le／liǎo)解界面設計，了(le／liǎo)解軟件工程的(de)綜合人(rén)才。

看到(dào)這(zhè)一大(dà)篇的(de)職責和(hé / huò)技能，你也(yě)别害怕，因爲(wéi / wèi)這(zhè)些就(jiù)像小孩子(zǐ)，會走路，會說(shuō)話。隻要(yào / yāo)你有興趣，隻要(yào / yāo)有人(rén)領路，有教程自然而(ér)然就(jiù)能掌握的(de)技能，至于(yú)一些設計素養，反正你不(bù)是(shì)UI，有最好，沒有又有什麽所謂呢?

web前端的(de)分類和(hé / huò)門派

根據Web前端的(de)細分工種和(hé / huò)業務不(bù)同，我無恥的(de)把她比拟出(chū)來(lái)幾個(gè)門派，供大(dà)家參考，也(yě)讓無比龐大(dà)的(de)前端劃分變得有趣一些，不(bù)然下面我放一張圖，你看了(le／liǎo)會暈菜。

Web前端知識體系實在(zài)是(shì)太龐大(dà)，先不(bù)感慨了(le／liǎo)，我們趕緊去看幹貨!

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

HTML + CSS這(zhè)部分建議在(zài)在(zài)線教程上(shàng)學習，邊學邊練，每個(gè)屬性後還有在(zài)線測試。然後過一遍之(zhī)後可以(yǐ)模仿一些網站做些頁面。記住這(zhè)個(gè)一定要(yào / yāo)多練、多練、多練 ，最重要(yào / yāo)的(de)事兒還得我說(shuō)三遍?

JavaScript要(yào / yāo)學的(de)内容實在(zài)很多，如果沒有其他(tā)編程語言的(de)基礎的(de)話，學起來(lái)可能要(yào / yāo)費些力，還是(shì)建議先通過在(zài)線教程學習一些基本語法和(hé / huò)定義。

然後你必須要(yào / yāo)看書，然後實踐(好多人(rén)問有沒有快速捷徑，我隻能告訴你：如果有捷徑，碼農們就(jiù)不(bù)用天天如此苦逼了(le／liǎo)吧)。

記住：忍得住寂寞枯燥，才能拿得到(dào)高薪!

對于(yú)習慣看視頻學習的(de)同學，以(yǐ)上(shàng)内容也(yě)可以(yǐ)在(zài)在(zài)線學習網站上(shàng)去搜，現在(zài)大(dà)部分基礎課程講解都還不(bù)錯。跟着敲一起學，确實可以(yǐ)避免看書查資料的(de)枯燥。

以(yǐ)下内容都是(shì)結合我自己的(de)學習路線與經驗，再整理彙總了(le／liǎo)網絡各路大(dà)神的(de)資料，希望能幫助源源不(bù)斷入坑的(de)新人(rén)更好的(de)學習。

web前端書籍必讀、必買

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

1 . JavaScript

先說(shuō) JavaScript，因爲(wéi / wèi)前面說(shuō)了(le／liǎo)，CSS最好跟着視頻練習，畢竟都是(shì)可視化的(de)，像做藝術。

《JavaScript DOM編程藝術》

最好的(de)JS入門書籍，最讓人(rén)有興趣讀完的(de)那種書。

它通過一個(gè)幻燈片案例，從頭到(dào)尾教你實現出(chū)來(lái)，最後效果實現的(de)同時(shí)，基本的(de)JS常用屬性，你也(yě)就(jiù)滾瓜爛熟了(le／liǎo)，很有成就(jiù)感。(個(gè)人(rén)很偏向這(zhè)種風格書籍，此書讓我徹底愛上(shàng)前端js)

一目了(le／liǎo)然地(dì / de)告訴你如何用JS操作DOM(這(zhè)是(shì)浏覽器端編程的(de)基本功)，還灌輸了(le／liǎo)最符合标準的(de)編程理念。可惜有點老，最新一版是(shì)2010年的(de)。不(bù)過不(bù)影響閱讀和(hé / huò)實現，全部按照最新ES5屬性就(jiù)行了(le／liǎo)。

《JavaScript高級程序設計》

又稱紅寶書，雅虎首席前端架構師，YUI的(de)作者Zakas出(chū)品。雖然書名帶了(le／liǎo)“高級”二字，但是(shì)講得都很基礎的(de)屬性内容，事無巨細。關鍵一點是(shì)翻譯的(de)也(yě)很到(dào)位，并不(bù)是(shì)如嚼蠟一般，這(zhè)很重要(yào / yāo)。看此書，我建議配着下面的(de)犀牛書一起看效果更佳。

《JavaScript權威指南》

著名的(de)淘寶前端團隊翻譯的(de)，看譯者列表都是(shì)一堆前期大(dà)神。

這(zhè)本書又叫犀牛書，被國(guó)人(rén)譽爲(wéi / wèi)：JavaScript開發者的(de)聖經。網上(shàng)對此書評價很多很好，大(dà)概意思是(shì)說(shuō)這(zhè)本書是(shì)一本JavaScript文檔手冊，更适合當作字典和(hé / huò)備忘錄查詢來(lái)使用。

我也(yě)是(shì)對這(zhè)本書有很厚的(de)感情和(hé / huò)依賴(忘了(le／liǎo)屬性就(jiù)拿來(lái)翻翻，總有收獲)，個(gè)人(rén)感覺這(zhè)本書還是(shì)寫得枯燥了(le／liǎo)些，畢竟是(shì)工具性質，不(bù)适合當作第一本入門來(lái)看，不(bù)過内容絕對是(shì)五顆星，無可挑剔!神書

《JavaScript語言精粹》

作者是(shì)大(dà)名鼎鼎的(de) 【老道(dào)】，我的(de)JS偶像，我github第一個(gè)關注的(de)就(jiù)是(shì)這(zhè)個(gè)大(dà)胡子(zǐ)叔叔。他(tā)是(shì) JSON格式的(de)發明和(hé / huò)維護者，也(yě)有很多著作和(hé / huò)對JS這(zhè)門語言的(de)超多貢獻，可見此人(rén)功力絕對頂級!

這(zhè)本書，屬于(yú)稍微入門以(yǐ)後看的(de)，了(le／liǎo)解了(le／liǎo)一些中高級概念比如：閉包、原型鏈、作用域鏈、繼承封裝等以(yǐ)後，看此書有如神助，看一頁相當于(yú)犀牛書幾十頁的(de)講解(不(bù)吹牛逼，當時(shí)我是(shì)這(zhè)感覺的(de))

2 . CSS

CSS類，如果視頻看完了(le／liǎo)，練習的(de)熟練了(le／liǎo)，你還需要(yào / yāo)一些書的(de)推薦和(hé / huò)查詢，也(yě)是(shì)有必要(yào / yāo)的(de)，我再來(lái)給你羅列幾本經典的(de)收藏書，買不(bù)買均可的(de)。。

《Head first HTML&CSS》

好的(de)入門書。看兩遍就(jiù)對HTML & CSS有個(gè)大(dà)概印象了(le／liǎo)。

此時(shí)把w3cschool作爲(wéi / wèi)備查手冊收藏起來(lái)，結合此書，事半功倍，成就(jiù)感爆棚。

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

最權威的(de)CSS書籍，除了(le／liǎo)閱讀W3C的(de)文檔外的(de)不(bù)二選擇(就(jiù)是(shì)翻譯太操蛋，可能有的(de)詞你以(yǐ)爲(wéi / wèi)是(shì)火星語，不(bù)過不(bù)影響閱讀)。有時(shí)間可以(yǐ)反複看，有css3内容，并當做字典随時(shí)查。類似犀牛書。

《圖解CSS3：核心技術與案例實踐》

這(zhè)本書講解的(de)是(shì)最新的(de)CSS3(前幾本書停留在(zài)CSS2.1時(shí)代，2.1是(shì)基礎)，CSS3也(yě)是(shì)必學的(de)，不(bù)然真的(de)跟不(bù)上(shàng)時(shí)代了(le／liǎo)。

《CSS禅意花園》

這(zhè)本書很值得期待，我看過PDF版本的(de)，那時(shí)候還沒翻譯出(chū)來(lái)，翻譯的(de)也(yě)一般，不(bù)過作者是(shì)巨牛逼的(de)，聽說(shuō)對css理解的(de)就(jiù)像自己的(de)左右手，光靠寫CSS他(tā)年薪就(jiù)輕松百萬了(le／liǎo)。。汗顔!思路清晰，圖文并茂，還解決一些疑難雜症和(hé / huò)高級技巧，類似于(yú)JS的(de)語言精粹了(le／liǎo)，大(dà)神級别。

好了(le／liǎo)，差不(bù)多就(jiù)推薦到(dào)這(zhè)裏，CSS這(zhè)基本是(shì)基于(yú)情懷，羅列一下，買不(bù)買都沒必要(yào / yāo)，想當年我學CSS是(shì)靠着幾個(gè)僅有的(de)視頻，一個(gè)屬性一個(gè)屬性的(de)練習，還有IE6各種兼容問題，虐到(dào)爆，那酸爽(現在(zài)你們是(shì)幸運的(de)，基本不(bù)用兼容IE6這(zhè)個(gè)老東西了(le／liǎo))。

真正起到(dào)決定作用的(de)，還是(shì)JS語言的(de)掌握和(hé / huò)實踐，JS能力越強基礎越穩固，你的(de)前端能力就(jiù)會越好，自然薪資越高，所以(yǐ)現實點說(shuō)大(dà)家，大(dà)家一起努力吧，讓money都到(dào)碗裏來(lái)!

有些童鞋認爲(wéi / wèi)：從來(lái)不(bù)需要(yào / yāo)買紙質書，我全程PDF就(jiù)行了(le／liǎo)嘛，不(bù)過我建議有些書還是(shì)要(yào / yāo)紙質的(de)，這(zhè)樣有感覺，也(yě)可以(yǐ)做筆記，甚至随時(shí)當工具書字典來(lái)查詢，由于(yú)前端的(de)特殊性和(hé / huò)js語言的(de)屬性之(zhī)繁多龐雜，我建議你還是(shì)要(yào / yāo)買紙質的(de)書，幫助很大(dà)。