第一，必須掌握基本的Web前端開發(fā)技術(shù)，其中包括：CSS、HTML、DOM、BOM、Ajax、JavaScript等，在掌握這些技術(shù)的同時(shí)，還要清楚地了解它們?cè)诓煌瑸g覽器上的兼容情況、渲染原理和存在的Bug。

第二，在一名合格的前端工程師的知識(shí)結(jié)構(gòu)中，網(wǎng)站性能優(yōu)化、SEO和服務(wù)器端的基礎(chǔ)知識(shí)也是必須掌握的。

第三，必須學(xué)會(huì)運(yùn)用各種工具進(jìn)行輔助開發(fā)。

第四，除了要掌握技術(shù)層面的知識(shí)，還要掌握理論層面的知識(shí)，包括代碼的可維護(hù)性、組件的易用性、分層語(yǔ)義模板和瀏覽器分級(jí)支持，等等。

可見，看似簡(jiǎn)單的網(wǎng)頁(yè)制作，如果要做得更好、更專業(yè)，真的是不簡(jiǎn)單。這就是前端開發(fā)的特點(diǎn)，也是讓很多人困惑的原因。如此繁雜的知識(shí)體系讓新手學(xué)習(xí)起來(lái)無(wú)從下手，對(duì)于老手來(lái)說，也時(shí)常不知道下一步該學(xué)什么。

代碼質(zhì)量是前端開發(fā)中應(yīng)該重點(diǎn)考慮的問題之一。例如，實(shí)現(xiàn)一個(gè)網(wǎng)站界面可能會(huì)有無(wú)數(shù)種方案，但有些方案的維護(hù)成本會(huì)比較高，有些方案會(huì)存在性能問題，而有些方案則更易于維護(hù)，而且性能也比較好。這里的關(guān)鍵影響因素就是代碼質(zhì)量。CSS、HTML、JavaScript這三種前端開發(fā)語(yǔ)言的特點(diǎn)是不同的，對(duì)代碼質(zhì)量的要求也不同，但它們之間又有著千絲萬(wàn)縷的聯(lián)系。

我作為一個(gè)十幾年的前段架構(gòu)師來(lái)說，前端最近幾年屬于蓬勃發(fā)展期，很多小伙伴都跑來(lái)學(xué)前端，但問題是，學(xué)蓬勃發(fā)展越表示，這是一個(gè)短期內(nèi)根本不可能停止學(xué)習(xí)的職業(yè)。在我看來(lái)，前端行業(yè)短期內(nèi)，每年都需要不間斷進(jìn)行自己的技術(shù)更新和迭代。雖然我們一般公司不會(huì)更新那么快，但，作為一個(gè)程序員，應(yīng)該一直將自己擺在最前沿的位置。這樣，當(dāng)企業(yè)，公司需要做架構(gòu)更新或者框架更新，自己才能在其中脫穎而出。

所以，前端，終生學(xué)習(xí)。不要停

前端最近幾年屬于蓬勃發(fā)展期，很多小伙伴都跑來(lái)學(xué)前端

前端都需要學(xué)什么（可以分為八個(gè)階段）？
<1>第一階段：

? HTML+CSS:
HTML進(jìn)階、 CSS進(jìn)階、DIV+CSS布局、HTML+CSS整站開發(fā)、
? JavaScript基礎(chǔ)：
Js基礎(chǔ)教程、js內(nèi)置對(duì)象常用方法、常見DOM樹操作大全、ECMAscript、DOM、BOM、定時(shí)器和焦點(diǎn)圖。
? JS基本特效：
常見特效、例如：tab、導(dǎo)航、整頁(yè)滾動(dòng)、輪播圖、JS制作幻燈片、彈出層、手風(fēng)琴菜單、瀑布流布局、滾動(dòng)事件、滾差視圖。
? JS高級(jí)特征：
正則表達(dá)式、排序算法、遞歸算法、閉包、函數(shù)節(jié)流、作用域鏈、基于距離運(yùn)動(dòng)框架、面向?qū)ο蠡A(chǔ)、
? JQuery：基礎(chǔ)使用
懸著器、DOM操作、特效和動(dòng)畫、方法鏈、拖拽、變形、JQueryUI組件基本使用。

