如果是自學，根據個人學習消化能力決定每天的學習量，下面是學習路線。

第一階段 html css js

入門即可，除了js不推薦買書，找個影片教程或者w3cschool即可。包括html5,css3也要學會。js可以初步會用即可，能寫簡單的特效

做一些練習

可以仿寫一些簡單的頁面和特效，加強熟練度，寫個幾十個頁面就差不多了

第二階段 學習 庫

這個有很多，比如bootstrap,jQuery等，這兩種比較簡單易上手，可以先學這兩個

熟悉js

建議加深js理解，更加熟練使用js，作用閾，作用閾鏈，原型繼承等等。之後可以再學學es6

第三階段 學習 框架

框架學習對js要求一般比較高，建議對es6有一定了解，流行的框架比如react,redux,router加上螞蟻金服的antd庫，再者就是vue全家桶或是anguler了，這三個是最火的

第四階段 做個網站

可以無後臺，也可以做個假後臺，做完差不多這套就熟練了，一線城市沒經驗拿個7-8000沒問題吧

第五階段 橫向發展-深入理論

此階段和第六階段不衝突，可以同時進行，這個感覺自己只會點皮毛，就不多說了，免得誤人子弟

第六階段 縱向擴充套件-後端

這就涉及的多了，建議學學node，畢竟js已經熟悉了，用起來方便，其他的比如伺服器，效能最佳化，SEO，Linux等等

學習前端就好比如蓋房子~

html就充當了房子結構這部分，也是房子的基礎。

css呢，就好比咱們房子的裝修，牆面什麼顏色，什麼風格，什麼地板...這些給房子改變風格，樣式的就是css

javascript呢，就好比這個房子的功能，房子需要製冷吧，需要暖氣吧，也需要上下水吧。這些功能性的就相當於是javascript

例子可能不是很恰當，只是幫助大家有個初步的認識~

方法步驟、工具以及開發的案例展現

1、前端工具箱（dreamwear/sublime/Photoshop/SVN等）

2、零基礎入門（html，CSS）

前端開發概況、程式碼入門

頁面基本結構、文件宣告、編碼宣告、css語法、style屬性、link和style標籤、id屬性、基本樣式、Border 、Background、 Font、盒模型、文字設定...

常用標籤集合

header、article、aside、section、footer、nav、h1-h6、p、ul、ol、li、img、dl、dt、dd...絕對路徑、相對路徑、標籤語義化、標籤巢狀規範、SEO...

常用選擇器&標籤型別劃分

d、class、型別選擇、包含選擇、群組選擇、萬用字元、選擇器優先順序、標籤樣式初始化訂製方案、超連結及偽類劃分、標籤型別劃分及特性、inline、inline-block、block..

浮動進階

浮動的作用、浮動的特性、文件流、浮動的各種問題、clear、BFC(塊級格式化上下文)、觸發BFC的條件、Haslayout、Haslayout的觸發條件...

定位

relative相對定位、Absolute絕對定位、Absolute絕對定位、Fixed 固定定位、inherit 繼承、static靜態定位、預設值、zIndex層級問題、margin負值、透明度...

表格和表單

表格標籤、表格樣式重置、單元格合併、表單元素、表單相關的屬性操作、表單預設樣式初始...

相容性問題處理

相容性問題總結、浮動在IE6，7下的各種問題、表單在低版本IE的問題、處理低版本IE對新增標籤的支援、CssHack、條件註釋語句、PNG問題、透明度的問題、固定定位在IE低版本的處理方式...

整站進階

樣式規劃、favicon、Css Sprite、Data URI、隱藏元素、測試工具使用、滑動門、等高佈局、三列布局、未知寬高圖片在容器內水平垂直居中、文字水平垂直居中、多行文字水平垂直居中...

css3入門

transition、屬性選擇器、nth-of- type、nth-child、backgroundSize、box-sizing、圓角，盒模型陰影、文字陰影、rgba、表單高階、H5表單新增屬 性、E:not(s)、E:target、E::selection、background-clip...

移動端佈局

測試環境Emulation、viewport、 window.devicePixelRatio、物理解析度、Media Queries、rem、window.screen、移動端佈局相關問題、 window.deviceorientationevent、橫豎屏判斷...

Animation和Transform

瀏覽器字首、keyFrames、Animation調 用、播放次數設定、動畫偶數次呼叫順序、Animation的問題、無縫滾動、動畫播放|暫停、rotate旋轉、deg、skew斜切、scale縮 放、translate位移、transform-origin、transform的執行順序問題...

Bootstrap前端開發框架

