前端處于一個高速發展的時代。回望前端的發展，在過去十年中，前端從簡陋的HTML，CSS，JavaScript三把刷子做出來靜態網頁的時代，發展到現在視覺效果酷炫，適用終端廣泛，開發手段豐富多樣的前所未有的黃金時代。

越來越多的開發者涌入前端行業淘金，那么就有一種說法流傳出來，“前端開發已經飽和了”，“前端開發要找不到工作了”。這是不是在危言聳聽，真相是什么樣的呢？在多個招聘網站搜索“前端工程師”職位就會發現，在每個一線城市均可找到10000+以上前端工程師招聘職位。對前端開發需求量依然可以保證你找到一門工作，不存在飽和這樣的說法。

但如果你再仔細留意，你會發現招聘量最大的3-5年的中高級前端乃至前端架構師，而不是初級前端。所以再回過頭來說前端飽不飽和這個問題，需求肯定是不飽和，但留給初級前端的機會確實少了。

所以，如果你是一個實力很弱的前端小菜鳥，找到一份心儀的前端工作是有些困難的，初級前端就只能失業了嗎？不，除了熬年限、熬經驗，實力才是最為重要的。高水平的開發也是從初級水平成長起來的，你也是可以成長為一名高級前端開發的。

初級開發怎么才能成長為一名高級前端？前端的知識體系龐雜，框架、庫、插件數不勝數，小白學習web前端開發應該學習哪些東西？

1夯實基礎

前端的基礎是什么？是HTML、CSS，JavaScript。特別是JavaScript，我們對前端基礎的掌握程度，極大程度上體現在對JavaScript的掌握程度上。所有的瀏覽器引擎運行的腳本語言都是JavaScript，我們使用的框架也是用JavaScript開發的。即使最近非常流行的typescript，其實底層也是JavaScript，是需要編譯為JavaScript后才能在瀏覽器運行的。即使是高級前端工程師的面試中，對于JavaScript知識的考核也是必不可少的。不僅體現在JavaScript語法，API，也很大一部分包含著最新的ES6的知識。

2主動學習

一名優秀的程序員絕對不是一個被別人牽著鼻子或者被人用鞭子趕著才會去學習的人，他一定是一個主動學習的人。優秀的程序員之所以優秀，是因為他有深厚的知識積累，而這些知識的來源，是因為他在不斷地學習。所以才能夠在工作中解決棘手的問題，在面試中回答出刁鉆的難題，因此而獲得豐厚的薪水。一個被動學習的人，我想是很難達到這種地步的。

作為前端要主動學習，方向必須是能夠具有針對性的提升自身競爭力的內容，而且是輕易不會過時的穩定的知識。比如就像語言內部機制和框架原理，設計模式這種知識。學了這種知識，其實就有能力自己做一些簡單的框架，工具和庫了，心中有底氣，就可以擺脫被不斷更新的應用型，API型知識牽著鼻子走的局面。

新手學習前端開發的話，一般需要5到8個月的時間。

如何學習前端開發，

Web前端的學習路線

結合我的學習經歷、近年來輔導學生的經驗以及公司中實際項目的需求，在這里將Web前端的學習分為以下幾個階段，具體的學習路線圖如圖所示。

第一階段——HTML的學習。

超文本標記語言（HyperText Mark-up Language 簡稱HTML）是一個網頁的骨架，無論是靜態網頁還是動態網頁，最終返回到瀏覽器端的都是HTML代碼，瀏覽器將HTML代碼解釋渲染后呈現給用戶。因此，我們必須掌握HTML的基本結構和常用標記及屬性。

HTML的學習是一個記憶和理解的過程，在學習過程中可以借助Dreamweaver的“拆分”視圖輔助學習。在“設計”視圖中看效果，在“代碼”視圖中學本質，將各種視圖的優勢發揮到極致，這種對照學習的方法彌補了單純識記HTML標簽和屬性的枯燥乏味，想必對各位初學的小盆友們來說必定是極好的！

在學習了HTML之后，我們只是掌握了各種“原材料”的制作方法，要想蓋一幢樓房就還需要把這些“原材料”按照我們設計的方案組合布局在一起并進行一些樣式的美化。

于是進入第二個階段——CSS的學習。

CSS是英文Cascading Style Sheets的縮寫，叫做層疊樣式表，是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對于傳統HTML的表現而言其樣式是可以復用的，這樣就極大地提高了我們開發的速度，降低了維護的成本。

同時CSS中的盒子模型、相對布局、絕對布局等能夠實現對網頁中各對象的位置排版進行像素級的精確控制。通過此階段的學習，我們就可以順利完成“一幢樓房”的建設。

“樓房”建設完成之后，我們可以交給用戶使用，但是如果想讓用戶獲得更佳的體驗，我們還可以對“樓房”進行更深一步的“裝修”，讓它看起來更“豪華”一些。

為了完成這個任務，我們進入第三個階段——JavaScript的學習。

JavaScript是一種在客戶端廣泛使用的腳步語言，在JavaScript當中為我們提供了一些內置函數、對象和DOM操作，借助這些內容我們可以來實現一些客戶端的特效、驗證、交互等，使我們的頁面看起來不那么呆板，屌絲瞬間逆襲高富帥！有么有？

