職位名稱：前端開發工程師
學習概要：1、先了解基礎，html/css/JavaScript是基礎。html/css就是做靜態頁面的，javascript是做動態的。
2、學習框架：jQuery（基於DOM，必學），三大主流框架：Vue、React、Angular。
其他框架：Bootstrap（CSS框架），jquery-ui，Echarts（制圖）
vue框架：Element-UI，iview
nodejs框架：express, koa
3、后台語言：Node.js(事件驅動),Java（運用廣泛）
一、輔助工具
1、編程工具：(1)sublime text3，簡單方便，下一個安裝就行了。如果想用的更加方便，可以百度一下常用的插件，安裝幾個最常用的就夠了。
（1）按下Ctrl+Shift+P調出命令面板
（2）輸入install 調出 Install Package 選項並回車，然后在列表中選中要安裝的插件
下載安裝及插件參考：sublime text 3下載與安裝詳細教程
（2）visual studio code：vscode官網
開始用sublime，目前轉用vs code，比sublime更加方便
2、制圖：ECharts:直接進官網看教程，簡單的可以在線制作后取用代碼;可以參考博客EChart.js 簡單入門
iconfont:阿里巴巴矢量圖庫，vue項目中引入字體庫（icon）（詳細步驟）
3、調試：在任意瀏覽器中按F12（工具里面的開發者工具），或者點右鍵檢查，會出現控制台，推薦谷歌瀏覽器
4、http請求的資源庫：JSON庫、Translate API、Bootswatch樣式
5、GitHub：代碼托管，團隊合作的利器，開發者可以上傳自己的代碼，也可以下載別人的代碼，具體使用參考博客：使用Git將本地項目上傳到Github操作詳解、Git克隆、修改、更新項目，及查看項目地址命令
SVN：如何在Eclipse上使用SVN,安裝、提交、拉取代碼、解決沖突等操作
6、碼雲：基於 Git 的完全免費的代碼托管服務，與 github 的對比
優點：服務器在國內，在國內訪問速度比github快很多，可以免費讓自己的倉庫他人不可見，但是否安全就不知道了。訪問速度很快，支持svn，git兩種方式，免費賬戶同樣可以建立 私有項目，而 github 上要建立私有項目必須 付費。
缺點：每個倉庫有1G的容量限制，把Unity工程弄上去一下就超了。
二、技術交流社區
1、博客園：
2、CSDN：
3、MDN
4、其他
推薦博客：阮一峰的博客、張鑫旭前端開發博客、廖雪峰的官方網站
三、HTML/CSS
1、先看慕課網的基礎教程：HTML+CSS基礎課程（非常適合零基礎入門）
其他教學視頻：極客學園（需要會員，我沒有看）
網易雲課堂：從零玩轉HTML5前端+跨平台開發（基礎知識比較全）、web前端開發HTML+CSS精英班（講的比較有趣，容易入門）
我看的網易雲課堂的視頻，基礎比較全面，講解的也詳細。因為先學的慕課網，這個視頻我是跳着看的。
2、學習CSS布局
學習完上面的課程可以自己做靜態網頁了，不過免費課程里面對新增的flex布局講解的比較少，基本是一帶而過，學習flex布局可以看阮一峰的博客。個人感覺flex布局非常實用，像淘寶網的九宮格圖片（店鋪裝修里面一行顯示幾件商品）、移動端等，使用flex布局非常方便。
3、響應式布局
簡而言之，就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯網瀏覽而誕生的。
流式布局和彈性布局及配合媒體查詢 是 響應性布局的最好方式。
html/css知識點非常多，全部記的清清楚楚不太可行，有個印象之后，把這兩個網站當成字典，需要的時候翻一翻。
5、CSS預處理器：sass、less、stylus
學習一種即可，我用的stylus：stylus使用文檔總結：選擇器+變量+插值+運算符+混合書寫+方法
四、javascript
1、先看智能社的視頻教程：JavaScript從入門到精通 （個人覺得這個視頻講的最好，但基礎不夠全面）、從零玩轉JavaScript全棧開發（這個視頻基礎很全面）
2、js基礎學習之后可以做點小游戲，我參考下面的實戰視頻中的小蜜蜂游戲做了一個氣球射擊游戲。
網易雲課堂的實戰視頻教程：HTML5前端開發實戰
3、ES6：也稱為ECMAscipt2015，三大主流框架都是以ES6為基礎的，所以無論是深入學習JS，還是想學習基於數據的框架，這都是必學的。
4、書籍推薦：《JavaScript權威指南》（[美] David Flanagan 著，淘寶前端團隊 譯，機械工業出版社）
五、jQuery框架
1、就是封裝了一些JS的方法，jQuery官網下載JS文件
2、網易雲視頻教程：從零玩轉jQuery原理和Ajax
3、做點游戲練習一下，我做了狂拍灰太狼游戲。上面的實戰視頻里的英雄難過棍子關游戲就是用的jQuery。
4、自己做的小游戲源碼地址：初學小游戲源碼。
依公司要求自己寫的控件：基於jquery的可查詢多級select控件（可記錄歷史選擇）
六、vue框架
1、vue.js是一個構建數據驅動的 web 界面的漸進式框架。官網講解的比較詳細：Vue.js
不過，學vue之前要先學習ES2015(ES6),看這篇博客就夠了（有上、下兩篇）：ES6/ES2015核心內容（上）、ES6/ES2015核心內容（下）
如果學過ES6，可以直接跳過
2、網易雲視頻教程：兩個視頻雖然是不同人講的，但重疊的不算多，知識互補
（1）建議先看從零玩轉Vue2.x與大項目實戰（從ES6常用知識點講起，如果沒有學習ES6可以從頭看起，此視頻只講了基礎）
（2）再看Vue2.0小白入門教程（直接講運用，要想知道為什么這么用還是得先學習ES6，但這里有講到搭建腳手架，工作中做項目一般用的是腳手架）
（3）Vue實戰：Vue實戰項目(在線翻譯)
(4) 單知識博客：深入理解vue中的slot與slot-scope
3、vuex：vue的狀態管理模式，最大的實用點是解決非父子組件之間的通信問題
vuex最簡單、最詳細的入門文檔、vuex2.0 基本使用(1) --- state、完全掌握 Vuex 圖文視頻教程
4、axios（封裝ajax）和mockjs（模擬后台數據）
（1）mock大法好、Mock.js使用、如何在Vue項目中使用Mockjs，模擬接口返回的數據，實現前后端分離獨立開發、vue項目中使用mockjs模擬接口返回數據
（2）Axios 中文說明，博客：Axios使用文檔總結、axios
5、ElementUI:一套為開發者、設計師和產品經理准備的基於 Vue 2.0 的桌面端組件庫; Iview:比較全的ui組件庫，有基於vue.js的，有專門移動端用的，也有小程序的；
6、案例：使用vuejs2.0和element-ui 搭建的一個后台管理界面、Vue2.0 + Element-UI + WebAPI實踐：簡易個人記賬系統、vue2.0實現注冊登錄步驟詳解
七、Node
1、NPM下載東西，具體安裝使用看的這篇博客：安裝Node.js、npm和環境變量的配置；node中文網
2、視頻資源：Node.js進階教程第一步(基礎篇)（免費資源）
3、項目經驗：全棧02 Koa2+Vue2+MySQL 全棧的入門嘗試
八、打包工具（Webpack）
代碼優化打包是必不可少的，上線前將代碼打包，減少代碼體積，提高速度，最出名的就是webpack
1、webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器。webpack官網
2、JSCompress: 合並壓縮代碼的軟件，老項目優化用的這個。JSCompress官網
九、Java