Html語法規範、CSS語法規範、Less 和 Sass 中的巢狀、class 命名、選擇器、Normalize.css、柵格系統、排版、程式碼、響應式工具...

3.專案實戰

PC端的企業網站佈局（例：sony官網）

PC端的電商類網站佈局（例：京東商城）

推薦圖書：

學習前端書籍自然不可少，這裡給大家推薦《html 5與 css 3權威指南》，雖然主要是講解html5+css3，但倒也是一本好的入門書籍。該書比較系統，覆蓋面也比較廣。技術新穎，所有知識點都緊跟 html 5與css 3的最新發展動態（html 5和css 3仍在不斷完善之中）；也有比較強的實戰性（包含246個示例頁面），不僅每個知識點都 配有精心設計的小案例（便於動手實踐），配合案例，也比較生動有趣。該書不僅能滿足你全面而系統地學習理論知識的需求，還能滿足你需要充分實踐的需求。

本次整理了一些web前端影片資料，註冊賬號就能免費下載，初級、中級、高階的任君選

下載連結： web前端開發工程師_web前端開發影片教程

個人認為學習前端可能又分為下面幾個階段；

第一階段——HTML標籤的學習

超文字標記語言(HyperText Mark-up Language 簡稱HTML)，“超文字”就是指頁面內可以包含圖片、連結，甚至音樂、程式等非文字元素。

html是一個網頁的骨架，就好比是蓋房子的結構~這也是前端頁面的基礎。試著想一下，如果一個房子連磚頭和水泥都沒有，後面的步驟又有什麼意義呢？所以我們必須完全掌握HTML的基本結構和常見的標籤，屬性。有了一個好的開始，距離成功已經一小半啦~

關於HTML怎麼記憶、學習？可能一上來死記硬背，也不會有太好的預期。而且還有可能被嚇到？

“我去！這麼多標籤！怎麼記得玩？”

個人感覺有兩點可以嘗試：

學習HTML就是要自己不斷的去寫，去嘗試。看著自己的程式碼能跑起來，有了心目中的效果，這種心情還是很開心的！給大家推薦一個網站，w3cSchool，這裡面有線上的程式碼編輯器。可以邊寫邊看到效果~

ok~學習完成html後，我們來到第二階段——css

去給我們的房子裝修一番吧~

第二階段——CSS的學習

CSS，層疊樣式表—— （Cascading Style Sheets），是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對於傳統HTML的表現而言，CSS能夠對 網頁中的物件的位置排版進行畫素級的精確控制，支援幾乎所有的字型字號樣式，擁有對網頁物件和模型樣式編輯的能力，並能夠進行初步互動設計，是目前基於文 本展示最優秀的表現設計語言。CSS能夠根據不同使用者的理解能力，簡化或者最佳化寫法，針對各類人群，有較強的易讀性。

CSS看似比較繁雜，其實只要掌握了CSS中的盒子模型、定位、以及頁面佈局，就基本上掌握了大半啦~這時我們就以及能夠對網頁中各個元素進行精準的排版，做出符合我們意願的網頁啦！

關於CSS的各種屬 性，我們還是可以參考學習HTML那樣。可以說CSS的屬性幾乎完全是語義化的。我們需要改變邊框，那就是“border”，那我們需要右側邊框做一些改 變，那就是“border-right”。很明顯，接下來按照我們的需求還有“右邊框的寬度——border-right-with”，”右邊框顏色—— border-right-color”等等等，諸如此類~

完全就是我們需要什麼，只要憑著需求去尋找。

說完裝修，我們終於要給房子打造一些功能啦~follow me~

第三階段——JavaScript

JavaScript一種直譯式指令碼語言，是一種動態 型別、弱型別、基於原型的語言，內建支援型別。它的直譯器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的指令碼語言，最早是在 HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。

簡單來 說，javascript是一個可以執行在瀏覽器上面的語言（當然現在基於一些庫/框架已經遠不只是在瀏覽器上了），它可以操控瀏覽器，讓瀏覽器聽從我們 的命令。這有點像一個電視劇和遙控器，而javascript就是我們的遙控器。瀏覽器根據javascript的指令，做出相應的反饋。比如操作 DOM（也可以理解成為操作HTML），可以操作CSS。有了javascript就可以讓我更加靈活&動態的操控HTML,CSS.

嚴格來說、HTML和CSS還算不上真正的“語言”，而javascript卻是如假包換的指令碼型語言，既然是語言，那就會有字串，陣列，物件等等。而我們的javascript可以處理這些與資料有關的工作，比如給陣列排個序，去個重等等。

