前端學習路線

 

1. 第一章：認識網站前端

   前端工做前景

   前端目前人才需求巨大，真正會的人甚少，大學畢業都是菜鳥，願意繼續學習的人又不多，致使人才匱乏，工做待遇高漲。前端目前待遇普通在6K-20K之間，優秀更高。

   前端崗位及工做內容

   崗位名稱：WEB前端工程師 ，任務：提高互聯網產品的用戶體驗！

   現在的前端今非昔比，PC網站開發，手機端網站開發，網頁遊戲開發等等，前端工程師通常須要熟悉至少一種後臺開發技術(例如:PHP首選)

   本班課程設計及目標

   牢牢圍繞社會發展需求，培養專業級實戰人才。全部畢業同窗均包就業。

2. 2

   第二章：HTML5從入門到精通

   系統精講HTML4.01經常使用全部標籤

   html, body, head, meta, title 等固定結構標籤

   div,h1-h6, p, ul, ol, dl,iframe 等幾十種佈局標籤

   a,img,span,b,strong, link, script 等幾十種內容型標籤

   form表單專題精講

   table表格專題精講

   多媒體音視頻處理專題精講

   系統精講HTML5新增全部經常使用標籤

   header, section, nav, footer, article, aside 等新增佈局型語義標籤精講

   form表單新特性精講

   audio,video等新增多媒體標籤精講

   canvas專題精講

   html綜合實戰與考覈

   老師帶領使用html標籤佈局一個完整網頁

   學員獨立完成使用html標籤(手寫)完成一個完整網頁

3. 3

   第三章：PhotoShop切圖精講

   資源準備

   有老師提供一套網站PSD設計源文件

   老師帶隊演示PS切圖技術和注意事項

   切圖實戰考覈

   每位同窗能夠網上下載一套psd設計源文件，完成切圖任務

   學完CSS後進一步對此技術進行強化訓練

4. 4

   第四章（上）：CSS 精講

   CSS快速入門

   CSS快速入門示例，CSS選擇器，行內，頁級，外聯，導入(link,import)精講

   HTML全部經常使用標籤默認值特性專題

   邊框與邊距

   實戰演示+系統精講border,margin,padding各類應用

   背景與背景定位

   實戰演示+系統精講background-*背景顏色，背景圖片及定位，各類應用場景

   文本特性與列表樣式

   超級連接css特性，img的css兼容特性

   文本粗細，顏色，行間距，字間距，字體，對齊模式等精講

   各類list列表的css特性與實戰演練

   尺寸與經常使用單位精講

   寬度(最大寬度，最小寬度，百分比寬度，定值寬度)，高度(同前)

   px, em, pt, n%, hex 及特殊字符串描述

5. 5

   第四章（下）：CSS 難點精講

   佈局精講

   浮動原理，左右浮動，清除浮動,浮動對塊狀元素，行內塊狀元素，行內元素的影響精講

   "行內，塊狀，行內塊狀，表格模式" 元素類型的自由轉換

   元素的隱藏與顯示

   定位精講

   經過實戰精通絕對定位

   經過實戰精通相對定位

   經過實戰精通固定定位

   定位與浮動的區別專題

   表格與表單CSS專題精講

   表單css精講，表單元素CSS默認值特性，不識別特性

   表格css特性，充分利用能夠把不少計算問題簡單化

   HTML+CSS綜合實戰

   老師帶隊作好一個完整網頁先後臺頁面（要儘量全面的充分利用所學知識），並經過全部主流瀏覽器兼容測試

   畢業設計：學生獨立完成網站網頁先後臺頁面，並經過全部主流瀏覽器兼容測試

   製做標準

   以BAT產品爲樣板，惟美或質感，偏差2像素內容，代碼精煉，結構清晰合理，html與css要徹底分離，符合W3C標準，利於SEO，利於程序員使用，註釋規範明確。

6. 6

   第五章(上)：CSS3對css2的基本拓展一

   CSS3快速入門

   經過示例快速解說CSS3

   CSS3主流瀏覽器兼容問題,瀏覽器內核前綴介紹

   CSS3新增幾十種選擇器精講

   css3文本新特性精講

   text-shadow 實戰應用精講

   文本方向，自定義字體等文本新特性精講

   新增顏色模式精講

   rgba 色彩漸變，透明度應用普遍

   Hsl

   在css2基礎上新增UI特性

   新圓角，圖像邊框，線性漸變，徑向漸變，多重背景，遮罩等

7. 7

   第五章(中)：CSS3 新盒子模型與響應式佈局專題精講

   盒新模型精講

   CSS3 分欄佈局精講

   CSS3 響應式佈局精講

