1、第一階段——HTML的學(xué)習(xí)。超文本標記語言(HyperText Mark-up Language 簡稱HTML)是一個網(wǎng)頁的骨架，無論是靜態(tài)網(wǎng)頁還是動態(tài)網(wǎng)頁，最終返回到瀏覽器端的都是HTML代碼，瀏覽器將HTML代碼解釋渲染后呈現(xiàn)給用戶。因 此，我們必須掌握HTML的基本結(jié)構(gòu)和常用標記及屬性。

2、第二個階段——CSS的學(xué)習(xí)。CSS是英文Cascading Style Sheets的縮寫，叫做層疊樣式表，是能夠真正做到網(wǎng)頁表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計語言。相對于傳統(tǒng)HTML的表現(xiàn)而言其樣式是可以復(fù)用的，這樣就極大地提高了我們開發(fā)的速度，降低了維護的成本。

3、第三個階段——JavaScript的學(xué)習(xí)。JavaScript是一種在客戶端廣泛使用的腳步語言，在JavaScript當中為我們提供了一些內(nèi)置函數(shù)、對象和DOM操作，借助這些內(nèi)容我們可以來實現(xiàn)一些客戶端的特效、驗證、交互等，使我們的頁面看起來不那么呆板。

4、第四個階段——jQUery的學(xué)習(xí)。jQuery 是一個免費、開源的輕量級的JavaScript庫，并且兼容各種瀏覽器(jQuery2.0及后續(xù)版本放棄了對IE6/7/8瀏覽器的支持)，同時現(xiàn)在有很多基于jQuery的插件可供選擇，這樣在我們實現(xiàn)一些豐富的動態(tài)效果時更方便快捷，大大節(jié)省了我們開發(fā)的時間，提高了開發(fā)速度，這也充分體現(xiàn)了其 write less,do more的核心宗旨。

5、第五個階段是Bootstrap。Bootstrap是Twitter推出的一個開源的用于前端開發(fā)的工具包，是一個CSS/HTML框架，并且支持響應(yīng)式布局。一經(jīng)推出后頗受歡迎，一直是GitHub上的熱門開源項目。

學(xué)html，css，js還有一些框架啥的，不簡單，不過也不是很難，自學(xué)稍微有點吃力，不一定能學(xué)會，我曾經(jīng)自學(xué)過一段時間，放棄了，后來還是覺得報班合適，學(xué)的快點。

就在前幾天，在我們?nèi)嗣}圈里討論過這樣一個問題：前端是做什么的呢，UI又是做什么的呢？他兩者差不多把，咳咳這里告訴大家！其實差太多了~~~還有好多的小同學(xué)常問我學(xué)Web前端，還是學(xué)UI啊，今天就為大家講解下兩者有什么區(qū)別！

什么是web前端開發(fā)工程師？

Web前端開發(fā)工程師，是從事Web前端開發(fā)工作的工程師。主要進行網(wǎng)站開發(fā)，優(yōu)化，完善的工作。網(wǎng)頁制作是Web 1.0時代的產(chǎn)物，那時網(wǎng)站的主要內(nèi)容都是靜態(tài)的，用戶使用網(wǎng)站的行為也以瀏覽為主。

一位好的Web前端開發(fā)工程師在知識體系上既要有廣度，又要有深度，所以很多大公司即使出高薪也很難招聘到理想的前端開發(fā)工程師。現(xiàn)在說的重點不在于講解技術(shù)，而是更側(cè)重于對技巧的講解。技術(shù)非黑即白，只有對和錯，而技巧則見仁見智。

以前會Photoshop和Dreamweaver就可以制作網(wǎng)頁，現(xiàn)在只掌握這些已經(jīng)遠遠不夠了。無論是開發(fā)難度上，還是開發(fā)方式上，現(xiàn)在的網(wǎng)頁制作都更接近傳統(tǒng)的網(wǎng)站后臺開發(fā)，所以現(xiàn)在不再叫網(wǎng)頁制作，而是叫Web前端開發(fā)。

Web前端開發(fā)在產(chǎn)品開發(fā)環(huán)節(jié)中的作用變得越來越重要，而且需要專業(yè)的前端工程師才能做好，這方面的專業(yè)人才近兩年來備受青睞。Web前端開發(fā)是一項很特殊的工作，涵蓋的知識面非常廣，既有具體的技術(shù)，又有抽象的理念。簡單地說，它的主要職能就是把網(wǎng)站的界面更好地呈現(xiàn)給用戶。

