第1章 課程前期準備
在學習正式課程之前了解下“WEB項目開發流程”以及在“流程中的角色”。
1-1 課程介紹
1-2 課程安排
1-3 WEB項目開發流程介紹
1-4 開發角色縮寫簡介
1-5 產品設計
1-6 開發規劃
第2章 前端開發簡介及標注與切圖
本章節對本項目前端開發具體做什么做了簡單介紹，并帶領用戶進行 psd 圖標注與切圖。
2-1 前端開發內容介紹
2-2 標注簡介
2-3 標注
2-4 切圖（一）
2-5 切圖（二）
2-6 MarkMan 標注 PSD 文件
第3章 項目 JS 類開發
本章節講師會帶你規劃和開發 JS 項目所用的“通用圖文組件“- H5ComponentBase 和“內容組織功能類“ – H5。
3-1 靜態頁思路驗證-fullPage.js搭建一個簡單切換頁面
3-2 靜態頁思路驗證-組件切換
3-3 JS類規劃
3-4 通用圖文組件類-H5ComponentBase（開發準備）
3-5 通用圖文組件類-H5ComponentBase（參數設置）
3-6 CSS樣式規劃
3-7 通用圖文組件類-H5ComponentBase（接受 onLoad、onLeave事件）
3-8 內容組織類-H5（addPage方法）
3-9 內容組織類-H5（addComponent方法）
3-10 內容組織類-H5（整合fullPage.js）
3-11 升級 H5ComponentBase 類支持相對定位
第4章 圖表組件-散點圖組件開發
講師先對圖片組件做整體介紹，然后手把手帶你詳細開發散點圖組件，直到你能夠獨自完成。
4-1 圖表組件開發介紹
4-2 散點圖原理分析
4-3 散點圖開發(散點圖的比例值、顏色設置)
4-4 散點圖開發(位置設置)
4-5 H5ComponentPoint 動畫效果修改
第5章 圖表組件-柱狀圖組件開發
先跟著講師學開發水平柱圖，逐步掌握水平柱圖原理，然后自己獨立開發垂直柱圖。
5-1 柱圖開發簡介
5-2 水平柱圖開發（HTML的DOM搭建）
5-3 水平柱圖開發（CSS樣式編寫）
5-4 水平柱圖開發（生長動畫制作）
5-5 H5ComponentBar擴展，垂直柱圖實現
第6章 圖表組件-折線圖開發
講師先帶你使用 Canvas 開發折線圖，從中掌握折線圖的生長動畫原理，然后真正參與到項目實戰中，獨立完成改變生長動畫的任務。
6-1 折線圖搭建折線圖組件環境
6-2 折線圖畫布
6-3 折線圖繪制網格線
6-4 折線圖畫點
6-5 折線圖連線繪制數據
6-6 折線圖繪制陰影
6-7 繪制項目名稱
6-8 折線動畫
6-9 項目名稱動畫
第7章 圖表組件-雷達圖開發
已經掌握折線圖開發的你，跟著講師的教學練習節奏，完成使用 Canvas 來完成雷達圖的開發也是 So easy。
7-1 雷達圖開發（設計說明）
7-2 雷達圖開發（背景層開發）
7-3 雷達圖開發（數據層開發）
7-4 雷達圖開發（項目文本修正、生長動畫）
第8章 圖表組件-餅狀圖開發
本章節向你揭示餅狀圖的開發原理，在章節的結束你就可以獨立開發完成環狀圖開發了。
8-1 餅圖開發（繪制餅畫準備）
8-2 餅圖開發（繪制餅圖）
8-3 餅圖開發（繪制餅圖動畫）
8-4 餅圖開發（項目文本注入）
8-5 H5ComponentPie 擴展，環圖實現
第9章 項目前端頁面整合開發
前面章節的學習積累很重要！這一節講師就會帶你把前面各個開發出來的頁面整合在一起，你會感覺到前面類開發的好處，可以減少很多代碼的量。
9-1 前端整合開發介紹
9-2 前端整合開發準備
9-3 圖文組件頁開發（首頁整合開發）
9-4 圖文組件頁開發（整合內容填充）
9-5 圖文組件頁開發（尾頁整合開發）
9-6 圖表組件頁整合開發（一）
9-7 圖表組件頁整合開發（二）
9-8 圖表組件頁整合開發（三）
9-9 圖表組件頁整合開發（四）
第10章 課程擴展
有問題需要解決？隨時在問答區提出來！講師會把大家典型的問題做指點和解惑，比如餅狀圖項目文本發生重疊的解決方法等；最后還帶著你把項目最后首頁的 Loading 功能完成。
10-1 Loading 效果（簡介）
10-2 Loading 效果（HTML 結構搭建及 CSS 樣式設置）
10-3 Loading 效果（JS 腳本編寫）
10-4 餅圖文本重排（簡介）
10-5 餅圖文本重排（相交判定）
10-6 餅圖文本重排（重排）
10-7 Ajax 獲取 JSON 數據(上)
10-8 Ajax獲取 JSON 數據(下)
第11章 大任務-綜合實戰
實踐大作業環節！檢查你學習效果的時候到了：你完成項目任務后如果想知道自己的項目代碼寫得如何，可以申請代碼點評。授課講師將會點評你的代碼，幫你查漏補缺。
11-1 實現一個完整的手機端數據展示報告
