前端學習路徑

什麼是前端工程師？

總而言之前端工程師就是運用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

P.S.評論區這段時間老有人問學完上面這些內容要多久。現在的年輕人真是……

數學能學完嗎？物理能學完嗎？再退一步，美容美髮、烹飪料理能學完嗎？為什麼老試圖學完一門知識呢？

列出上面這個列表不是為了嚇唬誰，而是給大家的學習提供一個可以參考的路徑。

話說回來，學過一遍（不要妄圖學完，書能讀完嗎）上述的所有內容其實用不了多久，但時間長短更多的還是和個人有關。

推薦閱讀：