然而因為歷史原因，比如我們灰常“尊敬”的 IE 瀏覽器~出了一套自己的javascript標準，沒有和主流javascript標準相容啊！！作為一個前端er是不是應該把更多精力用在有意義的地方呢，而不是解決相容。。。

所以，似乎我們還需要一個利器，來讓我們更快速的開發~沒有錯，這就是我們的——jQuery！

第四個階段——jQuery

jQuery是一個相容多瀏覽器的 javascript庫，核心理念是write less,do more(寫得更少,做得更多)。jQuery在2006年1月由美華人 John Resig在紐約的barcamp釋出，吸引了來自世界各地的眾多JavaScript高手加入，由Dave Methvin率領團隊進行開 發。如今，jQuery已經成為最流行的javascript庫，在世界前10000個訪問最多的網站中，有超過55%在使用jQuery。

jQuery的優點我就不挨個說啦，一句話，jQuery是你更上一層樓的利器，也是我們前端er一大利器！

Web前端學習小建議

這裡跟大家扯一扯學習前端的小方法，是我自己的學習方法，大家湊合看看，倒也不一定對~

在寫css前，其實html的結構要是比較合理的，這樣寫css也會比較順手。在寫一個網頁之前，建議先琢磨幾分鐘，不要上來就寫。多去看看別人是怎麼寫的，然後結合自己的專案，心中有一個大致規劃。可以先把最外層輪廓寫好，先不著急去寫某一個具體的部分。

這裡給大家分享一些小技巧：

1、使用reset.css

火狐和IE這兩種不同的瀏覽器，在繪製CSS樣式方法上截然不同。這種情況下，使用reset.css重置所有的基本樣式會讓你得到一個全新的空樣式表。（可以去網上找一下，很多的）

2、CSS縮寫

CSS縮寫簡化了你的CSS程式碼，更重要的是，它讓你的程式碼更加整潔易懂。

不是像這樣建立CSS

.header {

background-color: #fff;

background-image: url(image.gif);

background-repeat: no-repeat;

background-position: top left;

}

而是像這樣建立CSS

.header {

background: #fff url(image.gif) no-repeat top left

}

3、理解class和id

這兩個選擇器總是讓初學者感到迷惑。在CSS中，Class和ID分別用點“.”和井號“#”來標識。簡單來說id就是用來標識那些單獨不重複的樣式，而class是可以重複使用的。

4、實用的<li>

<li>也叫連結列表，在與<ol>或<ul>正確搭配的時候非常好用，尤其是用在導航選單樣式上。

5、少用<table>多用<div>

CSS最大的優勢之 一是使用<div>達到樣式上的靈活多變。不同於<table>，<div>裡的內容不會 被鎖在單元 格<td>中。可以說幾乎所有的表格佈局都可以在<div>和樣式的正確使用下完成。當然，有大量表格內容時，還是 用 <table>吧。

6、CSS除錯工具

在設計CSS時，能夠得到頁面佈局的預覽對於最佳化CSS樣式和糾錯是很有幫助的。這裡有一些免費的CSS除錯工具推薦給你，你可以把它裝在瀏覽器上：比如FireFox Web Developer、DOM Inspector、Firebug等

7、!Important

所有被!important 標記的樣式，即使它後來被重寫，瀏覽器也只會採用被標記的那條。

.page {

background-color:blue !important;

background-color:red;

}

比如上面的例子，因為background-color:blue 被標記為!important ，即使後來有把背景改成紅色的語句，也只採用被標記的那條。!important 用來強制使一個樣式避免在之後的編碼中被修改，遺憾的是IE不支援。

牢記以上小技巧，也許你的css技能突然就起飛了呢？

關於javascript的一些小技巧，下次我再整理給大家~一次性看太多，大家是不是也有點暈？

學習前端需要方法，更需要一顆平常心，不要把前端想的多難，需要吃什麼苦。。。既然學習這麼痛苦，為什麼不快樂一點學呢？

怎麼入門學習web前端和提高，是一個困擾零基礎的新人的一個問題，畢竟，以前沒有接觸過，會覺得比較迷茫和無奈。

小朗建議想入門前端的朋友首先是要了解自己的真實需求，你是單純的對web前端有興趣，還是想轉行用於就業？

考慮清楚了以後就要做好吃苦的準備了，一般對於零基礎人員的學習方式是兩種，自學和找專業的培訓機構，自學是條寂寞、艱辛的路，對學習能力，自控能力，規劃力的要求都比較高，且時間漫長。而專業的培訓機構的優勢在於課程體系，有老師帶領傳授知識，且有實際操作，時間週期也不長，缺點在於金錢成本。所以建議根據自己的實際情況考慮。