web前端工程師的職責？

利用(X)HTML/CSS/JavaScript/Flash等各種Web技術(shù)進行客戶端產(chǎn)品的開發(fā)，為網(wǎng)站上提供的產(chǎn)品和服務(wù)實現(xiàn)一流的Web界面，優(yōu)化代碼并保持良好兼容性，Web前端表現(xiàn)層及與前后端交互的架構(gòu)設(shè)計和開發(fā)，配合后臺開發(fā)人員實現(xiàn)產(chǎn)品界面和功能，利用各種Web技術(shù)模擬開發(fā)產(chǎn)品原型

Web新技術(shù)調(diào)研和資訊整理

web前端工程師需要掌握的技能？

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

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

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

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

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

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

什么是UI設(shè)計？

ui設(shè)計（或稱界面設(shè)計）是指對軟件的人機交互、操作邏輯、界面美觀的整體設(shè)計。UI設(shè)計分為實體UI和虛擬UI，互聯(lián)網(wǎng)常用的UI設(shè)計是虛擬UI，UI即User Interface(用戶界面)的簡稱

好的UI設(shè)計不僅是讓軟件變得有個性有品位，還要讓軟件的操作變得舒適簡單、自由，充分體現(xiàn)軟件的定位和特點。

UI設(shè)計的職責？

負責公司產(chǎn)品在智能電視、PC端、移動端頁面/應(yīng)用的整體設(shè)計。

基于用戶體驗、人機交互、圖形化設(shè)計、界面設(shè)計等前沿理論實現(xiàn)產(chǎn)品風格設(shè)計。

充分理解產(chǎn)品策劃思路及理念，配合產(chǎn)品經(jīng)理和研發(fā)人員實現(xiàn)產(chǎn)品界面的視覺設(shè)計

建立和完善產(chǎn)品界面視覺設(shè)計規(guī)范。

根據(jù)交互設(shè)計及產(chǎn)品規(guī)劃，完成產(chǎn)品（iPhone、Android 、Web平臺App及網(wǎng)站）相關(guān)的用戶界面視覺設(shè)計。

配合產(chǎn)品開發(fā)中的圖形界面（GUI）設(shè)計。完成產(chǎn)品相關(guān)推廣活動的專題頁面、FLASH的設(shè)計及制作。

與研發(fā)團隊充分溝通協(xié)作，確認可控的誤差范圍和視覺效果的最終實現(xiàn)。

根據(jù)視覺設(shè)計的發(fā)展趨勢及用戶研究的結(jié)果不斷優(yōu)化產(chǎn)品的圖形界面。

UI設(shè)計需要掌握的技能？

視覺設(shè)計主要是以美術(shù)設(shè)計為主，界面的色彩、結(jié)構(gòu)、圖標等工作都需要視覺設(shè)計師來完成。主要使用的軟件是以Adobe公司的軟件為主，如PS、AI、AE、FW，當然還有后起之秀Skitch等，一般來講從業(yè)者都是美術(shù)專業(yè)相關(guān)院校的畢業(yè)生，也有少部分計算機專業(yè)畢業(yè)生。交互設(shè)計主要是以產(chǎn)品交互原型設(shè)計為主，完成設(shè)計交互原型圖，但是其實是一個很考驗綜合能力的職位，需要了解用戶體驗知識、界面設(shè)計知識、產(chǎn)品業(yè)務(wù)知識等。交互的設(shè)計軟件比較多，沒有視覺軟件上Adobe那種一家獨大，每種軟件都有自己的特點，AxureRP、Balsamiq Mockups、Omnigraffl Pro等，一般來講都是需要一定的從業(yè)經(jīng)驗才能很好勝任。另外還有很多公司將交互相關(guān)職位進行了更的細劃分，出現(xiàn)了用戶體驗設(shè)計師、用戶研究員、無線交互設(shè)計師等職位。

總體來說呢，這兩個職位都是可以的，該如何選擇的話可以根據(jù)實際情況以及自身愛好進行選擇。希望這篇文章可以幫到你！加油吧少年！