8. 8

   第五章(下)：CSS3 過渡/Animate動畫/2D/3D變換/ - 注：此部分能夠在js基礎學完後學習

   Transition過渡動畫精講

   Transition過渡動畫精講及實戰

   Animate關鍵幀動畫精講

   Animate關鍵幀動畫精講及案例實戰

   2D變換

   transform旋轉，斜切，平移，縮放

   2D變換實戰案例

   3D變換

   transform旋轉，斜切，平移，縮放

   3D變換實戰案例

9. 9

   第六章(上)：JavaScript基本語法精講

   JS快速入門

   快速入門示例，js各類嵌入到html文件的方法。註釋，標記，變量，數據類型

   數組精講

   一位，二維，多維數組定義，排序，切分等各類場景使用精講。

   函數精講

   函數定義，執行環境，做用域，匿名函數，回調，遞歸，閉包精講

   字符串處理精講

   字符串處理函數，正則表達式精講

   系統經常使用函數

   setTimeout, setInterval，日期時間函數，數學函數精講

   認識對象

   js對象定義，構造函數，原型精講

10. 10

    第六章(下)：BOM/DOM模型/事件模型

    BOM模型精講

    Navigator, Location, Window, Screen, history對象精講

    DOM模型

    節點查找，類型判斷，建立，添加，刪除，修改等

    事件模型

    冒泡型，捕獲型，事件綁定的3種方法精講

    事件類型

    鼠標事件，鍵盤事件，UI事件精講

    事件對象精講

    各類不一樣事件類型的事件對象精講

11. 11

    第七章(上)：jQuery 精講一

    jQuery快速入門

    快速入門示例，jQuery 選擇器

    經常使用函數實戰

    屬性編輯函數，元素篩選函數

    節點處理

    jQuery對DOM模型的處理的二次封裝

    CSS處理

    jQuery對css處理的二次封裝

    jQuery事件處理

    jQuery對事件處理的二次封裝與事件對象

    jQuery動畫效果

    淡入淡出，隱藏顯示，animate動畫等

12. 12

    第七章(下)：jQuery 高級精講

    jQuery 隊列精講

    queue，dequeue，delay，stop等核心函數用法精講，使用隊列完成動畫

    jQuery插件開發

    jQuery插件開發精講，插件開發實戰

    Ajax應用專題精講

    Ajax應用專題精講

    jQuery實戰考覈

    使用 jQuery分別完成，完整網頁(各類常見特效製做)，業務邏輯運算，數據交換，網頁遊戲實現等。

13. 13

    第八章：jQuery UI精講二

    jQuery UI精講二

    有了jQuery UI 不少經常使用特效和功能都輕鬆搞定...

14. 14

    第九章：手機網站製做專題精講

    手機網站實戰專題

    手機網站實戰專題

15. 15

    第十章：Ajax、JSON、XML、Canvas 專題精講

    Ajax精講

    原生Ajax精講， XMLHttpRequest對象與 "jQuery Ajax" 實戰對比

    JSON、XML 精講

    JSON、XML 精講、微信公衆平臺案例

    Canvas 精講

    Canvas 繪圖，經過程序也能輕鬆建立，修改圖片了...

16. 16

    第十一章：JavaScript 原生高級編程精講

    JS 複製繼承，原型鏈繼承等

    JS 複製繼承，原型鏈繼承等精講具體見課堂講義...

    JS對象繼承

    JS對象繼承在框架開發中應用實例精講，更佳的封裝和重用你的代碼。

17. 17

    第十二章：其餘拓展進階學習

    延伸學習 - 前端佈道師

    爲完成多人合做的大型WEB前端項目，確保代碼的可用型，高性能，易拓展等問題，有一系列解決方案。這些方案都創建在精通以上基礎之上。

    更多框架庫學習

    SeaJS、Angular、Bootstrap、React, NodeJS(服務器端平臺)等等

    SVN, 模塊化開發, CMA, AMD, 構建工具, http協議

    新框架和新名稱由來的緣由

    新框架和名詞層出不窮（無數前端框架，無數新名稱，學習原則不變：一精多能), 大多來自BAT, 谷歌, Yahoo, FaceBook, Twitter等等國際一流IT相關公司.

    之因此會出現不少新產品，不如說是出現不少解決方案，是在這些公司的應用程序規模很龐大時候須要尋找一種有效的管理辦法最終找到一種解決方案，並很快被其餘人承認和接受。

18. 18

    請繼續學習：PHP網站開發高級工程師第二部後臺部分