正確的Web前端開發的學習曲線

 

       許多對Web前端開發感興趣的同窗們，都但願系統而完整地學完前端開發課程。然而隨着Web技術的不斷進步，愈來愈多的開發模式和前端框架不斷的涌現出來，讓許多前端開發的小白學生們望而卻步，有的甚至感嘆：前端開發簡直就是個「無底洞」啊！

總結了市場上經常使用的技術，將爲同窗們不斷地奉獻出高質量的與Web前端開發有關的內容。今天就讓咱們從Web前端開發的學習曲線開始吧。

簡單來講，Web前端開發的學習內容主要包括如下三個部分：Web頁面項目的製做、移動端頁面項目的製做、JS框架的學習。在這三部分學習內容的基礎上，我將整個Web前端開發的學習曲線劃分爲了五個學習階段。

一、起航：Web頁面佈局階段。

第一階段：起航

這應該是全部Web前端小白學習者必須經歷的第一個階段。該階段將實現對Web界面的獨立佈局和製做，可以利用「塊+CSS樣式」的佈局模式對頁面進行設計。除此以外，做爲一名前端設計師，還應該熟練掌握Photoshop的使用。

該階段要重點學習如下課程：

• Adobe Photoshop

• HTML 超文本標記性語言

• CSS 層疊樣式表

• 「塊+CSS」佈局模式

二、揚帆：頁面行爲階段。

第二階段：揚帆

   面對本身設計的Web頁面，若是可以添上一些鼠標的特效或頁面動畫，那整個做品的效果就更加酷炫了。這就須要系統的學習頁面的行爲。該階段將接觸廣爲人知的jQuery框架，學習原生的JavaScript腳本語言。爲了開發出更加符合商業應用的效果，能夠學習jQuery UI技術，同時也能更加熟悉框架的使用方式。

  前兩階段學習的結束，標誌着你已經可以製做出市面上大部分常見的頁面效果和佈局模式了。這裏，小海老師強烈建議在該階段的最後學習Visual Studio的使用。Visual Studio能夠用來製做.net後臺項目，這裏並非讓同窗們系統的學習.net技術，而是因爲許多公司在使用.net技術進行後臺開發，因此咱們能夠在此階段僅學習Visual Studio製做前端頁面的方法和利用MVC模式開發Web項目的前端製做方式。

該階段要重點學習如下課程：

• jQuery技術

• JavaScript腳本語言

• jQuery UI

• Visual Stuido的使用

這一階段的難點是對JavaScript腳本語言的學習，我將該門語言的學習流程劃分爲三個部分：

• 第一部分：JavaScript基礎知識

• 第二部分：DOM文檔對象模型開發

• 第三部分：面向對象的程序設計

三、遠航：移動頁面設計階段。

第三階段：遠航

  在Web界面開發已經熟練的基礎上，本階段重點培養移動頁面開發的經常使用技術和方法。首先要詳細的瞭解CSS3給出的新屬性和彈性盒佈局模式。一款重要的樣式類框架Bootstrap在本階段成爲了同窗們學習的重點，這也是響應式佈局須要你們重點掌握的框架。專享於移動頁面開發的第三方框架能夠適當的在本階段接觸幾個，例如基於jQuery技術的jQuery Mobile、Framework 七、Light 7等，都是移動端開發駕輕就熟的技術。

該階段重點學習如下課程：

• CSS 3技術

• 彈性盒佈局與媒體查詢

• Bootstrap框架

• jQuery Mobile技術

• Framework 7框架

• Light 7 框架

四、進階：HTML5 API開發階段。

第四階段：進階

  HTML5技術在JavaScript的基礎之上給出了大量的API，豐富了頁面功能，使得之前要書寫大量腳本代碼實現的效果變得更加容易完成。現在HTML5技術比較成熟且經常使用的API包括：audio和vedio媒體API、Audio Context API、Canvas API、File API、WebStorage API等。HTML5中的許多技術還在不斷地制訂和完善過程中，相信將來更多的實用性API會加入到HTML5的陣營中。

該階段重點學習如下課程：

• HTML5新增標記對和屬性

• audio和video媒體API

• Canvas 畫布技術

• SVG可縮放矢量圖形技術

• Audio Context API

• 本地文件 File API

• HTML5表單驗證API

• WebStorage API

• ……

五、探索：全棧式開發階段。

第五階段：探索

  爲了更好的向後臺傳遞數據，再加上全棧式開發的須要，市面上出現了許許多多的功能性框架。該階段是前端開發的核心階段，須要掌握全棧式開發中服務器的搭建，最好在該階段開始學習MySQL數據庫和MongoDB數據庫的設計與使用。

該階段重點學習如下課程：

• Node.js框架

• Ajax技術

• ArgularJS框架

• VUE.js框架

結束語

固然，前端開發還有許許多多的知識須要在學習過程當中不斷的完善，例如JSON、XML、Sass、Less等。若是再能學習一些後臺開發知識，例如ASP.net技術、JSP和Java技術、PHP技術，那麼在你的知識儲備上真的是如虎添翼。那麼就讓咱們趕忙制定一個初步的學習計劃，加入到Web前端開發多姿多彩的世界中去吧若是你想試着學一下web前端，加羣434623999，免費領取入門試聽課程~