前端學習路徑

什麼是前端工程師？

總而言之前端工程師就是運用HTML/CSS/JavaScript等Web技術，在工作中配合設計師實現使用者介面，和後端工程師進行資料對接，完成Web應用開發的職位。

開發工具

設計軟體

前端工程師最首要的任務就是把設計師的設計圖切好並翻譯成程式碼，所以我們要學習一些設計軟體的基礎操作和切圖方法。

• Photoshop 運用最廣泛的設計軟體，大部分人都在使用它，很有必要學習一下
  • 前端工程師必備的PS技能－切圖篇
• Sketch 輕量且功能強大，切圖迅速高效，為UI設計而生的Mac App
  • Sketch切圖教學

編輯器

工欲善其事，必先利其器。可以用的編輯器和IDE很多，在這裡我只推薦最棒的兩個。

• Sublime text 最性感的編輯器，搭配插件各種好用
  • 配置與使用方法
• Webstorm 功能強大，學生可以免費使用的前端開發IDE

程式碼管理

不光要學會寫程式碼，也要學會管理你的程式碼。在工作中你可能會遇到需要自己部署程式碼的情況；不停地修改迭代重構，當然也需要你掌握版本控制軟體。

• Linux 你需要學會在命令列中開啟移動複製檔案等最基本的操作
  • Linux最常使用的20條指令
  • 鳥哥的linux私家菜－基礎篇
• Git 寫程式碼一定會用到的版本控制軟體，入門很快就能學會
  • 猴子都能懂的Git入門

測試工具

預覽和調試必不可少，編寫前端程式碼的大部分時間都是在編輯器和瀏覽器之間切來切去。

• Chrome Dev Tools 谷歌瀏覽器開發工具，想要預覽調試你的前端頁面必須在這裡啦

 

基礎知識

• HTML
  • MDN的HTML入門
  • HTML30分鐘快速入門
• CSS
  • MDN的CSS入門教學
  • 學習CSS版面
• JavaScript
  • JavaScript菜鳥教學
  • 慕課網JavaScript入門篇
• Web
  • 當你在瀏覽器中輸入google.com並按下回車後發生了什麼
  • 互聯網協定入門

中級知識

• HTML5
  • MDN的HTML5入門教學
  • 網易雲課堂HTML5入門
• CSS3
  • CSS3菜鳥教學
  • Gitbook的CSS3教學
• Style Guide
  • 騰訊alloteam前端代碼規範
  • 百度ecomfe前端程式碼規範
  • Google HTML/CSS Style Guide
  • Google JavaScript Style Guide
• Responsive Design
  • 響應式設計指南
  • 自適應網頁設計－阮一峰
  • 什麼是響應式web設計？怎樣進行？
• Web Animation
  • CSS動畫
  • Canvas動畫教學
  • Learn to Create Animations in JavaScript
• Bootstrap
  • Bootstrap菜鳥教學
  • 慕課網玩Bootstrap
• jQuery
  • jQuery菜鳥教學
  • 慕課網jQuery基礎
• Ajax
  • jQuery Ajax快速入門
  • jQuery Ajax全解析

高級知識

• w3c標準
  • Web Platform Docs
• ECMA6
  • 阮一峰ECMAScript6入門
• 測驗
  
  • FEX前端自動化測試探索
  • 測試框架Mocha實例教學
  • Karma和Jasmine自動化單元測試
• 自動化建置
  
  • 流式自動化建置工具Gulp
  • 前端工程建置工具fis
  • Web專案腳手架產生工具Yeoman
    • 用Yeoman和AngularJS做Web應用
• 模組/套件管理
  
  • npm
    • npm使用介紹
    • 快速建立 Node.js 開發環境以及加速 npm
  • Sea.js
    • 5分鐘上手Sea.js
  • RequireJS
  • ES6模組
• 預處理器
  
  • Haml
    • Tutorial
    • HTML代碼簡寫法：Emmet與Haml
  • Sass
    • Sass入門
  • TypeScript
    • TypeScript Handbook（中文版）
• 框架
  • React
    • 入門實例教學
  • Vue
    • vue.js教學
  • Angular

伺服器端

• Nodejs
  • Node入門
  • 7天學會NodeJS
• MongoDB
  • NodeJS與MongoDB互動

技能圖譜

• StuQ技能圖譜
• Frontend Knowledge Structure

線上資源

• 大前端導航
• Frontend Stuff
• Frontend directory
• Frontend Interview Questions

線上教學

• 菜鳥教學
• 極客學院Wiki
• Mozilla開發者網路
• front-end-web-development on Treehouse
• Learn to Code Advanced HTML/CSS

線上書籍

• Front-end Developer HandBook
• Front-end Database
• Frontend Notebook

推薦書目

• 基礎
  
  • 深入淺出HTML與CSS、XHTML
  • HTML & CSS設計與建構網站
  • Pro Git中文版
  • 鳥哥的linux私家菜
• 中級
  
  • Head First HTML5 Programming
  • JavaScript權威指南
  • JavaScript語言精粹
  • JavaScript & jQuery互動式Web前端開發
  • 深入淺出Ajax
• 高級
  
  • JavaScript高階程式設計
  • HTML5高階程式設計
  • CSS權威指南
  • 深入淺出Node.js