<2>第二階段：HTML5和移動(dòng)Web開發(fā)

? HTML5：
HTML5新語(yǔ)義標(biāo)簽、HTML5表單、音頻和視頻、離線和本地存儲(chǔ)、SVG、Web Socket、Canvas.
? CSS3:
CSS3新選擇器、偽元素、臉色表示法、邊框、陰影、flex布局、background系列屬性改變、Transition、動(dòng)畫、景深和深透、3D效果制作、Velocity.js框架、元素進(jìn)場(chǎng)、出場(chǎng)策略、炫酷CSS3網(wǎng)頁(yè)制作。
? Bootstrap:
響應(yīng)式概念、媒體查詢、響應(yīng)式網(wǎng)站制作、刪格系統(tǒng)、刪格系統(tǒng)原理、Bootstrap常用模板、LESS和SASS。
? 移動(dòng)Web開發(fā)：
跨終端WEB和主流設(shè)備簡(jiǎn)介、視口、流式布局、彈性盒子、rem、移動(dòng)終端JavaScript事件、手機(jī)中常見JS效果制作、手機(jī)聚劃算頁(yè)面、手機(jī)滾屏。

<3>第三階段：HTTP服務(wù)和AJAX編程

? WEB服務(wù)器基礎(chǔ)：
服務(wù)器基礎(chǔ)知識(shí)、Apache服務(wù)器和其他WEB服務(wù)器介紹、Apache服務(wù)器搭建、HTTP介紹。
? AJAX上篇：
Ajax簡(jiǎn)介和異步的概念、Ajax框架的封裝、XMLHttpRequest對(duì)象詳細(xì)介紹方法、兼容性處理方法、Ajax框架的封裝、Ajax中緩存問題、XML介紹和使用、會(huì)處理簡(jiǎn)單的GET或者POST請(qǐng)求、
? AJAX下篇：
JSON和JSON解析、數(shù)據(jù)綁定和模板技術(shù)、JSONP、跨域技術(shù)、圖片預(yù)讀取和lazy-load技術(shù)、JQuery框架中的AjaxAPI、使用Ajax實(shí)現(xiàn)爆布流案例額。

<4>第四階段：面向?qū)ο筮M(jìn)階

? 面向?qū)ο蠼K極篇：
從內(nèi)存角度到理解JS面向?qū)ο?、基本類型、?fù)雜類型、原型鏈、ES6中的面向?qū)ο?、ES6中變量的作用域（let ，const(聲明變量只讀)，塊級(jí)作用域），ES6中函數(shù)新特性。
? 面向?qū)ο笕筇卣鳎?br/>繼承性、多態(tài)性、封裝性。
? 面向?qū)ο笾袆?chuàng)建對(duì)象的五種方法：
自定義對(duì)象 、工廠模式創(chuàng)建對(duì)象、構(gòu)造函數(shù)、 混合模式創(chuàng)造對(duì)象、JSO格式創(chuàng)建對(duì)象。

<5>第五階段：封裝一個(gè)屬于自己的框架

? 框架封裝基礎(chǔ)：
事件流、冒泡、捕獲、事件對(duì)象、事件框架、選擇框架。
? 框架封裝中級(jí)：
運(yùn)動(dòng)原理、單物體運(yùn)動(dòng)框架、多物體運(yùn)動(dòng)框架、運(yùn)動(dòng)框架面向?qū)ο蠓庋b。
? 框架封裝高級(jí)和補(bǔ)充：
JQuery框架雛形、可擴(kuò)展性、模塊化、封裝屬于傳智自己的框架。

