HTML5 開發技能圖譜skill-map

# HTML5 開發技能圖譜

Md 文字版
----

## 基礎篇

- HTML/CSS

- JavaScript

- DOM

## 中級篇

- 數據格式(如JSON、XML）

- RESTful API交互（如jQuery Ajax，Fetch API，ReactiveX)

- 正則表達式

- HTML語義化

- 命令行

- Node.js

- DIV/CSS

- SCSS/SASS

- 矢量圖形/矢量圖形動畫（如SVG）

- 單頁面應用

## 高級篇

- ES6/TypeScript

- CSS3

- 面向對象編程

- 函數式編程

- MVC/MVVM/MV*

- 安全性（如跨域）

- 受權（如HTTP Basic，JWT等）

## 工程化

- 代碼質量（如JSLint，ESLint，TSLint，CSLint）

- 代碼分析（如Code Climate)

- 測試覆蓋率

- 構建系統(gulp，grunt，webpack等）

- 自動構建（腳本）

## 兼容性

- 跨瀏覽器測試（如Chrome，IE，Safari，Firefox等）

- 跨平臺測試（如Windows，GNU/Linux，Mac OS等）

- 跨設備測試（如Desktop，Android，iOS，Windows phone等）

- 跨版本測試（同一瀏覽器的不一樣版本）

## SEO

- Sitemap(站點地圖）

- 內部連接建設

- MicroData/MicroFormat

- 頁面靜態內容生成

- H1，H2，H3和strong使用

- Title，Description優化

- 頁面靜態內容生成

## 設計

- 切頁面

- 線框圖（Wireframe)

- 響應式設計

- 網格佈局（Grid Layout)

- Flexbox佈局

## 性能與優化

- PageSpeed/Yslow優化

- 加載優化（如gzip壓縮，緩存等）

- 性能測試（特別是移動Web)

- 可用性

- 壓縮（如Minify，Uglify，CleanCSS等）

## 測試

- 單元測試

- 服務測試

- UI測試

- 集成測試

## 調試

- 瀏覽器調試

- Debug工具

- Wireshark/Charles抓包

- 遠程設備調試（如Chrome Inspect Devices)

## 軟件工程

- 版本管理（如git，svn)

- 包管理（如npm，bower)

- 依賴管理

- 模塊化（如CommonJS，WebPack)

## 前端特定

- CSS/CSS3動畫

- JavaScript動畫

- Web字體嵌入

- Icon字體

- 圖形和圖表

- CSS Sprite(如glue)

- DOM操做（如jQuery，React等）

- 模板引擎（如JSX ，Handlebars，JSP，Mustache等）