　　Web前端的人才缺口大，發展前景好，就業形勢明朗。現在學習Web前端是非常好的選擇，想要邁入高薪職業，可以選擇專業的學習環境，為自己的未來多一個選擇的機會。想要脫穎而出就必須進行更深層次的學習並積累實戰經驗。

　　1、前端學習並不是想象的那麼簡單，也不是隨隨便便就可以學會高薪就業。想要從事Web前端開發行業就一定要有真本事，只有真正擁有了實力，才能在科技高速發展的今天擁有一席之位。

　　2、Web前端學習是一個先易後難的過程，如果你沒有很強的自制力，沒有專門的老師指導，在遇到問題時你就會很容易受挫，學習效率就會很低。

　　3、企業招聘中既重視理論知識又看重專案經驗。透過專業的學習，你可以掌握更貼近企業需求的技能，滿足多變的企業需求，還可以積累很多專案開發經驗。

　　如果你沒有什麼計算機基礎，幾乎是零基礎學習的話，專業報班系統的學習Web前端還是很不錯的，選對方法你可以快速掌握專業技能、輕鬆實現高薪就業。

想要轉行IT業，學web前端開發，但是零基礎無從下手怎麼辦？在想要學習web前端之前，首先我們要了解網站的開發大致分為前端和後端，而前端主要負責實現視覺和互動效果，以及與伺服器通訊，完成業務邏輯。因此，學習前端開發時上手快，頁面效果可以反饋你學習效果，學習前端時邊學邊練，不僅可以在實戰中找到成就感，還容易發現問題，然後再帶著問題回去系統學習，如此往復，相信能看到自己的進步。

如果你現在是0基礎學員，大致可以按如下思路開始學習：

前端開發基礎部分學習

學習HTML + CSS時，可以模仿一些網站做些頁面，在實踐中積累了一些經驗。Java 要學的內容實在很多，如果沒有其他程式語言的基礎的話，學起來可能要費些力，可以邊看書再配合影片學習；JS雖然是一門很繁雜的設計語言，但在實際運用當中，其重要性不言而喻。想要做好前端開發，js是必須攻破的難題。

前端開發進階部分學習

打好基礎後，可以開始普通的靜態網頁設計，不過對於複雜的頁面還需要進一步學習。比如css，盒子模型，流動，Block，inline，層疊，樣式優先順序。熟悉各項概念後，再透過css來完成標題，背景，圓角，導航條，table，表單等主題。

框架是前端開發中必須要掌握的內容，一般用jQuery，簡單易用，學習方法也很簡單，照著產品文件做幾個頁面就行了，不用面面俱到，以後遇到問題查文件就行了。框架可以幫你遮蔽瀏覽器的差異性，讓你能更專注與Web開發學習的精髓部分。

前端開發升級部分學習

有了以上知識，對於大多數小型網站，你應該已經可以寫出能夠工作的程式碼了。但要想成為更專業的前端，你還需繼續努力。更高的要求大概還有四方面：易維護（對於頁面你該理解‘樣式’，‘資料’，‘行為’三者分離，對應的當然就是CSS,HTML,js。對於js程式碼，你最好了解設計模式，重構，MVC等內容。）可測試；高效能；低流量（移動端）。

學習web前端大致就是以上三點思路，但想要將web前端開發真正做好，還是需要進行系統的培訓，特別是對於0基礎的轉行人士來說，可能會對專業術語摸不著頭腦。很多人會說網上有很多免費的教學影片，自學都可以，但是：如果網上的教學影片真的那麼管用，為何還會有這麼多的培訓機構出現？為何還有這麼人參加培訓機構。所以，任何一種學習方式都是因人而異的，但對於0基礎轉行人士來說，參加前端培訓課程可能是更好地選擇。

初學者要學習前端，有兩個方法，一是自學，二是培訓機構（比如黑馬等），如果你有其他語言基礎，建議自學，要是你什麼都不懂，想要快速工作，可以考慮培訓機構，不過個人建議自學為好，現在好多公司都不招培訓機構出來的。

學習前端流程：第一步：html+css，這是靜態頁面和樣式的學習，第二步：JavaScript，這使靜態頁面動態話，第三步：jquery，不能說成框架，只能是方法集合吧，第四步：react、vue、angular（個人推薦react）其中一個，之後去學習nodejs，然後java或者python或者go，沒事的時候去學習下演算法和資料結構，現在很多公司都面試演算法和資料結構，這個無論前端和後端