前台大牛学习路径和资源集合，小白入门必看（超级长，建议收藏）

GitHub 上有一个很有名的 Roadmap： kamranahmedse/developer-roadmap

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

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

首先学习 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框架。

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

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

之后学习少量更深入的内容：

下面是学习路线和学习资源，有需要的请自取。

入门类

• 前台入门教程
• 瘳雪峰的Javascript教程
• 前台工程师必备的PS技能——切图篇
• 结合个人经历总结的前台入门方法
• 作者的简书地址
• 作者的CSDN地址
• HTML 修真录——初识”异界”
• HTML 修真录——“深渊三君王”
• HTML 基础入门
• HTML 基础提升
• CSS 基础入门
• CSS 盒模型
• CSS 浮动
• CSS 定位

HTML 5 部分

• 深入了解HTML5标签
• 如何写出高效率的HTML
• HTML meta标签总结与属性使用详情
• 戏说HTML5
• 编写高质量的 HTML 代码
• 如何处理 img 标签上下出现的间隙
• 五分钟学会 Canvas 基础（一）
• 五分钟学会 Canvas 基础（二）
• 模仿 LED 灯的滚动文字效果
• 关于 Canvas 的兄弟 SVG 的基础教程
• HTML 5 动态效果制作方法整理
• Canvas 效果实例
• 细数前台中的少量黑科技
• 前台 Meta 用法大汇总
• HTML5新特性

CSS 3 部分

• CSS 语法参考
• 如何编写可维护的CSS
• CSS3动画手册
• 腾讯css3动画制作工具
• 志爷css小工具集合
• css3 js 移动大杂烩
• bouncejs 触摸库
• animate.css
• 全局CSS的终结
• browserhacks
• CSS3其余属性
• 弹性盒模型详解
• CSS3动画
• 2D变形&3D变形
• 蒙版mask

JQuery

• YOU MIGHT NOT NEED JQUERY
• jQuery API 中文文档
• hemin 在线版
• css88 jq api
• css88 jqui api
• 学习jquery
• jquery 源码查找
• Web前台资源汇总(jQuery,Js,Css3等)

Angular JS

• Angular.js 的少量学习资源
• angularjs中文社区
• Angularjs源码学习
• Angularjs源码学习
• angular对bootstrap的封装
• angularjs + nodejs
• 吕大豹 Angularjs
• AngularJS 最佳实践
• Angular的少量扩展指令
• Angular数据绑定原理
• 少量扩展Angular UI组件
• Ember和AngularJS的性能测试
• 带你走近AngularJS – 基本功能详情
• Angularjs开发指南
• Angularjs学习
• 不要带着jQuery的思维去学习AngularJS
• angularjs 学习笔记
• angularjs 开发指南
• angularjs 英文资料
• angular bootstrap
• angular jq mobile
• angular ui
• 整合jQuery Mobile+AngularJS经验谈
• 有jQuery背景，该如何用AngularJS编程思想
• AngularJS在线教程
• angular学习笔记

React

• react.js中文论坛
• react.js官方网址
• react.js官方文档
• react.jsmaterialUI
• react.jsTouchstoneJSUI
• react.jsamazeuiUI
• React入门实例教程-阮一峰
• ReactNative中文版
• Webpack和React小书-前台乱炖
• Webpack和React小书-gitbook
• webpack
• Webpack，101入门体验
• webpack入门教程
• 基于webpack搭建前台工程处理方案探究

Vue

• Vue2.0
• Vue
• Vue Router
• Vuex
• Vue-Cli
• Vue 论坛
• Vue 聊天室
• Vue 入门指南
• Vue 的少量资源索引
• awesome-vue
• vue-syntax-highlight

Node JS

• Node.js 包教不包会
• 一个nodejs博客
• 【NodeJS 学习笔记04】新闻发布系统
• 过年7天乐，学nodejs 也快乐
• 七天学会NodeJS
• Nodejs学习笔记（二）— 事件模块
• nodejs入门
• angularjs nodejs
• 从零开始nodejs系列文章
• 了解nodejs
• nodejs事件轮询
• node入门
• nodejs cms
• Node初学者入门，一本全面的NodeJS教程
• NodeJS的代码调试和性能调优

JS Template

• template-chooser
• artTemplate
• tomdjs
• 淘宝模板juicer模板
• Fxtpl v1.0 繁星前台模板引擎
• laytpl
• mozilla – nunjucks
• Juicer
• dustjs
• etpl

手机端

• fastclick
• no-click-delay
• 【敏捷开发】Android团队开发规范
• Android 开发规范与应用
• ionic

手机端 API

• 99手机端知识集合
• 手机端前台开发知识库
• 移动前台的少量坑和处理方法（外观体现）
• 【原】移动web资源整理
• zepto 1.0 中文手册
• zepto 1.0 中文手册
• zepto 1.1.2
• zepto 中文注释
• jqmobile 手册
• 移动浏览器开发集合
• 移动开发大杂烩

综合 API

• javascripting
• 各种流行库搜索
• runoob.com-包含各种API集合
• 开源中国在线API文档合集
• devdocs(英文综合API网站)

其余 API

• HTTP API 设计指南
• javascript流行库汇总
• 验证api
• underscore 中文手册
• underscore源码分析
• underscore源码分析-亚里士朱德的博客
• underscrejs en api
• lodash – underscore的代替品
• ext4api
• qwrap手册
• 缓动函数
• svg 中文参考
• svg mdn参考
• svg 导出 canvas
• svg 导出 png
• ai-to-svg
• localStorage 库

服务器端

• Nodejs
• Node入门
• 7天学会NodeJS
• MongoDB
• NodeJS与MongoDB交互

技能图谱

• StuQ技能图谱
• Frontend Knowledge Structure

在线资源

• 大前台导航
• Frontend Stuff
• Frontend directory
• Frontend Interview Questions

在线书籍

• 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

开发工具

设计软件

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

• Photoshop 运用最广泛的设计软件，大部分人都在用它，很有必要学习一下

• 前台工程师必备的PS技能——切图篇

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

• Sketch切图教程

编辑器

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

• Sublime text 最性感的编辑器，搭配插件各种好用

• 配置和使用方法

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

代码管理

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

• Linux 你需要学会在命令行打开移动复制文件等最基本的操作

• Linux最常用的20条命令

• 鸟哥的linux私房菜——基础篇

• Git 写代码肯定会用到的版本控制软件，入门很快就能学会

• 猴子都能懂的Git入门

测试工具

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

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

最后

说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。

我可以将最近整理的前台面试题免费分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等，还在持续整理升级中，希望大家都能找到心仪的工作。

有需要的朋友点击这里免费领取题目+解析PDF。

篇幅有限，仅展现部分截图篇幅有限，仅展现部分截图篇幅有限，仅展现部分截图

点击这里免费领取题目+解析PDF。