web前端到底怎麼學？乾貨資料！

時間 2019-12-01

標籤 web 前端到底怎麼乾貨資料欄目 HTML 简体版

原文原文鏈接

hi，你們好！javascript

個人第一篇文章：【web前端究竟是什麼？有前途嗎？】，在我沒想到如此 ‘HOT’ 的狀況下獲得不少好評和有效傳播。php

也爲我近期新開的我的前端公衆號：前端你別鬧（webunao）css

直接增長了幾百粉（果真，帥的人你們都喜歡。）html

被國內著名技術博客 CSDN 推上博客首頁，而且通過我受權在其餘公衆號也轉載了很多。前端

我以爲我這片入門文章能夠小火，究其緣由有如下幾點

web前端是如此的火熱，關注度也逐年升高java
因爲前端開發的火熱和一些IT巨頭公司對 web前端開發人員的需求旺盛，讓愈來愈多的孩子轉入前端node
前端開發領域是it技術語言領域惟一一個男女老幼均可以快速入門並快速提高興趣的領域（嘿嘿：妹子那絕對是最多的！）jquery
我文風實在是太逗比了，我顏值實在是太帥了css3

不知不覺，我廢話又多了起來，段子手的天性就是改不了？

ok ,咱們切入今天的正題：git

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.前端開發必看的書籍資料（乾貨重點-入門篇）

1、 html + css 這部分建議在 w3school 在線教程上學習，邊學邊練，每一個屬性後還有在線測試。而後過一遍以後能夠模仿一些網站作些頁面。記住這個必定要多練多練多練，最重要的事兒還得我說三遍？

2、 javascript 要學的內容實在不少，若是沒有其餘編程語言的基礎的話，學起來可能要費些力，仍是建議先在 w3school上學習一些基本語法和定義。
而後你必需要看書，而後實踐（好多人問有沒有快速捷徑，我只能告訴你：若是有捷徑，碼農們就不用每天如此苦逼了吧）。

忍得住寂寞枯燥，才能拿獲得高薪

對於習慣看視頻學習的同窗，以上內容也能夠在慕課網這個在線學習網站上去搜，如今裏面基礎課程講解都還不錯。跟着敲一邊，確實能夠避免看書查資料的枯燥

下面多圖預警，多書預警。

如下內容都是通過我本身自己的學習路線經驗，還有網絡各路大神共同整理的資料彙總，幫助源源不斷入坑的新人更好的學習。

前端書籍必讀、必買（本帥認爲）
★★ 越多，推薦等級越高，和難度無關。最好按照我給的順序入門，這樣不會讓你枯燥，想放棄，若是先推薦經典的厚的，滿篇定義，我估計是害大家放棄。

【JavaScript】

先說 JavaScript,由於前面說了，css最好跟着視頻練習，畢竟都是可視化的，像作藝術。

【第一本】《JavaScript DOM編程藝術》★★★★★

最好的JS入門書籍，最讓人有興趣讀完的那種書。
它經過一個幻燈片案例，從頭至尾教你實現出來，最後效果實現的同時，基本的JS經常使用屬性，你也就倒背如流了，頗有成就感。（我的很偏向這種風格書籍，此書讓我完全愛上前端js）
一目瞭然地告訴你如何用JS操做DOM（這是瀏覽器端編程的基本功），還灌輸了最符合標準的編程理念。惋惜有點老，最新一版是2010年的。不過不影響閱讀和實現，所有按照最新ES5屬性就好了。

【第二本】《JavaScript高級程序設計》 ★★★★

又稱紅寶書，（我喜歡叫 望眼鏡）
雅虎首席前端架構師，YUI的做者Zakas出品。雖然書名帶了「高級」二字，可是講得都很基礎的屬性內容，事無鉅細。
關鍵一點是翻譯的也很到位，並非如嚼蠟通常，這很重要。看此書，我建議配着下面的犀牛書一塊兒 看效果更佳。

【第三本】《JavaScript權威指南》 ★★★★★

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

這本書又叫犀牛書，被國人譽爲：javascript開發者的聖經。網上對此書評價不少很好，大概意思是說這本書是一本JavaScript文檔手冊，更適合看成字典和備忘錄查詢來使用。
我也是對這本書有很厚的感情和依賴（忘了屬性就拿來翻翻，總有收穫），我的感受這本書仍是寫得枯燥了些，畢竟是工具性質，不適合看成第一本入門來看，不過內容絕對是五顆星，無可挑剔！神書

【第四本】《JavaScript語言精粹》 ★★★★★

做者是大名鼎鼎的 【老道】，個人JS 偶像，我github第一個關注的就是這個大鬍子叔叔。
他是 JSON格式的發明和維護者，也有不少著做和對JS 這門語言的超多貢獻，可見此人功力絕對頂級！
這本書，屬於稍微入門之後看的，瞭解了一些中高級概念 好比：閉包、原型鏈、做用域鏈、繼承封裝等之後，
看此書有如神助，看一頁至關於犀牛書幾十頁的講解（不吹牛逼，當時我是這感受的）

【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

本篇最後（我真的很累，原創很累的，因此我得結尾了，後一篇在介紹更多的乾貨）

我總結了部分一些知乎大神舉薦的書評鏈接（微信不可外鏈，可查看我博客）和我本身以爲要看的書，羅列以下，供君參考（嘿嘿！是不說我正經起來，很不習慣？）

★ 越多，難度越高。

CSS

CSS權威指南（第3版）★★
精通CSS★★★
HTML & CSS設計與構建網站★

JavaScript

JavaScript & jQuery交互式Web前端開發★
JavaScript DOM編程藝術（第2版）★
JavaScript高級程序設計（第3版）★★
鋒利的jQuery★★
高性能JavaScript★★★
JavaScript語言精粹★★★
JavaScript權威指南★★★
編寫可維護的JavaScript★★★
JAVASCRIPT語言精髓與編程實踐★★★
Effective Javascript★★★
Secrets of the JavaScript Ninja★★★
JavaScript模式★★★
JavaScript設計模式★★★★
基於MVC的JavaScript Web富應用開發★★★