web前端 到底怎么学？掌握什么可以拿到高薪？
web前端到底怎么學(xué)？
那么在講 web前端怎么學(xué) 這個(gè)大命題之前呢，依據(jù)我本人的尿性，還是得先把你拉入坑，讓你在坑里好好學(xué) O(∩_∩)O
web前端的歷史淵源 和一些出處，童鞋們大概都有所了解了。
下面我們進(jìn)入【相愛】階段（我都不認(rèn)識(shí)你，就tm相愛了？）
但是我會(huì)想方設(shè)法讓你愛上她（web前端開發(fā)）。
一般據(jù)我經(jīng)驗(yàn)，在喜歡并且決定和她戀愛之前，我都會(huì)做一下充分準(zhǔn)備和調(diào)查，有必要了解和研究清楚 ‘她’ 的幾個(gè)特性和習(xí)慣。
1. web前端的基本工作職責(zé) 和基礎(chǔ)技能（要清楚）2.??web前端的分類和門派（簡要概述，武林 實(shí)在是太大啦）。3. 前端開發(fā) 必看的書籍資料（干貨重點(diǎn)）
如果 你已經(jīng)了解清楚以上前2點(diǎn)并思路清晰，那就直接 和她相愛吧-直接跳入 【前端開發(fā) 必看的書籍資料】
1
web前端的基本工作職責(zé)
（要清楚）
“ 入一行，要先知一行 ”；我們來看看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ù)邏輯。現(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 這種的框架神器，由于其好用，簡單，效果多樣，兼容完美，高效率等特性，迅速席卷全世界，所以如果想入門，jquery 這個(gè)東西你是逃不掉的，而且利用它簡單的語法，你會(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ì)，了解軟件工程的綜合人才。
（臥擦！這才入門，web前端就這么多職能 和掌握的基本技能，不開森了 ，哼！）
?，看到這一大篇的職責(zé)和技能，你并不要害怕，因?yàn)檫@些就像小孩子，會(huì)走路，會(huì)說話。只要你有興趣，只要有人領(lǐng)路，有教程自然而然就能掌握的技能，至于一些設(shè)計(jì)素養(yǎng)，反正你不是UI，有最好，沒有又有什么所謂呢？
2
web前端的分類和門派
（簡要概述，武林 實(shí)在是太大啦）
根據(jù)web前端的細(xì)分工種 和 業(yè)務(wù)不同，我無恥的把她比擬出來幾個(gè)門派，供大家參考，也讓無比龐大的前端劃分變得有趣一些，不然下面我放一張圖， 你看了會(huì)暈菜。
這里我先簡單說幾種，我們常常熟知的幾個(gè)門派。
比如：
●【少林派】：七十二般武藝樣樣精通 - web網(wǎng)站開發(fā)
●【武當(dāng)派】：以柔克剛 - 移動(dòng)APP開發(fā)
●【峨嵋派】：傾國傾城 - canvas 數(shù)據(jù)可視化
●【華山派】：劍法精湛 - ?nodejs開發(fā)
●【逍遙派】：瀟灑飄逸 - ?HTML5游戲
由于web前端知識(shí)體系 實(shí)在是太龐大，這是另一個(gè)話題，三言兩語是描述不清的，我們后面會(huì)專門開一個(gè)專題文章，來講解和討論這個(gè)話題。
好累，我們趕緊去看干貨！
3
前端開發(fā) 必看的書籍資料
（干貨重點(diǎn)-入門篇）
javascript 要學(xué)的內(nèi)容實(shí)在很多，如果沒有其他編程語言的基礎(chǔ)的話，學(xué)起來可能要費(fèi)些力，還是建議先在 w3school上學(xué)習(xí)一些基本語法 和定義。
?然后你必須要看書，然后實(shí)踐（好多人問 有沒有快速捷徑，我只能告訴你：如果有捷徑，碼農(nóng)們就不用天天如此苦逼了吧）。
對(duì)于習(xí)慣看視頻學(xué)習(xí)的同學(xué)，以上內(nèi)容也可以在 慕課網(wǎng) 這個(gè)在線學(xué)習(xí)網(wǎng)站上去搜，現(xiàn)在里面基礎(chǔ)課程講解都還不錯(cuò)。跟著敲一邊，確實(shí)可以避免看書查資料的枯燥。
下面多圖預(yù)警，多書預(yù)警。
以下內(nèi)容都是經(jīng)過我自己本身的學(xué)習(xí)路線經(jīng)驗(yàn)，還有網(wǎng)絡(luò)各路大神共同整理的資料 匯總，幫助源源不斷入坑的新人更好的學(xué)習(xí)。
前端書籍必讀、必買（本帥認(rèn)為）
★★ 越多，推薦等級(jí)越高，和難度無關(guān)。最好按照我給的順序入門，這樣不會(huì)讓你枯燥，想放棄，如果先推薦經(jīng)典的厚的，滿篇定義，我估計(jì)是害你們放棄。
01
【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)的編程理念。可惜有點(diǎn)老，最新一版是2010年的。不過不影響閱讀和實(shí)現(xiàn)，全部按照最新ES5屬性就行了。
★★★★
又稱紅寶書，（我喜歡叫 望眼鏡）
雅虎首席前端架構(gòu)師，YUI的作者Zakas出品。雖然書名帶了“高級(jí)”二字，但是講得都很基礎(chǔ)的屬性內(nèi)容，事無巨細(xì)。關(guān)鍵一點(diǎn)是翻譯的也很到位，并不是如嚼蠟一般，這很重要。看此書，我建議配著下面的犀牛書一起 看效果更佳。
《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ì)是五顆星，無可挑剔！神書
????★★★★★
作者是大名鼎鼎的 【老道】，我的JS 偶像，我github第一個(gè)關(guān)注的就是這個(gè)大胡子叔叔。他是 JSON格式的發(fā)明和維護(hù)者，也有很多著作和對(duì)JS 這門語言的超多貢獻(xiàn)，可見此人功力絕對(duì)頂級(jí)！
這本書，屬于稍微入門以后看的，了解了一些中高級(jí)概念 比如：閉包、原型鏈、作用域鏈、繼承封裝等以后，看此書有如神助，看一頁相當(dāng)于犀牛書幾十頁的講解（不吹牛逼，當(dāng)時(shí)我是這感覺的）
02
【CSS】
【CSS】類， 如果視頻看完了，練習(xí)的熟練了，你還需要一些書的推薦和查詢，也是有必要的，我再來給你羅列幾本經(jīng)典的收藏書，買不買均可的。。《Head first HTML&CSS》????★★★
好的入門書。看兩遍就對(duì)HTML & CSS 有個(gè)大概印象了。
此時(shí)把w3cschool作為備查手冊(cè)收藏起來，結(jié)合此書，事半功倍，成就感爆棚。
????★★★★
最權(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)在你們是性福的，基本不用兼容IE6 這個(gè)老東西了，）。
真正起到?jīng)Q定作用的，還是JS語言的掌握和實(shí)踐，JS能力越強(qiáng) 基礎(chǔ)越穩(wěn)固，你的前端能力就會(huì)越好， 自然薪資越高，所以現(xiàn)實(shí)點(diǎn)說大家，大家一起努力吧，讓money 都到碗里來!
文章轉(zhuǎn)載自：劉望舒
1.微信群：
添加小編微信：color_ld，備注“進(jìn)群+姓名+公司職位”即可，加入【云計(jì)算學(xué)習(xí)交流群】，和志同道合的朋友們共同打卡學(xué)習(xí)！
2.征稿：
投稿郵箱：liudan@csdn.net；微信號(hào)：color_ld。請(qǐng)備注投稿+姓名+公司職位。
推薦閱讀
Istio，下一個(gè)Kubernetes？
云計(jì)算的“傲慢”與“偏見”
大數(shù)據(jù)時(shí)代，誰的眼神鎖定你？
別吐槽了！面試要求徒手寫代碼？你與頂級(jí)程序員的差別就在這
算法工程師獨(dú)得恩寵 四面楚歌的Android工程師該何去何從？
騰訊將創(chuàng)辦騰訊云啟商學(xué)院，馬化騰任榮譽(yù)院長
扎堆出海的抖音、今日頭條、UC 頭條們后來怎么樣了？
創(chuàng)業(yè)者老板被程序員「割」了韭菜？
中國云計(jì)算的十年江湖
◆
AI福利精選
◆
對(duì)于想系統(tǒng)學(xué)習(xí)人工智能的朋友，我們?yōu)榇蠹覝?zhǔn)備了一個(gè)干貨資源包，包含多家一線公司技術(shù)大咖30+精選講義。跟對(duì)方向，可以讓你的學(xué)習(xí)事半功倍，歡迎掃碼領(lǐng)取！
↓↓↓??點(diǎn)擊【閱讀原文】查看「CSDN云計(jì)算」往期精彩內(nèi)容
總結(jié)
以上是生活随笔為你收集整理的web前端 到底怎么学？掌握什么可以拿到高薪？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 医药卫生杂志要多少钱
- 下一篇： 前端面试题网址合辑