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

Web前端開發是從網頁製作演變而來的，名稱上有很明顯的時代特徵。在網際網路的演化程序中，網頁製作是Web1.0時代產物，那時網站的主要內容是靜態的，使用者使用網站的行為也以瀏覽為主。2005年以後，網際網路進入Web2.0時代，各種類似桌面軟體的Web應用大量湧現，網站的前端由此發生了翻天覆地的變化。網頁不再只是承載單一的文字和圖片，各種富媒體讓網頁的內容更加生動，網頁上軟體化的互動形式為使用者提供了更好的使用體驗，這些都是基於前端技術實現的。說得直白點就是美工photoshop，互動設計，flash，js，html+css。就小規模公司而言，一個技術員都得會這幾樣技能，這樣很鍛鍊人的，慢慢的你就會成為公司的主力。大規模的公司把這些分得很細，所以，你可以精通一門，熟悉其他的，進軍大公司。

我作為一個十幾年的前段架構師來說，前端最近幾年屬於蓬勃發展期，很多小夥伴都跑來學前端，但問題是，學蓬勃發展越表示，這是一個短期內根本不可能停止學習的職業。在我看來，前端行業短期內，每年都需要不間斷進行自己的技術更新和迭代。雖然我們一般公司不會更新那麼快，但，作為一個程式設計師，應該一直將自己擺在最前沿的位置。這樣，當企業，公司需要做架構更新或者框架更新，自己才能在其中脫穎而出。

所以，前端，終生學習。不要停

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

第二，在一名合格的前端工程師的知識結構中，網站效能最佳化、SEO和伺服器端的基礎知識也是必須掌握的。

第三，必須學會運用各種工具進行輔助開發。

第四，除了要掌握技術層面的知識，還要掌握理論層面的知識，包括程式碼的可維護性、元件的易用性、分層語義模板和瀏覽器分級支援，等等。

可見，看似簡單的網頁製作，如果要做得更好、更專業，真的是不簡單。這就是前端開發的特點，也是讓很多人困惑的原因。如此繁雜的知識體系讓新手學習起來無從下手，對於老手來說，也時常不知道下一步該學什麼。

程式碼質量是前端開發中應該重點考慮的問題之一。例如，實現一個網站介面可能會有無數種方案，但有些方案的維護成本會比較高，有些方案會存在效能問題，而有些方案則更易於維護，而且效能也比較好。這裡的關鍵影響因素就是程式碼質量。CSS、HTML、JavaScript這三種前端開發語言的特點是不同的，對程式碼質量的要求也不同，但它們之間又有著千絲萬縷的聯絡。

以找到一個工作為標準的話 學習週期大概兩個月，有天賦的可以更短。需要學習的知識其他回答已經說了，HTML，css，JS是肯定要熟悉的，我說一些深入一點的吧:首先，前端的特點是新語法，新框架，新外掛等層出不窮，那麼應該全部學習還是隻學一部分呢？我認為應該精通vue，瞭解angular與react，熟悉常用元件庫如ant，layerUI等，領悟設計模式，比如為什麼有時候單頁面模式更好。關心當前流行的網站或者小程式型別，哦對了，小程式必須會！hbuilderx封裝h5型別的app必須會，也就是uni-app必須會，國外的前端技術要了解。最關鍵的是，資料庫必須會，這個其實花不了多久時間就能學會，但是在面試的時候議價能力就大大提升了，會資料庫是指能用node.js或者PHP寫一點增刪改查，這樣一個人就能做小型專案！總之，前端設計到的知識點實在太多，千萬不要盲目去學習，要有目的有想法，圍繞身價去學習，畢竟開發語言是工具，程式設計師是執行者，提高身價就是為行業做貢獻的前提。

隨著5G技術的逐漸發展和成熟，未來大量的應用場景都需要前端進行呈現，所以未來前端開發將得到更多的重視。想要不被時代所淘汰，我們就需要不斷學習，不斷完善自己。未來相信所有的網站都會升級成HTML5網站，我們再也不用為了瀏覽網站去安裝各種各樣的外掛了，並且它的效果會更加的炫酷。

