近兩年來，前端開發工程師越來越火了，薪資待遇也快接近後端開發工程師了。很多準備入行前端開發工程師的小夥伴們，不知道準備得怎麼樣了呢？有的朋友在想方設法的學習，爭取在年後的金三銀四能靠實力找到一份滿意的工作！有的小夥伴在準備準備回家過個團圓年，來年再戰！還有的小夥伴很迷茫，想學前端，卻沒有方向！零基礎如何高效的學習web前端開發？

首先，無論學任何一個技術，都是從零基礎開始的，前端開發也是一樣。做軟體開發，是從事程式設計開發工作，必須先從語法基礎開始學習，透過語法組成產品效果。前端開發的基礎語法，由HTML+CSS+JavaScript組成，這是前端開發最基本的3個語言。

HTML就是超文字標記語言，組成網頁內容的最基本語言。你可以直接說他是網頁的骨架，網頁的圖片、文字、影片、音訊、程式都需要他引入到網頁中體現。

光是HTML做網頁，只是有了內容，當然是遠遠不夠的。因為只是HTML的話，只能用Table做佈局才能勉強做出個成型的網頁來。但是從Web2.0時代開始，都是盒子模型佈局法了，也就是用DIV+CSS來實現佈局了。

CSS就是層疊樣式表。透過樣式屬性來對標籤進行佈局規範，在不再使用table佈局的時候，只要CSS樣式對網頁標籤進行對應的佈局實現才是正確的開發方式了。

瀏覽器指令碼語言：JavaScript，JavaScript是我們學習前端開發中非常重要的一個內容，也是一個大家經常掉坑裡的難點。JavaScript現在可以說是網際網路時代使用率最高的指令碼語言了，在網頁中，所有的資料渲染，特效的互動都需要利用JavaScript，來影響瀏覽器的顯示。JavaScript不只是開發網頁特效和渲染資料的重要內容，在學習前端開發的後期，大量使用演算法和框架的時候，對JavaScript基礎的考驗也是很多的。

前面的都是基礎東西，現在去就業前端開發，不是隻靠個基礎東西，搞個移動端頁面就可以算成熟了。前端3大框架，VUE、Angular、React這3個可以說是現在非常火熱的了。

現在的前端專案，比以前是更加複雜化、多樣化了。專案複雜了，問題也多了。

在掌握基礎模組的基礎上，Web前端工程師還必須進一步將技能層次化、系統化，從而能夠實現頁面架構、移動頁面開發等等任務。在成為一個優秀的前端工程師的道路上，充滿了汗水和辛勞。

來黑馬程式設計師之前，我是個門外漢，對於程式設計唯一的理解就是很難很高階的東西，但是在老師準確的教學之後，我感受到的程式設計是很有程式感的，是有邏輯可尋的；一個基本的網頁，再複雜，也可以分解為多個部分，而每個部分又可以再次細分，再運用所學的知識，一步一步實現各個細節效果的實現，好像一切顯的沒有那麼難的無法做到，當然了，學習還只是開始。

學習HTML，主要是定義網頁的內容。剛剛接觸的我，覺得挺懵，不懂這些標籤啊，格式啊，語法之類的有什麼用，需要怎麼去靈活的運用，隨著學習的發展，慢慢的從死背，嘗試著去理解，也就發現了其中的樂趣。

學習的是CSS，主要是用來描述網頁的。一學習這麼多東西，感覺要背的好多，比HTML複雜一些，但是好在每種語法都可以用頁面效果去記憶，隨著程式碼量的增多，慢慢的也可以記住這些樣式。在CSS學習的過程中，我第一次做了一個網頁，百度首頁，沒想到看上去如此簡單的網頁，實際要寫的東西也不少，需要我們靈活的運用所學的知識以外，還需要學會查閱知識，學習新的知識並且去運用；這對一個只會接受而不會主動去學習的我是一個變化，我需要對一些不熟悉甚至沒有接觸的知識去查閱學習並運用。在CSS中，我覺得對網頁佈局很重要的是盒子模型，再後續寫網頁的過程中，深深的感受到了盒子模型是多麼重要，即使到現在還是不能非常深刻的理解。

