初入前端領域

HTML、CSS：看著自己做的第一個簡單網頁，心想哼哼不過如此

jQuery、bootstrap：喔喔 ~ 我站在巨人的肩膀上，要起飛囉！抓緊了

Javascript、RWD：這三小？ 沒關係，應該不重要，會用jQuery、bootstrap就好啦

npm、React、Angular、sass、less、gulp、grunt、webpack、browserify、bower、Yeoman、JSON、XML、DOM、ESlint、JSLint、ES6、JSX、CoffeeScript、Typescript、Bebal、requireJS/AMD、CommonJS、RESTful API、ImmutableJS、Flux/Redux、Enzyme、Mocha(BDD/TDD)、 .....、git：..............................

阿阿阿阿阿阿阿阿阿阿阿阿阿阿.........(崩潰逃走)

你該做的第一步：掌握基礎

基礎： 學習 HTML、CSS、Javascript (這三兄弟是基礎中的基礎，分別掌管結構、樣式、互動)
應用： 學會如何運用jQuery、理解bootstrap的原始碼(從中學習如何實作RWD與良好的CSS開發架構)

你該做的第二步：了解流程架構

當參與較大型的專案時，通常會建構比較完整的開發流程架構
主要是為了提昇開發效率與增加維護性，而開始選擇使用前端JS框架
了解流程架構，能幫助我們知道什麼時候該使用什麼樣的工具，大致上的流程架構如下：

• 建立網站骨架 => 使用[ 建模工具 ]
• 安裝框架 => 使用[ 安裝類工具 ]安裝[ 前端JS框架 ]
• 選擇匹配框架或個人偏好的JS及CSS撰寫語言 => 使用[ 語言工具 ]
• 將撰寫的語言轉譯成當下各家瀏覽器皆支援的JS版本 => 使用[ 轉譯工具 ]
• 管理程式碼品質，讓參與開發者遵循相同規範 => 遵循[ 團隊程式碼規範 ]
• 模組化技術打包，封裝JS程式碼 => 使用[ 模組打包及管理工具 ]
• 自動化工作流程，提升開發效率 => 使用[ 自動化Task Running工具 ]
• 套件安裝與升級管理 => 使用[ 套件管理工具 ]
• 導入程式碼版本管理工具，與其他開發者協作 => 使用[ 程式碼版本管理工具 ]
• 更進一步，導入前端測試以修復缺陷 => 使用[ 測試工具 ]

你該做的第三步：釐清用途

相信有一部分的新手可能跟我一樣，剛開始就被前面那一長串看似數不盡的專有名詞給嚇到
其實你只要釐清它們各是屬於何種工具？主要的用途是什麼？再回頭搭配流程架構一起看，也就沒那麼可怕了

• Yeoman => [ 建模工具 ]
• npm => [ 安裝類工具 ]
• React、Angular => [ 前端JS框架 ]
• Sass、Less => [ CSS預處理器 ]
• ES6、JSX、CoffeeScript、TypeScript => [ 語言工具 ]
• Babel => [ 轉譯工具 ]
• ESlint、JSLint => [ 團隊程式碼規範 ]
• webpack、browserify => [ 模組打包及管理工具 ]
• gulp、grunt => [ 自動化Task Running工具 ]
• bower => [ 套件管理工具 ]
• Git => [ 程式碼版本管理工具 ]
• Enzyme、Mocha(BDD/TDD) => [ 測試工具 ]
• requireJS/AMD、CommonJS => [ 模組化規格 ]
• RESTful API => [ API設計原則 ]
• ImmutableJS => [ 不可變資料結構函式庫 ]
• Flux/Redux => [ 前端資料處理流程 ]

你該做的第四步：掌握方向

花點時間好好利用goole搜尋一些前輩高手的文章，你大概就能掌握何種工具是近一兩年的主流大宗，最新的語言標準是什麼，哪些框架會是未來的趨勢，若同時有兩種相似功能的工具可挑選，就自己親自去做簡單的嘗試，好好挑選、去蕪存菁、擇一學習，然後把結果整理成學習清單，你就會對該學習哪些框架、工具、語言、標準有一個大略的方向，或許沒辦法一次就完全到位，沒關係，在不斷修正清單的同時，自己想走的方向也會越來越清楚。

你該做的第五步：精進技術

理想很豐滿，現實卻很骨感，想要短時間內精通前端所有工具是不切實際的(就像我一樣)，你最好選擇一樣深入精進，徹底了解其中運作原理，學習新技術或工具時才有足夠深的底子來觸類旁通。