前端學習路徑

基礎知識

• 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