前端即網(wǎng)站前臺(tái)部分，也叫前端開(kāi)發(fā)，運(yùn)行在PC端，移動(dòng)端等瀏覽器上展現(xiàn)給用戶瀏覽的網(wǎng)頁(yè)。那么前端開(kāi)發(fā)需要學(xué)習(xí)什么呢？

前端開(kāi)發(fā)需要學(xué)什么

第一階段：

1、HTML+CSS:

HTML進(jìn)階、 CSS進(jìn)階、DIV+CSS布局、HTML+CSS整站開(kāi)發(fā)、

2、JavaScript基礎(chǔ)：

Js基礎(chǔ)教程、js內(nèi)置對(duì)象常用方法、常見(jiàn)DOM樹(shù)操作大全、ECMAscript、DOM、BOM、定時(shí)器和焦點(diǎn)圖。

JS基本特效：

常見(jiàn)特效、例如：tab、導(dǎo)航、整頁(yè)滾動(dòng)、輪播圖、JS制作幻燈片、彈出層、手風(fēng)琴菜單、瀑布流布局、滾動(dòng)事件、滾差視圖。

JS高級(jí)特征：

正則表達(dá)式、排序算法、遞歸算法、閉包、函數(shù)節(jié)流、作用域鏈、基于距離運(yùn)動(dòng)框架、面向?qū)ο蠡A(chǔ)、

3、JQuery：基礎(chǔ)使用

懸著器、DOM操作、特效和動(dòng)畫、方法鏈、拖拽、變形、JQueryUI組件基本使用。

第二階段：HTML5和移動(dòng)Web開(kāi)發(fā)

1、HTML5：

HTML5新語(yǔ)義標(biāo)簽、HTML5表單、音頻和視頻、離線和本地存儲(chǔ)、SVG、Web Socket、Canvas.

2、CSS3:

CSS3新選擇器、偽元素、臉色表示法、邊框、陰影、flex布局、background系列屬性改變、Transition、動(dòng)畫、景深和深透、3D效果制作、Velocity.js框架、元素進(jìn)場(chǎng)、出場(chǎng)策略、炫酷CSS3網(wǎng)頁(yè)制作。

3、Bootstrap:

響應(yīng)式概念、媒體查詢、響應(yīng)式網(wǎng)站制作、刪格系統(tǒng)、刪格系統(tǒng)原理、Bootstrap常用模板、LESS和SASS。

4、移動(dòng)Web開(kāi)發(fā)：

跨終端WEB和主流設(shè)備簡(jiǎn)介、視口、流式布局、彈性盒子、rem、移動(dòng)終端JavaScript事件、手機(jī)中常見(jiàn)JS效果制作、手機(jī)聚劃算頁(yè)面、手機(jī)滾屏。

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

5、WEB服務(wù)器基礎(chǔ)：

服務(wù)器基礎(chǔ)知識(shí)、Apache服務(wù)器和其他WEB服務(wù)器介紹、Apache服務(wù)器搭建、HTTP介紹。

AJAX：

Ajax簡(jiǎn)介和異步的概念、Ajax框架的封裝、XMLHttpRequest對(duì)象詳細(xì)介紹方法、兼容性處理方法、Ajax框架的封裝、Ajax中緩存問(wèn)題、XML介紹和使用、會(huì)處理簡(jiǎn)單的GET或者POST請(qǐng)求、

JSON和JSON解析、數(shù)據(jù)綁定和模板技術(shù)、JSONP、跨域技術(shù)、圖片預(yù)讀取和lazy-load技術(shù)、JQuery框架中的AjaxAPI、使用Ajax實(shí)現(xiàn)爆布流案例額。

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

從內(nèi)存角度到理解JS面向?qū)ο?、基本類型、?fù)雜類型、原型鏈、ES6中的面向?qū)ο蟆S6中變量的作用域（let ，const(聲明變量只讀)，塊級(jí)作用域），ES6中函數(shù)新特性。