此時，也許你還沉浸在JavaScript給你帶來的驚喜之中，但你的項目經理卻突然對你大吼道

JavaScript的兼容性和復雜性有時候的確讓我們頭疼，還好有“大神”幫我們做了封裝。

接下來我們進入第四個階段——jQUery的學習。

jQuery是一個免費、開源的輕量級的JavaScript庫，并且兼容各種瀏覽器（jQuery2.0及后續版本放棄了對IE6/7/8瀏覽器的支持），同時現在有很多基于jQuery的插件可供選擇，這樣在我們實現一些豐富的動態效果時更方便快捷，大大節省了我們開發的時間，提高了開發速度，這也充分體現了其write less,do more的核心宗旨。這個Feel倍兒爽！有么有？

“豪華大樓”至此拔地而起，但是每天這樣日復一日，年復一年的蓋樓，好繁瑣！能不能將大樓里面每一個單獨部件模塊化，當需要蓋樓時就像堆積木一樣組合在一起，這樣豈不是爽歪歪？可以實現嗎？答案是肯定的。

這種思想在Web前端開發中也是適合的，于是乎就出現了各種前端框架，在這里推薦給大家的是Bootstrap。

Bootstrap是Twitter推出的一個開源的用于前端開發的工具包，是一個CSS/HTML框架，并且支持響應式布局。一經推出后頗受歡迎，一直是GitHub上的熱門開源項目。

在項目開發過程中，我們可以借助Bootstrap提供的CSS樣式、組件、JavaScript插件等快速的完成頁面布局和樣式設置，然后再有針對性的微調樣式，這樣基于框架進行開發大大縮短了開發周期。站在巨人的肩膀上就是爽！

Web前端的學習建議

最后給大家聊聊在學習Web前端中的一些建議和方法。

自己是一個五年的全棧工程師，這里推薦一下我的前端學習交流群：開始484然后757最后760，里面都是學習前端的，群里會不定期更新最新的教程和學習方法，有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的web前端黨歡迎加入，

在CSS布局時需要注意的一個問題是很多同學缺乏對頁面布局進行整體分析，不能夠從宏觀上對頁面中盒子間的嵌套關系進行把握，就急于動手去做，導致頁面中各元素間的關系很混亂，容易出現盒子在浮動時錯位等情況。建議大家在布局時采用“自頂向下，逐步細化”的思想，先用幾個盒子將頁面從整體上劃分，然后逐步在盒子中繼續嵌套盒子。

“君子生非異也，善假于物也”，在學習的過程中還要多瀏覽一些優秀的網站，善于分析借鑒其設計思路和布局方法，見多方能識廣，進而才可以融會貫通，取他人之長為我所用。

同時還要善于使用Firebug這個利器。Firebug一方面可以在我們學習過程中幫助我們調試自己的頁面，另一方面我們可以使用Firebug方便地查看、分析別人網站的源代碼，“偷”也是一種技能！

隨著移動互聯網熱潮的到來，移動開發越來越受到大家的追捧，響應式布局、微網站等需求量不斷增加，也是我們Web前端未來的發展方向之一，學有余力的同學可以多多關注。最后祝愿大家能在Web前端開發道路上走出一片更寬更廣的天地！

網頁前端開發工程師就是與網頁打交到。下面幾個技能是必備的。

寫網頁怎么離得開html，html也叫超文本標記語言，它包括很多標簽。通過標簽對文字，圖片，聲音，視屏等網頁元素進行格式化處理。html就是網頁的基礎。

CSS是層疊樣式表的英文簡稱，CSS能夠對網頁的元素的位置進行排版，那些漂亮的網頁就是用CSS進行排版的，什么元素在什么位置都是通過CSS進行處理的，部分網頁的動態效果也是用css實現的，常見的loading樣式，鼠標進入圖片放大等效果都可以用CSS實現。網頁的布局離不開CSS。

JavaScript簡稱js，是一款解釋型腳本語言，它對網頁的作用就是處理用戶事件的，比如網頁的元素被點擊后有什么效果，就需要利用js進行事件綁定。比如登錄界面，用戶輸入賬號密碼后點擊登錄。js就會處理這些事件，去訪問后臺拿到結果后判斷是否登錄成功。總之，js就是處理事件的。

前端框架就是對js的二次封裝，把常用的功能封裝起來，提高開發者的開發效率。

常見的前端框架有jquery：獨特的鏈式語法和簡潔的多功能接口；具有高效靈活的css選擇器，并且可對CSS選擇器進行擴展。

Bootstrap：讓頁面更加簡潔、直觀。是移動設備優秀的前端開發框架,讓網頁開發更迅速、更簡單。它還提供了優雅的HTML和CSS規范，有著豐富的網格布局系統以及大量的可重用組件，還支持JavaScript、jQuery插件以及組件定制等。

AngularJS：有很多特性，最為核心的是MVW（Model-View-Whatever）、模塊化、自動化雙向數據綁定、語義化標簽、依賴注入等等。

Vue：Vue.js是一個構建數據驅動的 web 界面的漸進式框架。Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。

網頁寫好了，總是要看看效果的，這個時候調試工具是必要的，一般都是用瀏覽器進行調試，chrome，Firefox等主流瀏覽器的網頁調試方法都要會。

以上都學會了，就需要項目進行實戰了。