<6>第六階段：模塊化組件開發(fā)

? 面向組件編程：
面向組件編程的方式、面向組件編程的實(shí)現(xiàn)原理、面向組件編程實(shí)戰(zhàn)、基于組件化思想開發(fā)網(wǎng)站應(yīng)用程序。
? 面向模塊編程：
AMD設(shè)計(jì)規(guī)范、CMD設(shè)計(jì)規(guī)范、RequireJS，LoadJS、淘寶的SeaJS。

<7>第七階段：主流的流行框架

? Web開發(fā)工作流：
GIT/SVN、Vue-cli腳手架、NPM/Bower依賴管理工具、Grunt/Gulp/Webpack。
? 前端主流框架：
Vue.js、Angular.js、React.JS、Bootstrap。
? 常用庫(kù)：
React.js、Vue.js、JQuery.js。

<8>第八階段:Node.js全棧開發(fā)：

? 快速入門：Node.js發(fā)展、生態(tài)圈、Io.js、Linux/Windows/OS X環(huán)境配置、REPL環(huán)境和控制臺(tái)程序、異步編程，非阻塞I/O、模塊概念，模塊管理工具、開發(fā)流程，調(diào)試，測(cè)試。? 核心模塊和對(duì)象：全局對(duì)象global，process，console，util、事件驅(qū)動(dòng)，事件發(fā)射器、加密解密，路徑操作，序列化和反序列化、文件流操作、HTTP服務(wù)端與客戶端、http://Socket.IO。? Web開發(fā)基礎(chǔ)：HTTP協(xié)議，請(qǐng)求響應(yīng)處理過程、關(guān)系型數(shù)據(jù)庫(kù)操作和數(shù)據(jù)訪問、非關(guān)系型數(shù)據(jù)庫(kù)操作和數(shù)據(jù)訪問、原生的Node.js開發(fā)Web應(yīng)用程序、Web開發(fā)工作流、Node.js開發(fā)Blog案例。? 快速開發(fā)框架：Express簡(jiǎn)介+MVC簡(jiǎn)介、Express常用API、Express路由模塊、Jade/Ejs模板引擎、使用Express重構(gòu)Blog案例、Koa等其他常見MVC框架。? Node.js開發(fā)電子商務(wù)實(shí)戰(zhàn)：需求與設(shè)計(jì)、賬戶模塊注冊(cè)登錄、會(huì)員中心模塊、前臺(tái)展示模塊、購(gòu)物車，訂單結(jié)算、在線客服即時(shí)通訊模塊。

第一：理清Web前端的知識(shí)結(jié)構(gòu)。要想高效學(xué)習(xí)Web前端知識(shí)，首先應(yīng)該搞清楚Web前端都包括哪些技術(shù)結(jié)構(gòu)。Web前端開發(fā)雖然技術(shù)難度并不高，但是技術(shù)細(xì)節(jié)卻比較多，內(nèi)容也比較雜。Web前端的基礎(chǔ)包括三大部分，包括Html、CSS和JavaScript，其中JavaScript是學(xué)習(xí)的重點(diǎn)，也是難點(diǎn)。另外，vue等框架也是需要熟練掌握的。

第二：緊跟技術(shù)發(fā)展趨勢(shì)。目前Web前端的技術(shù)發(fā)展趨勢(shì)有三個(gè)，其一是前端開發(fā)數(shù)據(jù)化;其二是前端開發(fā)高效化;其三是前端開發(fā)全?；?。前端開發(fā)數(shù)據(jù)化主要是大數(shù)據(jù)發(fā)展的影響，在大數(shù)據(jù)的推動(dòng)下，Web前端逐漸涉及到了大量的數(shù)據(jù)展示任務(wù)。前端開發(fā)高效化主要體現(xiàn)在Web前端正在進(jìn)行獨(dú)立部署，前端與后端的溝通主要通過資源接口的方式來(lái)進(jìn)行。前端開發(fā)全?；彩且粋€(gè)比較明顯的趨勢(shì)，比如Nodejs的應(yīng)用。

