如何入门前端，成为一名前端工程师，前端大牛学习路径和资源集合

GitHub 上有一个很有名的 Roadmap：https://github.com/kamranahmedse/developer-roadmap

想成为一名前端大牛，按照这个路线学习，足以帮助你快速成长。

image

从一名小白开始入门前端，到前端进阶，再到成长为技术大牛。

首先学习 HTML、CSS 和 JavaScript 的基础知识。你可以在以下几个网站学习这些基础知识：

W3school：http://www.w3school.com.cn/

MDN 官方教程：https://developer.mozilla.org/zh-CN/

W3C 官方文档：https://www.w3.org/

freecodecamp 学习网站：https://www.freecodecamp.com/

之后你就需要学习一些包管理，包括 npm，yarn 等等。

接下来学习 CSS 预处理，CSS 的一些框架的使用，最常见的就是 Bootstrap 等。以及 CSS Architecture。

这里推荐一些好用的前端库：

• Sass: CSS的扩展，可以声明变量，引入模块，嵌套属性等等。
• Less: 为CSS添加声明变量，样式模块，命名空间，继承等特性。
• Stylus: 写CSS再也不用写烦人的括号啦～
• Bootstrap: 全世界最流行的响应式前端框架。
• Foundation: 提供了很多模版，针对网站、移动端、邮件提供了很多好用的模块和样式。
• Semantic UI: 个人非常喜欢的一个前端框架，样式非常好看，更重要的是就像它语义UI的名称一样，类命名特别友好，写网页就像和人说话一样。
• uikit: 漂亮、可定制，即将发布uikit3版本，感兴趣可以试试看。

之后学习一些构建工具及其他工具的使用，并尽量明确其原理。包括但不限于以下工具：

• Grunt: JavaScript自动化工具。
• Gulp: 个人感觉是最好用的自动化构建工具。
• webpack：模块化加载构建一切，CSS/JS连图片都可以
• npm: NPM虽好，不要太依赖袄。
• Bower: 前端框架包管理工具，各类框架和库一键安装。

之后进行前端框架的选择和学习，包括但不限于以下框架：

• Vue：广泛使用的前端框架，认真学。
• React：也是一个广泛使用的前端框架，最好把这个和 Vue 都认真学习好。
• jQuery: 方便快捷，功能强大全面，居家旅行必备，近乎JS的替代品，你可以不会js，但是不能不会jQuery。
• BackBoneJS: 模型、视图、集合、事件，让你的前端代码更有框架感。
• D3.js: 数据可视化必学必会，只有你想不出来的，没有D3画不出来的。
• React: 学会React，再学学React-native，你就能从一个前端化身Web app工程师、IOS/Andorid开发者、桌面应用工程师……
• jQuery UI: 几行代码就能写一个带动画带ajax的Web应用。
• jQuery Mobile: 移动端专用js开发框架，和上面的类似袄。
• Underscore.js: 非入侵式框架，提供了众多有用的函数方法，弥补jQuery的不足。
• Moment.js: 原生的JS显示输出日期时间真的很痛苦，Moment为你解决了一切啦～
• Lodash: 模块化且高效，lodash和underscore很相似。
• Ruby on Rails: Ruby on Rails 是一款用ruby语言编写Web应用的MVC框架，github就是用它写的！
• AngularJS: Google主导的Web开发框架，数据绑定、MVVM，很可惜被后来更灵活的React、Vue等框架抢去了风头。
• Ember.js: 用来开发单页Web应用的JS前端MVC框架。
• Express: Node.js上的Web框架，搭建网站或API服务只要一秒钟！
• Meteor: JS全端框架，是的，你只需要学习JavaScript一门语言，就可以完成Web应用前后端、数据库的开发。
• Django: Python的Web框架，人生苦短，请用Python.
• Flask: Python的Web框架，据说只要学好flask就能随意找到好工作？
• ASP.net: 老一辈人的最爱。
• Laravel: 最优雅性感的PHP Web框架，好用到不能再好用，优雅到不能再优雅，毕竟PHP是全世界最好的语言嘛。
• Phalcon: 用C语言扩展的，据说是最快的PHP框架。

框架和知识学习好了，要学习如何进行测试，主要包括这部分内容：

image

之后要学习 PWA，这是以后的发展趋势：

image

之后学习一些更深入的内容：

image

当然，学习无止境，最重要的是持续学习，加油吧！

之前看到一篇内容讲：前端学习路径

很符合本回答图中所示的学习路径：大家可以看考着来学习，下面是学习路线和学习资源，有需要的请自取。

开发工具

设计软件

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

• 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