總的來說，半月的前端學習，掌握的東西不是很多，但是接觸的東西卻很多，平時的學習習慣也沒有培養起來，複習的不到位，只是靠第一印象的記憶去運用，腦子裡的東西難免有點少，希望接下來的學習時間，自己能更多的學會複習，學會看網站和論壇等學習，更好的掌握這些知識，畢竟這些知識都是這一行很基本的，運用才是關鍵。

和大家分享一下前端基礎學習資料，想入坑的朋友們可以試試：http://yun.itheima.com/map/50.html?lxlyk

如果你現在是零基礎學員，大致可以按如下思路學習系統學習：

基礎部分

1、HTML + CSS 這部分學習，可以模仿一些網站做些頁面。

2、Javascript 要學的內容實在很多，如果沒有其他程式語言的基礎的話，學起來可能要費些力。

進階部分

有了以上基礎，就可以進行一般的靜態網頁設計，不過對於複雜的頁面還需要進一步學習。

1、CSS。

2、Javascript。上面提到內容還不足以讓你勝任JS程式設計。在有了基礎之後，進一步學習內容包括：

a) 框架。

推薦jQuery，簡單易用，學習方法也很簡單，照著產品文件做幾個頁面就行了，不用面面俱到，以後遇到問題查文件就行了。框架可以幫你遮蔽瀏覽器的差異性，讓你能更專注與Web開發學習的精髓部分。補充： 可以使用 Codecademy 學習 Javascript，jQuery，使用者體驗真的很好(感謝 TonyOuyang )。

b) Javascript 語言正規化 。這個名字可能並不恰當，只是我找不到可以描述“面向物件”，“函式式”這個兩個概念的概念。Javascript不完全是一個面向物件的語言，它的很多設計理念都有函式程式語言的影子，甚至說如果你不用面向物件，完全可以把它理解成一門函數語言程式設計語言。

Javascript的很多語言特性，都是因為他具有函式式語言的特點才存在的。這部分推薦先學習面向物件的基本理論，對封裝，繼承，多型等概念要理解，維基百科，百度百科會是你的幫手。

c) Javascript 語言內部機制。必須弄清如下概念：JS 中變數的作用域，變數傳遞方式，函式的定義環境與執行環境，閉包，函式的四種呼叫方式(一般函式，物件的方法，apply，call)，以及四種呼叫方式下，‘this’指向的是誰。

d) dom程式設計，這個Web前端工程師的核心技能之一。

e) Ajax程式設計，這是另一核心技術。Ajax建議在網上查些資料，瞭解這個概念的來龍去脈，百度百科，維基百科上的內容就足夠了。真正程式設計是很容易的，如今幾乎所有框架都對Ajax有良好的封裝，程式設計並不複雜。

f) 瞭解瀏覽器差異性。這部分包括CSS和js兩部分，瀏覽器差異內容很多，建議在實踐中多多積累。另外對於瀏覽器的渲染模式，DOCTYPE等內容應該系統學習。

3、HTML5和CSS3 。HTML5規範已經於2014年10月28日釋出了，移動端HTML5和CSS3已經得到了非常廣泛的使用，必知必會呀。

升級部分

有了以上知識，對於大多數小型網站，你應該已經可以寫出能夠工作的程式碼了。但要想成為更專業的前端，你還需繼續努力。更高的要求大概還有四方面：1)易維護，2)可測試，3)高效能，4)低流量(移動端)。

易維護。對於頁面你該理解‘樣式’，‘資料’，‘行為’三者分離，對應的當然就是CSS,HTML,js。對於js程式碼，你最好了解設計模式，重構，MVC等內容。

可測性。

高效能。

低流量。移動端關注比較多。

額外補充部分

前端專案同樣面臨軟體生命週期的各個環節，首先是程式碼管理，你必須學會使用Svn和Git。其次是程式碼的構建，如今前端程式碼構建已經不是簡單的壓縮一下了，需要進行依賴管理、模組合併、各種編譯，比需要學會使用Grunt、Gulp等前端構建工具。

以上內容只是簡單說了前端學習的順序。對於前段開發，基本內容就這些了，其他的就看自己擴充套件了，技多不壓身。

