web 前端開發學習路線

初級

HTML 5

• HTML 5 與 HTML 4 的區別
• HTML 5 新增的主體結構元素
• HTML 5 新增的非主體結構元素
• HTML 5 表單新增元素與屬性
• HTML 5 表單新增元素與屬性（續）
• HTML 5 改良的 input 元素的種類
• HTML 5 加強的頁面元素
• HTML 5 編輯 API 之 Range 對象（一）
• HTML 5 編輯 API 之 Range 對象（二）
• HTML 5 音頻視頻
• HTML 5 拖放
• HTML 5 Canvas 標籤的使用
• HTML 5 Canvas 使用路徑
• HTML 5 Canvas 繪製漸變圖形與繪製變形圖形
• HTML 5 Canvas 圖形繪製處理
• HTML 5 Canvas 應用
• SVG
• HTML 5 File API 的應用
• HTML 5 File API 的應用進階
• Web 存儲
• HTML 5 應用緩存與 Web Workers
• 服務器推送事件
• 響應式佈局基礎
• 響應式佈局之 Bootstrap
• 使用 HTML 5 構建應用佈局和頁面

CSS 3

• CSS 入門基礎知識
• CSS 基本樣式講解
• CSS 定位
• CSS 盒子模型
• CSS 經常使用操做
• CSS 選擇器
• CSS 動畫 — 頁面特效
• HTML 與 CSS 簡單頁面效果實例
• CSS 3 選擇器詳解（一）
• CSS 3 選擇器詳解（二）
• CSS 3 選擇器詳解（三）
• CSS 3 文字與字體相關樣式
• CSS 3 盒子相關樣式
• CSS 3 背景與邊框相關樣式
• SVN 介紹和應用
• CSS 3 中的動畫功能
• 老式瀏覽器支持 HTML 5 和 CSS 3
• CSS 3 佈局屬性全接觸

初級開發工程師實戰

• HTML 5 實戰：圖片與標籤配合製做網頁
• HTML 實戰－極客學院播放視頻頁面佈局
• HTML 5 開發項目實戰：照片牆
• HTML 5 開發項目實戰：導航欄
• HTML 實戰 - 極客學院路徑圖頁面佈局實現
• 響應式佈局之 Bootstrap

初級前端工程師面試題

中級

JavaScript

• JavaScript 基礎教程
• JavaScript 語法詳解
• JavaScript 函數
• JavaScript 異常處理和事件處理
• JavaScript DOM 對象
• JavaScript 事件詳解
• JavaScript 內置對象
• JavaScript DOM 對象控制 HTML元素詳解
• JavaScript 瀏覽器對象
• JavaScript 瀑布流
• JavaScript 面向對象詳解
• JavaScript 正則表達式

中級前端開發工程師經常使用的庫—— jQuery

• jQuery 簡介及語法
• jQuery 選擇器和事件
• jQuery HTML 之捕獲、設置、元素添加、元素刪除
• jQuery 效果之隱藏與顯示、淡入淡出、滑動、回調
• jQuery AJAX 之異步訪問和加載片斷
• jQuery 的擴展與 noConflict
• jQuery CSS 操做及 jQuery 的盒子模型
• jQuery 之元素的遍歷與元素的過濾
• jQuery 菜單
• jQuery 實例：標籤切換

中級前端開發工程師經常使用的庫—— jQuery UI

• jQuery UI 的下載與使用
• jQuery UI Interactions
• jQuery UI Widgets（1）
• jQuery UI Widgets（2）

中級前端開發工程師經常使用的庫—— Backbone

• Backbone 概述

中級前端開發工程師經常使用的庫—— AngularJS

• AngularJS 入門
• AngularJS 進階
• AngularJS 進階 - Services 與指令的使用
• AngularJs 內置服務 $ http 的使用
• AngularJS 進階 - Directive 的使用
• AngularJS 之移動 App 開發

中級前端開發工程師經常使用的庫—— Bootstrap

• Bootstrap 簡介
• Bootstrap CSS 柵格、代碼和表格
• Bootstrap CSS 表單、按鈕和圖片
• Bootstrap 組件之下拉菜單、按鈕組、按鈕式下拉菜單
• Bootstrap 輸入框組、導航和導航條
• Bootstrap 媒體對象、面板和Well
• Bootstrap 過分效果、模太框和下拉菜單
• Bootstrap 基本組件
• Bootstrap 警告框、進度條和列表組
• Bootstrap 滾動監聽、標籤頁和工具提示
• Bootstrap 實例
• Bootstrap 進階

