如果你想從事前端開發(fā)方面的工作。嗯，我認(rèn)為要學(xué)的東西主要包括htmlCss樣式，JavaScript 還有學(xué)一些前端框架，比如vue ElementUI H5頁面開發(fā) 嗯還有node.js嗯，另外在學(xué)一些電腦方面的知識，比如服務(wù)器知識，網(wǎng)絡(luò)知識，這些也是有必要的，還有開發(fā)工具也要學(xué)一學(xué)怎么用。

以找到一個工作為標(biāo)準(zhǔn)的話 學(xué)習(xí)周期大概兩個月，有天賦的可以更短。需要學(xué)習(xí)的知識其他回答已經(jīng)說了，HTML，css，JS是肯定要熟悉的，我說一些深入一點的吧:首先，前端的特點是新語法，新框架，新插件等層出不窮，那么應(yīng)該全部學(xué)習(xí)還是只學(xué)一部分呢？我認(rèn)為應(yīng)該精通vue，了解angular與react，熟悉常用組件庫如ant，layerUI等，領(lǐng)悟設(shè)計模式，比如為什么有時候單頁面模式更好。關(guān)心當(dāng)前流行的網(wǎng)站或者小程序類型，哦對了，小程序必須會！hbuilderx封裝h5類型的app必須會，也就是uni-app必須會，國外的前端技術(shù)要了解。最關(guān)鍵的是，數(shù)據(jù)庫必須會，這個其實花不了多久時間就能學(xué)會，但是在面試的時候議價能力就大大提升了，會數(shù)據(jù)庫是指能用node.js或者PHP寫一點增刪改查，這樣一個人就能做小型項目！總之，前端設(shè)計到的知識點實在太多，千萬不要盲目去學(xué)習(xí)，要有目的有想法，圍繞身價去學(xué)習(xí)，畢竟開發(fā)語言是工具，程序員是執(zhí)行者，提高身價就是為行業(yè)做貢獻(xiàn)的前提。

技術(shù)一直在更新迭代，所以學(xué)習(xí)是沒有終點的。作為一名合格的開發(fā)者，在掌握基礎(chǔ)技能的同時，需要一直保持對前沿技術(shù)的關(guān)注、學(xué)習(xí)并實踐。

從當(dāng)下看前端，前端也是一個大的領(lǐng)域，有多種細(xì)分，比如：PC端、移動端、小程序、游戲開發(fā)等。不同領(lǐng)域?qū)?yīng)的技術(shù)棧也有所不同，但所需的基礎(chǔ)知識是相同的（HTML、CSS、JS）。

【學(xué)習(xí)步驟】

第一階段：入門

先掌握HTML、CSS、JS。學(xué)習(xí)的順序最好也是，先HTML，后CSS，最后JS（重點，而且非常重要）。

第二階段：企業(yè)實戰(zhàn)

開發(fā)框架：國內(nèi)現(xiàn)在最流行的主開發(fā)框架是Vue和React；Vue上手相對比較容易，可以先上手試試。

第三階段：性能調(diào)優(yōu)

掌握Performance性能調(diào)優(yōu)工具、理解JS垃圾回收機(jī)制。

第四階段：編程思想、設(shè)計模式

企業(yè)中一般只要做到第一、二階段即可勝任初級前端工程師，認(rèn)真學(xué)習(xí)兩個月的時間足以。

【細(xì)分領(lǐng)域】

移動端：flex布局、一套Vue/React的移動端UI框架。

小程序：小程序原生開發(fā)（必須要會，即使用跨平臺框架開發(fā)，原生開發(fā)也一定要會）、uni-app。

游戲開發(fā)：Egret游戲引擎、數(shù)學(xué)幾何。

圖像處理：PIXIJs、FabricJs、ThreeJs等圖形渲染框架。

當(dāng)然前端開發(fā)不能僅著眼于前端，還需要對后端知識有一定的了解，對后端開發(fā)語言至少要熟悉一個（NodeJS、PHP、Java、Golang、Python）。不僅讓面試中多了加分項，更能讓我們在更高的角度理解開發(fā)這件事。當(dāng)然也會讓我們在團(tuán)隊協(xié)作中更加得心應(yīng)手。

【學(xué)習(xí)方法】

1、入門學(xué)習(xí)推薦視頻為先，一般視頻教程都能通俗易懂，講得都很透徹，會越學(xué)越有信心。有官方技術(shù)文檔的，可在視頻后過一遍；

2、進(jìn)一步提升，可以多看看優(yōu)質(zhì)作品。github上多找一些優(yōu)質(zhì)的項目，學(xué)學(xué)人家的代碼是怎么寫的，多看會受益頗多。

3、對于想急于找工作的同學(xué)，可以先到各大招聘平臺上，了解下目前大廠（或意向企業(yè)）對于前端的技能要求，然后針對性的學(xué)習(xí)。如果時間充足，還是建議系統(tǒng)性的學(xué)習(xí)一下。

4、視頻教學(xué)資源推薦B站，有很多優(yōu)質(zhì)的教學(xué)資源和講師。我也一直在B站上學(xué)習(xí)，發(fā)現(xiàn)了B站是我人生中的重大事件，讓我以更好的方式接觸到了更多的事物！想當(dāng)年我們在學(xué)習(xí)前端的那會兒，只能天天泡在圖書館。

注意：JS原生開發(fā)能力很重要?。?！

開發(fā)框架可以提升效率，但萬不可認(rèn)為只要有框架就足以。扎實的基礎(chǔ)很重要，它可以讓我們做得更多，走得更遠(yuǎn)。

【最后說點啥】

做自己想做的事，希望所有人都能一直堅持下去，早日實現(xiàn)自己的小目標(biāo)！

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

? Web開發(fā)工作流：
GIT/SVN、Vue-cli腳手架、NPM/Bower依賴管理工具、Grunt/Gulp/Webpack。
? 前端主流框架：
Vue.js、Angular.js、React.JS、Bootstrap。
? 常用庫：
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)境和控制臺程序、異步編程，非阻塞I/O、模塊概念，模塊管理工具、開發(fā)流程，調(diào)試，測試。? 核心模塊和對象：全局對象global，process，console，util、事件驅(qū)動，事件發(fā)射器、加密解密，路徑操作，序列化和反序列化、文件流操作、HTTP服務(wù)端與客戶端、http://Socket.IO。? Web開發(fā)基礎(chǔ)：HTTP協(xié)議，請求響應(yīng)處理過程、關(guān)系型數(shù)據(jù)庫操作和數(shù)據(jù)訪問、非關(guān)系型數(shù)據(jù)庫操作和數(shù)據(jù)訪問、原生的Node.js開發(fā)Web應(yīng)用程序、Web開發(fā)工作流、Node.js開發(fā)Blog案例。? 快速開發(fā)框架：Express簡介+MVC簡介、Express常用API、Express路由模塊、Jade/Ejs模板引擎、使用Express重構(gòu)Blog案例、Koa等其他常見MVC框架。? Node.js開發(fā)電子商務(wù)實戰(zhàn)：需求與設(shè)計、賬戶模塊注冊登錄、會員中心模塊、前臺展示模塊、購物車，訂單結(jié)算、在線客服即時通訊模塊。

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

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

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

1、html + css

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

2、JavaScript

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

3、Photoshop、flash

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

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

5、瀏覽器兼容

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

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

6、熟悉一門后臺編程語言 asp、php、jsp等

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

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

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

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

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

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