什么是前端工程师？

总而言之前端工程师就是运用HTML/CSS/JavaScript等Web技术，在工作中配合设计师实现用户界面，和后端工程师进行数据对接，完成Web应用开发的职位。

阅读更多有关前端工程师

开发工具

设计软件

前端工程师最首要的任务就是把设计师的设计图切好并翻译成代码，所以我们要学习一些设计软件的基础操作和切图方法。

Photoshop 运用最广泛的设计软件，大部分人都在用它，很有必要学习一下前端工程师必备的PS技能——切图篇

Sketch 轻量且功能强大，切图迅速高效，为UI设计而生的Mac AppSketch切图教程

编辑器

工欲善其事，必先利其器。可以用的编辑器和IDE有很多，在这里我只推荐最棒的两个。

Sublime text 最性感的编辑器，搭配插件各种好用配置和使用方法

Webstorm 功能强大，学生可以免费用的前端开发IDE

代码管理

不光要学会写代码，也要学会管理你的代码。在工作中你可能会遇到需要自己部署代码的情况；不停地修改迭代重构，当然也需要你掌握版本控制软件。

Linux 你需要学会在命令行打开移动复制文件等最基本的操作Linux最常用的20条命令鸟哥的linux私房菜——基础篇

Git 写代码一定会用到的版本控制软件，入门很快就能学会猴子都能懂的Git入门

测试工具

预览和调试必不可少，编写前端代码的大部分时间都是在编辑器和浏览器之间切来切去。

Chrome Dev Tools 谷歌浏览器开发工具，想要预览调试你的前端页面必须在这里啦

基础知识

HTMLMDN的HTML入门HTML30分钟快速入门

CSSMDN的CSS入门教程学习CSS布局

JavaScriptJavaScript菜鸟教程慕课网JavaScript入门篇

Web当你在浏览器中输入google.com并按下回车后发生了什么互联网协议入门

中级知识

HTML5MDN的HTML5入门教程网易云课堂HTML5入门

CSS3CSS3菜鸟教程Gitbook的CSS3教程

Style Guide腾讯alloteam前端代码规范百度ecomfe前端代码规范Google HTML/CSS Style GuideGoogle JavaScript Style Guide

Responsive Design响应式设计指南自适应网页设计——阮一峰什么是响应式web设计？怎样进行？

Web AnimationCSS动画Canvas动画教程Learn to Create Animations in JavaScript

BootstrapBootstrap菜鸟教程慕课网玩转Bootstrap

jQueryjQuery菜鸟教程慕课网jQuery基础

AjaxjQuery Ajax快速入门jQuery Ajax全解析

高级知识

w3c标准Web Platform Docs

ECMA6阮一峰ECMAScript6入门

测试

FEX前端自动化测试探索测试框架Mocha实例教程Karma和Jasmine自动化单元测试

自动化构建

流式自动化构建工具Gulp前端工程构建工具fisWeb项目脚手架生成工具Yeoman用Yeoman和AngularJS做Web应用

模块/包管理

npmnpm使用介绍快速搭建 Node.js 开发环境以及加速 npm

Sea.js5分钟上手Sea.js

RequireJSES6模块

预处理器

HamlTutorialHTML代码简写法：Emmet和Haml

SassSass入门

TypeScriptTypeScript Handbook（中文版）

框架React入门实例教程

Vuevue.js教程

Angular

服务器端

NodejsNode入门7天学会NodeJS

MongoDBNodeJS与MongoDB交互

技能图谱

StuQ技能图谱Frontend Knowledge Structure

在线资源

大前端导航Frontend StuffFrontend directoryFrontend Interview Questions

在线教程

菜鸟教程极客学院WikiMozilla开发者网络front-end-web-development on TreehouseLearn to Code Advanced HTML/CSS

在线书籍

Front-end Developer HandBookFront-end DatabaseFrontend Notebook

推荐书目

基础

深入浅出HTML与CSS、XHTMLHTML & CSS设计与构建网站Pro Git中文版鸟哥的linux私房菜

中级

Head First HTML5 ProgrammingJavaScript权威指南JavaScript语言精粹JavaScript & jQuery交互式Web前端开发深入浅出Ajax

高级

JavaScript高级程序设计HTML5高级程序设计CSS权威指南深入浅出Node.js