中級前端開發工程師經常使用的庫—— ReactJS

• React 概述
• JSX 語法及特色介紹
• React 生命週期詳解
• React 屬性和狀態詳解
• React 中事件的用法
• React 組件的協同使用
• React 表單詳解

項目實戰

• HTML 5 開發項目實戰：列表切換
• HTML 實戰：標籤切換效果
• jQuery 實例：標籤切換
• HTML 5 開發項目實戰：幽靈按鈕
• JavaScript 瀑布流
• jQuery 瀑布流
• HTML 5 開發項目實戰：側邊欄固定
• HTML 5 實戰：回到頂部功能實現

中級前端工程師面試題

高級

CSS 在工程中的改變

• 面向對象的 CSS
• Less 介紹和應用
• SASS 介紹和應用
• CSS 後處理器

項目構建與部署

• Grunt 介紹和應用
• Gulp 介紹和應用
• Bower 介紹和應用
• Yeoman 介紹和應用
• FIS 介紹和應用
• 深刻理解 Git 遠程操做
• Git 遠程協做
• 理解 Git 中 push.default 配置的做用
• 使用 Git 進行問題定位以及代碼查找
• SVN 介紹和應用

前端經常使用的庫與實用技術

• JavaScript 模塊化
• JavaScript 數據推送
• JavaScript 高級函數
• JavaScript 高級技巧
• JavaScript 面向切面編程
• JavaScript 多線程

常見設計模式

• JavaScript 設計模式簡介
• JavaScript 設計模式之 單例模式
• JavaScript 設計模式之 構造函數模式
• JavaScript 設計模式之 建造者模式
• JavaScript 設計模式之 工廠模式
• JavaScript 設計模式之 外觀模式
• JavaScript 設計模式之 代理模式
• JavaScript 設計模式之 觀察者模式
• JavaScript 設計模式之 策略模式
• JavaScript 設計模式之 命令模式
• JavaScript 設計模式之 迭代器模式
• JavaScript 設計模式之 職責鏈模式
• JavaScript 設計模式之 適配器模式
• JavaScript 設計模式之 模板方法
• JavaScript 設計模式之 原型模式

前端開發其餘工程師配合

• 前端工程師和美工配合的那些事
• 和 Node.js 配合的那些事
• 和產品經理配合的那些事
• 和 PHP 配合的那些事

Web 安全

• Web 安全介紹與基礎入門知識
• XSS 入門與介紹
• 跨站僞造請求（CSRF）

Windows & Linux 基礎

• Linux 用戶、羣組和權限
• SSH 服務實戰應用
• bash shell 的學習
• 文件的壓縮與打包
• Linux 文件和目錄管理

Node.js

• 初識 Node.js
• Node.js 開發環境搭建
• Node.js 實戰項目開發：極客學院 「技術問答」
• 使用 loopback 快速搭建用戶系統
• 基於 Node.js 平臺的下一代 web 開發框架 koa
• NodeJS 爬蟲系統

遊戲開發

• TypeScript 環境搭建
• TypeScript 基本數據類型
• TypeScript 類 ( Class )
• TypeScript 函數
• TypeScript 接口（ Interface ）
• TypeScript 泛型
• TypeScript 模塊
• Egret 實例開發小遊戲：測專一力
• Egret 環境搭建
• Egret 顯示對象
• Egret 顯示容器
• Egret 事件機制
• Egret 繪圖、文本、動畫和計時器
• Egret 位圖紋理
• Egret 聲音和網絡
• Egret 實例及屏幕適配
• Egret GUI 庫
• Cocos2d-JS 第一步
• Cocos2d-JS 基礎數學知識
• Cocos2d-JS 基礎元素
• Cocos2d-JS Action 動做與特效
• Cocos2d-JS v3 對象緩衝池
• Cocos2d-JS v3 事件管理器
• Cocos2d-JS v3 對象
• Cocos2d-JS v3 工做流
• Cocos2d-JS CocosStudio 2.x 基礎控件
• Cocos2d-JS CocosStudio 2.x 容器控件
• Cocos2d-JS 虛擬手柄

資深前端開發工程面試題

Google V8 引擎 的實際應用