之前界限分明的前端開發和後端開發，未來開始模糊。從趨勢上來看，開發團隊的人員配備都在向前端傾斜，包括Android開發、iOS開發、PC端開發、小程式開發等，前端工程師承擔的角色不斷擴大。

另外，Javascript開始向嵌入式領域進軍，進一步促進了前端開發的普及化。與此同時，對安全，可靠等的要求越來越高，這都對前端開發提出更新和更嚴格的要求。雖然網頁設計是網站的外觀，但前端開發是將該設計的頁面透過程式碼的形式在網路上進行展現，並加入一些功能特效 !使之具有一定的互動性!前端Web開發人員透過HTML，CSS和JavaScript等編碼語言實現Web設計的人。

雖然它不再那麼常見，但是前端開發人員有時被稱為“客戶端開發人員”，以區別於後端開發人員，後端是對資料庫等幕後工作進行程式設計。如果您前往任何站點，您可以在導航，佈局中檢視前端開發人員的工作，甚至可以看到PC頁面與手機頁面不同的展現方式。

前端Web開發人員使用三種主要編碼語言來編寫由Web設計人員建立的網站和Web應用程式設計：HTML、CSS、JavaScript，當然在整個HTML5前端技術的學習中，要全面掌握頁面相容性和最佳化，學習最佳化前端體驗和頁面響應速度，最佳化程式碼並保持良好相容性，提升Web介面的友好和易用。這樣你未來的路才會更長。

前端的發展也很多，比如往開發、產品方向轉等，都說不要盲目入這個行業，一定要想清楚自己適不適合這個行業，能不能吃苦。程式設計不是表面那麼簡單的。

當然在整個HTML5前端技術的學習中，要全面掌握頁面相容性和最佳化，學習最佳化前端體驗和頁面響應速度，最佳化程式碼並保持良好相容性，提升Web介面的友好和易用。這樣你未來的路才會更長。

在掌握基礎模組的基礎上，Web前端工程師還必須進一步將技能層次化、系統化，從而能夠視線頁面架構、移動頁面開發等等任務。

不僅新人小白需要努力，就連已經入職0~3年的前端開發工程師，也需要不斷學習瞭解前端高階知識和技能，不斷修煉自身武功。

如果你想從事前端開發方面的工作。嗯，我認為要學的東西主要包括htmlCss樣式，JavaScript 還有學一些前端框架，比如vue ElementUI H5頁面開發 嗯還有node.js嗯，另外在學一些電腦方面的知識，比如伺服器知識，網路知識，這些也是有必要的，還有開發工具也要學一學怎麼用。

前端最近幾年屬於蓬勃發展期，很多小夥伴都跑來學前端

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

▪ HTML+CSS:HTML進階、 CSS進階、DIV+CSS佈局、HTML+CSS整站開發、▪ JavaScript基礎：Js基礎教程、js內建物件常用方法、常見DOM樹操作大全、ECMAscript、DOM、BOM、定時器和焦點圖。▪ JS基本特效：常見特效、例如：tab、導航、整頁滾動、輪播圖、JS製作幻燈片、彈出層、手風琴選單、瀑布流佈局、滾動事件、滾差檢視。▪ JS高階特徵：正則表示式、排序演算法、遞迴演算法、閉包、函式節流、作用域鏈、基於距離運動框架、面向物件基礎、▪ JQuery：基礎使用懸著器、DOM操作、特效和動畫、方法鏈、拖拽、變形、JQueryUI元件基本使用。

<2>第二階段：HTML5和移動Web開發

