前端学习路径

zhanghong

什么是前端工程师？

总而言之前端工程师就是运用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