第三：注重動(dòng)手實(shí)踐能力的培養(yǎng)。學(xué)習(xí)前端開發(fā)一定要注重動(dòng)手實(shí)踐能力的培養(yǎng)，因?yàn)榍岸碎_發(fā)的細(xì)節(jié)比較多，所以只有多操作才能逐漸熟悉。前端開發(fā)目前被稱為“大前端”，整個(gè)前端開發(fā)也被賦予了更多的含義，包括Web前端開發(fā)、移動(dòng)端開發(fā)、大數(shù)據(jù)呈現(xiàn)端開發(fā)以及部分后端開發(fā)任務(wù)等等。所以，想要在前端行業(yè)中走的更遠(yuǎn)，一定要注重知識(shí)結(jié)構(gòu)的豐富性。

1、html + css

理解css每個(gè)元素的屬性，樣式的實(shí)現(xiàn)不一定只有一種寫法，多想一想還有沒有什么需要改進(jìn)的地方。

2、JavaScript

不是所有的網(wǎng)頁(yè)都必須有js，但是要想實(shí)現(xiàn)一些超酷的功能和界面的時(shí)候，就需要涉及到j(luò)s。如果沒有其他編程語(yǔ)言的基礎(chǔ)的話，學(xué)起來(lái)可能要費(fèi)些力，還是建議在網(wǎng)上找一些資源自學(xué)一下。Web前端需要學(xué)習(xí)那些知識(shí)?

3、Photoshop、flash

熟悉會(huì)一點(diǎn)兒就行了，沒必要全部都學(xué)得精通，當(dāng)然如果你在學(xué)習(xí)的過程中，發(fā)現(xiàn)你ps或者flash比較感興趣的話，也可以嘗試做美工這一行。 　　4、html5和css3

可以先了解一下，然后再入手。畢竟IE的瀏覽器大多還不支持。

5、瀏覽器兼容

Web前端需要學(xué)習(xí)那些知識(shí)?懂web標(biāo)準(zhǔn)，熟練手寫 xhtml css3 并符合。

符合w3c標(biāo)準(zhǔn)。代碼能兼容主流瀏覽器Firfox，Chrome、Safari、IE、Opera。雖然IE6很多都不兼容，但現(xiàn)在還使用的人還是有的。

6、熟悉一門后臺(tái)編程語(yǔ)言 asp、php、jsp等

PS：有條件的話還是建議系統(tǒng)學(xué)習(xí)下，可以了解下U就業(yè)。

【此回答轉(zhuǎn)自樂字節(jié)】

首先，計(jì)算機(jī)IT是一個(gè)非常大的概念，其中包含了很多不同的方向和專業(yè)，因此需要花費(fèi)的時(shí)間和學(xué)費(fèi)都是有所區(qū)別的。

就像我們?nèi)ド虉?chǎng)買衣服，問買衣服需要多少錢這樣的問題很傻，只有在我們選擇好款式之后，特定的問某一件衣服的價(jià)格，才能得到滿意的答案。IT行業(yè)也是如此，IT是一個(gè)類，其中包括各式各樣的專業(yè)，如果想要了解學(xué)費(fèi)我們則需要特定的指出具體的專業(yè)，才能了解到確切的學(xué)費(fèi)。

同理，學(xué)習(xí)時(shí)長(zhǎng)則也是不能一概而論的，學(xué)員的年齡、學(xué)歷不同因此學(xué)習(xí)時(shí)長(zhǎng)也不同

學(xué)多久，這個(gè)沒辦法說，畢竟每個(gè)人接受知識(shí)的速度是不一樣的，最基本的有HTML+CSS+javaScript這是最基本的基礎(chǔ)知識(shí)，然后就可以學(xué)一下主流框架了比如 JQuery VUE