▪ HTML5：HTML5新語義標籤、HTML5表單、音訊和影片、離線和本地儲存、SVG、Web Socket、Canvas.▪ CSS3:CSS3新選擇器、偽元素、臉色表示法、邊框、陰影、flex佈局、background系列屬性改變、Transition、動畫、景深和深透、3D效果製作、Velocity.js框架、元素進場、出場策略、炫酷CSS3網頁製作。▪ Bootstrap:響應式概念、媒體查詢、響應式網站製作、刪格系統、刪格系統原理、Bootstrap常用模板、LESS和SASS。▪ 移動Web開發：跨終端WEB和主流裝置簡介、視口、流式佈局、彈性盒子、rem、移動終端JavaScript事件、手機中常見JS效果製作、手機聚划算頁面、手機滾屏。

<3>第三階段：HTTP服務和AJAX程式設計

▪ WEB伺服器基礎：伺服器基礎知識、Apache伺服器和其他WEB伺服器介紹、Apache伺服器搭建、HTTP介紹。▪ AJAX上篇：Ajax簡介和非同步的概念、Ajax框架的封裝、XMLHttpRequest物件詳細介紹方法、相容性處理方法、Ajax框架的封裝、Ajax中快取問題、XML介紹和使用、會處理簡單的GET或者POST請求、▪ AJAX下篇：JSON和JSON解析、資料繫結和模板技術、JSONP、跨域技術、圖片預讀取和lazy-load技術、JQuery框架中的AjaxAPI、使用Ajax實現爆布流案例額。

<4>第四階段：面向物件進階

▪ 面向物件終極篇：從記憶體角度到理解JS面向物件、基本型別、複雜型別、原型鏈、ES6中的面向物件、ES6中變數的作用域（let ，const(宣告變數只讀)，塊級作用域），ES6中函式新特性。▪ 面向物件三大特徵：繼承性、多型性、封裝性。▪ 面向物件中建立物件的五種方法：自定義物件 、工廠模式建立物件、建構函式、 混合模式創造物件、JSO格式建立物件。

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

▪ 框架封裝基礎：事件流、冒泡、捕獲、事件物件、事件框架、選擇框架。▪ 框架封裝中級：運動原理、單物體運動框架、多物體運動框架、運動框架面向物件封裝。▪ 框架封裝高階和補充：JQuery框架雛形、可擴充套件性、模組化、封裝屬於傳智自己的框架。

<6>第六階段：模組化元件開發

▪ 面向元件程式設計：面向元件程式設計的方式、面向元件程式設計的實現原理、面向元件程式設計實戰、基於元件化思想開發網站應用程式。▪ 面向模組程式設計：AMD設計規範、CMD設計規範、RequireJS，LoadJS、淘寶的SeaJS。

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

▪ Web開發工作流：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全棧開發：

▪ 快速入門：Node.js發展、生態圈、Io.js、Linux/Windows/OS X環境配置、REPL環境和控制檯程式、非同步程式設計，非阻塞I/O、模組概念，模組管理工具、開發流程，除錯，測試。▪ 核心模組和物件：全域性物件global，process，console，util、事件驅動，事件發射器、加密解密，路徑操作，序列化和反序列化、檔案流操作、HTTP服務端與客戶端、http://Socket.IO。▪ Web開發基礎：HTTP協議，請求響應處理過程、關係型資料庫操作和資料訪問、非關係型資料庫操作和資料訪問、原生的Node.js開發Web應用程式、Web開發工作流、Node.js開發Blog案例。▪ 快速開發框架：Express簡介+MVC簡介、Express常用API、Express路由模組、Jade/Ejs模板引擎、使用Express重構Blog案例、Koa等其他常見MVC框架。▪ Node.js開發電子商務實戰：需求與設計、賬戶模組註冊登入、會員中心模組、前臺展示模組、購物車，訂單結算、線上客服即時通訊模組。

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

就像我們去商場買衣服，問買衣服需要多少錢這樣的問題很傻，只有在我們選擇好款式之後，特定的問某一件衣服的價格，才能得到滿意的答案。IT行業也是如此，IT是一個類，其中包括各式各樣的專業，如果想要了解學費我們則需要特定的指出具體的專業，才能瞭解到確切的學費。

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