推薦教程:可以去看看百戰程式設計師的前端入門資料，面向就業方向的，講解的很深入，而且是結合專案學習的。對打基礎特別重要，主要還都是免費的，絕對適合小白上手。而且他家的課程學習也非常全面，可以去了解一下。

如果你現在是零基礎學員，大致可以按如下思路學習系統學習：

基礎部分

1、HTML + CSS 這部分學習，可以模仿一些網站做些頁面。

2、Javascript 要學的內容實在很多，如果沒有其他程式語言的基礎的話，學起來可能要費些力。

進階部分

有了以上基礎，就可以進行一般的靜態網頁設計，不過對於複雜的頁面還需要進一步學習。

1、CSS。

2、Javascript。上面提到內容還不足以讓你勝任JS程式設計。在有了基礎之後，進一步學習內容包括：

a) 框架。

推薦jQuery，簡單易用，學習方法也很簡單，照著產品文件做幾個頁面就行了，不用面面俱到，以後遇到問題查文件就行了。框架可以幫你遮蔽瀏覽器的差異性，讓你能更專注與Web開發學習的精髓部分。補充： 可以使用 Codecademy 學習 Javascript，jQuery，使用者體驗真的很好(感謝 TonyOuyang )。

b) Javascript 語言正規化 。這個名字可能並不恰當，只是我找不到可以描述“面向物件”，“函式式”這個兩個概念的概念。Javascript不完全是一個面向物件的語言，它的很多設計理念都有函式程式語言的影子，甚至說如果你不用面向物件，完全可以把它理解成一門函數語言程式設計語言。

Javascript的很多語言特性，都是因為他具有函式式語言的特點才存在的。這部分推薦先學習面向物件的基本理論，對封裝，繼承，多型等概念要理解，維基百科，百度百科會是你的幫手。

c) Javascript 語言內部機制。必須弄清如下概念：JS 中變數的作用域，變數傳遞方式，函式的定義環境與執行環境，閉包，函式的四種呼叫方式(一般函式，物件的方法，apply，call)，以及四種呼叫方式下，‘this’指向的是誰。

d) dom程式設計，這個Web前端工程師的核心技能之一。

e) Ajax程式設計，這是另一核心技術。Ajax建議在網上查些資料，瞭解這個概念的來龍去脈，百度百科，維基百科上的內容就足夠了。真正程式設計是很容易的，如今幾乎所有框架都對Ajax有良好的封裝，程式設計並不複雜。

f) 瞭解瀏覽器差異性。這部分包括CSS和js兩部分，瀏覽器差異內容很多，建議在實踐中多多積累。另外對於瀏覽器的渲染模式，DOCTYPE等內容應該系統學習。

3、HTML5和CSS3 。HTML5規範已經於2014年10月28日釋出了，移動端HTML5和CSS3已經得到了非常廣泛的使用，必知必會呀。

升級部分

有了以上知識，對於大多數小型網站，你應該已經可以寫出能夠工作的程式碼了。但要想成為更專業的前端，你還需繼續努力。更高的要求大概還有四方面：1)易維護，2)可測試，3)高效能，4)低流量(移動端)。

易維護。對於頁面你該理解‘樣式’，‘資料’，‘行為’三者分離，對應的當然就是CSS,HTML,js。對於js程式碼，你最好了解設計模式，重構，MVC等內容。

可測性。

高效能。

低流量。移動端關注比較多。

額外補充部分

前端專案同樣面臨軟體生命週期的各個環節，首先是程式碼管理，你必須學會使用Svn和Git。其次是程式碼的構建，如今前端程式碼構建已經不是簡單的壓縮一下了，需要進行依賴管理、模組合併、各種編譯，比需要學會使用Grunt、Gulp等前端構建工具。

以上內容只是簡單說了前端學習的順序。對於前段開發，基本內容就這些了，其他的就看自己擴充套件了，技多不壓身。

推薦教程:可以去看看百戰程式設計師的前端入門資料，面向就業方向的，講解的很深入，而且是結合專案學習的。對打基礎特別重要，主要還都是免費的，絕對適合小白上手。而且他家的課程學習也非常全面，可以去了解一下。