前端開(kāi)發(fā)趨勢(shì)

趨勢(shì)一：重大轉(zhuǎn)變移動(dòng)優(yōu)先

響應(yīng)式設(shè)計(jì)顯然是目前web前端開(kāi)發(fā)領(lǐng)域的主要趨勢(shì)之一，響應(yīng)式網(wǎng)站設(shè)計(jì)是一種網(wǎng)絡(luò)頁(yè)面設(shè)計(jì)布局，其理念是：集中創(chuàng)建頁(yè)面的圖片排版大小，可以智能地根據(jù)用戶行為以及使用的設(shè)備環(huán)境進(jìn)行相對(duì)應(yīng)的布局。

趨勢(shì)二：使用高效率開(kāi)發(fā)工具

眾多web前端開(kāi)發(fā)者從2016年開(kāi)始嘗試使用快速原型開(kāi)發(fā)工具，將是這種技術(shù)真正爆發(fā)的一年?！癠Xpin、Webflow、Invision以及其它許多快速原型開(kāi)發(fā)工具，讓設(shè)計(jì)師不用寫一行代碼，就能為網(wǎng)站和服務(wù)快速創(chuàng)建低保真和高保真原型，便于設(shè)計(jì)師衡量它們的可用性和美觀性?！?web設(shè)計(jì)師Jamie Leeson says如是說(shuō)，“許多工具也允許你在瀏覽器中設(shè)計(jì)原型并從工具里真正啟動(dòng)網(wǎng)站自身?！?/p>

趨勢(shì)三：人工智能高速發(fā)展

web與AI碰撞，帶來(lái)更強(qiáng)大的網(wǎng)頁(yè)，為網(wǎng)站主和用戶同時(shí)帶來(lái)價(jià)值。提供網(wǎng)絡(luò)主機(jī)服務(wù)的 Wix，是這一領(lǐng)域的領(lǐng)頭羊。他們現(xiàn)在提供了一個(gè)過(guò)程來(lái)詢問(wèn)用戶一些問(wèn)題，然后使用一個(gè)基于 AI的平臺(tái)，根據(jù)用戶的回答提供給用戶最符合他們需求的 web設(shè)計(jì)。

趨勢(shì)四：?jiǎn)雾?yè)站點(diǎn)多級(jí)應(yīng)用

由于用戶更喜歡用滾屏方式瀏覽網(wǎng)頁(yè)，各公司將會(huì)引起重視并停止浪費(fèi)時(shí)間在設(shè)計(jì)和開(kāi)發(fā)用戶不喜歡的層層相套的子頁(yè)面上。這一趨勢(shì)將簡(jiǎn)化互聯(lián)網(wǎng)并帶來(lái)更迷人和身臨其境的網(wǎng)頁(yè)瀏覽體驗(yàn)，每個(gè)人都會(huì)感覺(jué)到愉悅。

趨勢(shì)五：流行的虛擬現(xiàn)實(shí)

VR成為主流的一年，這也就意味著web開(kāi)發(fā)者將通過(guò)VR來(lái)吸引用戶，我們已經(jīng)看到一些公司比如 Mozilla和 Google投資開(kāi)發(fā) VR與 Web之間的 API。越來(lái)越多的 VR應(yīng)用程序?qū)⑾嗬^問(wèn)世，所以如果看到越來(lái)越多的虛擬現(xiàn)實(shí)元素出現(xiàn)在 Web上，也別覺(jué)得奇怪。早期對(duì) React 的批評(píng)（通常批評(píng)其 HTML 和 JS 混合方式）現(xiàn)在看起來(lái)像是一個(gè)遙遠(yuǎn)的記憶，目前Facebook 取消了他們的“專利”條款，度過(guò)了最大的一次危機(jī)。由于使用人數(shù)和開(kāi)發(fā)人員的滿意度都達(dá)到了空前的高度，因此可以肯定地說(shuō)，React 最受歡迎的前端庫(kù)。