前端学习路径

基础知识

• 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