前端大牛们都学过哪些东西？

xiu12

作者：秦墨鱼
链接：http://www.zhihu.com/question/22146521/answer/94842197
来源：知乎
著作权归作者所有，转载请联系作者获得授权。

学过的东西杂而不精，算不得大牛。带过前端团队，也算是有几年前端负责人的经验。
随着这几年前端node.js,react,Angularjs等技术新起，越来越多从之前单纯的前端开发到前端全栈开发，技术之多，之有趣，前端实在是繁华得很。
但是目前大多数情况下的前端开发，主要还是在web开发上，所使用的技术无非就是html,css,javascript。所以我觉得这个基础是很有必要的，把html,css,javascript学精通，已经是小神级别（我就很羡慕那些可以写一手好看的js的前端工程师）。
进入下一个阶段，优化！不管是前端，后端，任何一个技术方向，都实现功能，好的代码结构，接下来就是优化。你需要开始考虑页面的加载速度，代码压缩，图片压缩，dom节点的加载顺序，你会发现进入了新的境地。
作为前端负责人：
1 前端开发的能力
2 技术选型
3 管理团队
4 前端团队文化塑造
本回答只从技术角度阐述。
前端开发的能力，把html,css,javascript学好，你已经没有问题啦。
技术的选型，这对负责人的前端技术视野，甚至后端技术也有要求，还需要考虑团队的整体技术能力。
转一个资源汇总，对技术视野或有帮助（转自 前端资源教程 侵权删）
-----------————————————————————————
感谢知友，有好的前端内容告知我一下，列表持续更新

• 　　综合类
  
  
  
  • 前端知识体系
    
  • 前端知识结构
    
  • Web前端开发大系概览
    
  • Web前端开发大系概览-中文版
    
  • Web Front-end Stack v2.2
    
  • 免费的编程中文书籍索引
    
  • 前端书籍
    
  • 前端免费书籍大全
    
  • 前端知识体系
    
  • 免费的编程中文书籍索引
    
  • 智能社 - 精通JavaScript开发
    
  • 重新介绍 JavaScript（JS 教程）
    
  • 麻省理工学院公开课：计算机科学及编程导论
    
  • JavaScript中的this陷阱的最全收集–没有之一
    
  • JS函数式编程指南
    
  • JavaScript Promise迷你书（中文版）
    
  • 腾讯移动Web前端知识库
    
  • Front-End-Develop-Guide 前端开发指南
    
  • 前端开发笔记本
    
  • 大前端工具集 - 聂微东
    
  • 前端开发者手册
    
  
  
• 　　入门类
  
  
  
  • 前端入门教程
    
  • 瘳雪峰的Javascript教程
    
  • jQuery基础教程
    
  • 前端工程师必备的PS技能——切图篇
    
  • 结合个人经历总结的前端入门方法
    
  
  
• 　　效果类
  
  
  
  • 弹出层
    
  • 焦点图轮播特效
    
  
  
• 　　工具类
  
  
  
  • css sprite 雪碧图制作
    
  • 版本控制入门 – 搬进 Github
    
  • Grunt-beginner前端自动化工具
    
  
  
• 　　慕课专题
  
  
  
  • 张鑫旭 - 慕课系列
    
  • lyn - 慕课系列
    
  • 艾伦 - 慕课系列
    
  • 碧仔 - Hello，移动WEB
    
  
  
• 　　周报类
  
  
  
  • 平安科技移动开发二队技术周报
    
  
  

六. API:1. 总目录

• 　　开发中心
  
  
  
  • mozilla js参考
    
  • chrome开发中心（chrome的内核已转向blink）
    
  • safari开发中心
    
  • microsoft js参考
    
  • js秘密花园
    
  • js秘密花园
    
  • w3help 综合Bug集合网站
    
  
  
• 　　综合搜索
  
  
  
  • javascripting
    
  • 各种流行库搜索
    
  
  
• 　　综合API
  
  
  
  • runoob.com-包含各种API集合
    
  • 开源中国在线API文档合集
    
  • devdocs 英文综合API网站
    
  
  

2. jQuery

• jQuery API 中文文档
  
• hemin 在线版
  
• css88 jq api
  
• css88 jqui api
  
• 学习jquery
  
• jquery 源码查找
  

3. Ecmascript

• Understanding ECMAScript 6 - Nicholas C. Zakas
  
• exploring-es6
  
• exploring-es6翻译
  
• exploring-es6翻译后预览
  
• 阮一峰 es6
  
• 阮一峰 Javascript
  
• ECMA-262，第 5 版
  
• es5
  

4. Js template

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

5. 弹出层

• artDialog 最新版
  
• artDialog 文档
  
• google code 下载地址
  
• 贤心弹出层
  
• 响应式用户交互组件库
  
• sweetalert-有css3动画弹出层
  

6. CSS

• CSS 语法参考
  
• CSS3动画手册
  
• 腾讯css3动画制作工具
  
• 志爷css小工具集合
  
• css3 js 移动大杂烩
  
• bouncejs 触摸库
  
• css3 按钮动画
  
• animate.css
  
• 全局CSS的终结(狗带) [译]
  

7. Angularjs

• 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学习笔记
  

8. React

• react.js 中文论坛
  
• react.js 官方网址
  
• react.js 官方文档
  
• react.js material UI
  
• react.js TouchstoneJS UI
  
• react.js amazeui UI
  
• React 入门实例教程 - 阮一峰
  
• React Native 中文版
  
• Webpack 和 React 小书 - 前端乱炖
  
• Webpack 和 React 小书 - gitbook
  
• webpack
  
• Webpack，101入门体验
  
• webpack入门教程
  
• 基于webpack搭建前端工程解决方案探索
  
• React原创实战视频教程
  

9. 移动端API

• API
  
  
  
  • 99移动端知识集合
    
  • 移动端前端开发知识库
    
  • 移动前端的一些坑和解决方法（外观表现）
    
  • 【原】移动web资源整理
    
  • zepto 1.0 中文手册
    
  • zepto 1.0 中文手册
    
  • zepto 1.1.2
    
  • zepto 中文注释
    
  • jqmobile 手册
    
  • 移动浏览器开发集合
    
  • 移动开发大杂烩
    
  • 微信webview中的一些问题
    
  
  
• 框架
  
  
  
  • 特色的HTML框架可以创建精美的iOS应用
    
  • 淘宝SUI
    
  
  

10. avalon

• avalonjs
  
• Avalon新一代UI库： OniUI
  
• avalon.oniui-基于avalon的组件库
  
• 前端资源教程
  

11. Requriejs

• Javascript模块化编程（一）：模块的写法
  
• Javascript模块化编程（二）：AMD规范
  
• Javascript模块化编程（三）：require.js的用法
  
• RequireJS入门（一）
  
• RequireJS入门（二）
  
• RequireJS进阶（三）
  
• requrie源码学习
  
• requrie 入门指南
  
• requrieJS 学习笔记
  
• requriejs 其一
  
• require backbone结合
  

12. Seajs

• seajs
  
• seajs 中文手册
  

13. Less,sass

• sass
  
• sass教程-sass中国
  
• Sass 中文文档
  
• less
  

14. Markdown

• Markdown 语法说明 (简体中文版)
  
• markdown入门参考
  
• gitbook 国外的在线markdown可编辑成书
  
• mdeditor 一款国内的在线markdown编辑器
  
• stackedit 国外的在线markdown编辑器，功能强大，同步云盘
  
• mditor 一款轻量级的markdown编辑器
  
• lepture-editor
  
• markdown-editor
  

15. D3

• d3 Tutorials
  
• Gallery
  
• lofter
  
• iteye
  
• ruanyifeng
  

16. 兼容性

• esma 兼容列表
  
• W3C CSS验证服务
  
• caniuse
  
• csscreator
  
• microsoft
  
• 在线测兼容-移动端
  
• emulators
  

17. UI相关

• bootcss
  
• MetroUICSS
  
• semantic
  
• Buttons
  
• kitecss
  
• pintuer
  
• amazeui
  
• worldhello
  
• linuxtoy
  
• gitmagic
  
• rogerdudler
  
• gitref
  
• book
  
• gogojimmy
  

18. HTTP

• HTTP API 设计指南
  

19. 其它API

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

20. 图表类

• Highcharts 中文API
  
• Highcharts 英文API
  
• ECharts 百度的图表软件
  
• 高德地图
  
• 开源的矢量图脚本框架
  
• svg 地图
  

21. vue

• Vue
  
• Vue 论坛
  
• Vue 入门指南
  
• Vue 的一些资源索引
  
• 前端资源教程
  

21. 正则

• JS正则表达式元字符
  
• 正则表达式30分钟入门教程
  
• MDN-正则表达式
  
• ruanyifeng - RegExp对象
  
• 小胡子哥 - 进阶正则表达式
  
• is.js
  
• 正则在线测试
  
• 前端资源教程
  

22. ionic

• ionic
  

23. 其它

• Mock.js 是一款模拟数据生成器
  

七. 开发规范

• 　　前端
  
  
  
  • 通过分析github代码库总结出来的工程师代码书写习惯
    
  • HTML&CSS编码规范 by @mdo
    
  • 团队合作的css命名规范-腾讯AlloyTeam前端团队
    
  • 前端编码规范之js - by yuwenhui
    
  • 前端编码规范之js - by 李靖
    
  • 前端开发规范手册
    
  • Airbnb JavaScript 编码规范（简体中文版）
    
  • AMD与CMD规范的区别
    
  • AMD与CMD规范的区别
    
  • KISSY 源码规范
    
  • bt编码规范
    
  • 规范加强版
    
  • 前端代码规范 及 最佳实践
    
  • 百度前端规范
    
  • 百度前端规范
    
  • 百度前端规范
    
  • ECMAScript6 编码规范–广发证券前端团队
    
  • JavaScript 风格指南/编码规范（Airbnb公司版）
    
  • 网易前端开发规范
    
  • css模块
    
  • 前端规范资源列表
    
  
  
• 　　PHP
  
  
  
  • 最流行的PHP 代码规范
    
  • 最流行的PHP 代码规范
    
  
  
• 　　Android
  
  
  
  • 【敏捷开发】Android团队开发规范
    
  • Android 开发规范与应用
    
  
  

八. 其它收集1. 各大公司开源项目

• Facebook Projects
  
• 百度web前端研发部
  
• 百度EFE
  
• 百度github
  
• alloyteam
  
• alloyteam-github
  
• alloyteam-AlloyGameEngine
  
• AlloyDesigner 即时修改，即时保存，设计稿较正，其它开发辅助工具
  
• H5交互页编辑器AEditor介绍 H5动画交互页开发的工具介绍
  
• AEditor H5动画交互页开发的工具
  
• maka
  
• 值得订阅的weekly
  
• 腾讯html5
  
• 奇舞团开源项目
  
• Qunar UED
  

2. Javascript

• 　　常用
  
  
  
  • ieBetter.js-让IE6-IE8拥有IE9+,Chrome等浏览器特性
    
  • 模拟键盘
    
  • 拼音
    
  • 中国个人身份证号验证
    
  
  
• 　　算法
  
  
  
  • 数据结构与算法 JavaScript 描述. 章节练习
    
  • 常见排序算法（JS版）
    
  • 经典排序
    
  • 常见排序算法-js版本
    
  • JavaScript 算法与数据结构 精华集
    
  • 面试常考算法题精讲
    
  • 前端资源教程
    
  
  
• 　　移动端
  
  
  
  • fastclick
    
  • no-click-delay
    
  
  
• 　　JSON
  
  
  
  • 模拟生成JSON数据
    
  • 返回跨域JSONAPI
    
  
  

3. Html5

• HTML5 有哪些让你惊艳的 demo？
  

4. CSS

• browserhacks
  
• 前端资源教程
  

5. jQuery

• 　　焦点图
  
  
  
  • myfocus
    
  • myfocus-官方演示站
    
  • SuperSlidev2.1 – 大话主席
    
  • soChange
    
  
  

6. Ext, EasyUI, J-UI 及其它各种UI方案

• 　　Ext
  
  
  
  • extjs
    
  • ext4英文api
    
  • ext4中文api
    
  • 前端资源教程
    
  
  
• 　　EasyUI
  
  
  
  • jquery easyui 未压缩源代码
    
  
  
• 　　J-UI
  
  
  
  • J-UI
    
  
  
• 　　Other
  
  
  
  • MUI-最接近原生APP体验的高性能前端框架
    
  • Amaze UI | 中国首个开源 HTML5 跨屏前端框架
    
  • 淘宝 HTML5 前端框架
    
  • KISSY - 阿里前端JavaScript库
    
  • 网易Nej - Nice Easy Javascript
    
  • Kendo UI MVVM Demo
    
  • Bootstrap
    
  • Smart UI
    
  • 雅虎UI - CSS UI
    
  
  

7. 页面 社会化 分享功能

• 百度分享 pc端
  
• JiaThis pc端
  
• 社会化分享组件 移动端
  
• ShareSDK 轻松实现社会化功能 移动端
  
• 友盟分享 移动端
  

8. 富文本编辑器

• 百度 ueditor
  
• 经典的ckeditor
  
• 经典的kindeditor
  
• wysiwyg
  
• 一个有情怀的编辑器。Bach’s Editor
  
• tower用的编辑器
  
• summernote 编辑器
  
• html5编辑器
  
• XEditor
  
• wangEditor
  

9. 日历

• 　　PC
  
  
  
  • 经典my97
    
  • 强大的独立日期选择器
    
  • fullcalendar
    
  • fullcalendar日历控件知识点集合
    
  • 中文api
    
  • 农历日历
    
  • 超酷的仿百度带节日日历老黄历控件
    
  • 日期格式化
    
  • 大牛日历控件
    
  • 我群某管理作品
    
  • input按位替换-官网
    
  • input按位替换-github
    
  • bootstrap-daterangepicker
    
  • 国外30个插件集合
    
  • JavaScript datepicker
    
  • Datepair.js
    
  • 一个风格多样的日历
    
  • 弹出层式的全日历
    
  • jquery双日历
    
  
  
• 　　移动
  
  
  
  • 大气实用jQuery手机移动端日历日期选择插件
    
  • jQuery Mobile 移动开发中的日期插件Mobiscroll
    
  
  

• 　　Date library
  
  
  
  • Datejs
    
  • sugarjs
    
  • Moment.js
    
  
  

10. 综合效果搜索平台

• 效果网
  
• 17素材
  
• 常用的JavaScript代码片段
  

11. 前端工程化

• 　　概述
  
  
  
  • 前端工具大全
    
  • 什么是前端工程化
    
  
  
• 　　Gulp
  
  
  
  • Gulp官网
    
  • Gulp中文网
    
  • gulp资料收集
    
  • Gulp：任务自动管理工具 - ruanyifeng
    
  • Gulp插件
    
  • Gulp不完全入门教程
    
  • 为什么使用gulp?
    
  • Gulp安装及配合组件构建前端开发一体化
    
  • Gulp 入门指南
    
  • Gulp 入门指南 - nimojs
    
  • Gulp入门教程
    
  • Gulp in Action
    
  • Gulp开发教程（翻译）
    
  • 前端构建工具gulpjs的使用介绍及技巧
    
  
  
• 　　Grunt
  
  
  
  • gruntjs
    
  • Grunt中文网
    
  
  
• 　　Fis
  
  
  
  • fis 官网
    
  • fis
    
  
  

12. 轮播图

• 　　pc图轮
  
  
  
  • 单屏轮播sochange
    
  • 左右按钮多图切换
    
  • fullpage全屏轮播
    
  
  
• 　　移动端
  
  
  
  • 无缝切换
    
  • 滑屏效果
    
  • 全屏fullpage
    
  • 单个图片切换
    
  • 单个全屏切换
    
  • 百度的切换库
    
  • 单个全屏切换
    
  • 滑屏效果
    
  • 旋转拖动设置
    
  • 类似于swipe切换
    
  • 支持多种形式的触摸滑动
    
  • 滑屏效果
    
  • 大话主席pc移动图片轮换
    
  • 滑屏效果
    
  • 基于zepto的fullpage
    
  • [WebApp]定宽网页设计下，固定宽度布局开发WebApp并实现多终端下WebApp布局自适应
    
  • 判断微信客户端的那些坑
    
  • 可以通过javascript直接调用原生分享的工具
    
  • JiaThis 分享到微信代码
    
  • 聊聊移动端跨平台开发的各种技术
    
  • 前端自动化测试
    
  • 多种轮换图片
    
  • 滑动侧边栏
    
  
  

13. 文件上传

• 百度上传组件
  
• 上传
  
• flash 头像上传
  
• 图片上传预览
  
• 图片裁剪
  
• 图片裁剪-shearphoto
  
• jQuery图片处理
  
• 前端资源教程
  

14. 模拟select

• 糖饼 select
  
• flexselect
  
• 双select
  
• select2
  
• 前端资源教程
  

15. 取色插件

• 类似 Photoshop 的界面取色插件
  
• jquery color
  
• 取色插件集合
  
• farbtastic 圆环＋正方形
  
• 前端资源教程
  

16. 城市联动

• jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果
  
• 前端资源教程
  

17. 剪贴板

• 剪贴板
  
• clipboard 最新的剪切方案
  
• 不是Flash的剪贴板
  

18. 简繁转换

• 简繁转换
  

19. 表格 Grid

• facebook表格
  
• 类似于Excel编辑表格-handsontable
  
• bootstrap-table插件
  
• datatables
  

20. 在线演示

• js 在线编辑 - runjs
  
• js 在线编辑 - jsbin
  
• js 在线编辑 - codepen
  
• js 在线编辑 - jsfiddle
  
• java 在线编辑 - runjs
  
• js 在线编辑 - hcharts
  
• js 在线编辑 - jsdm
  
• sql 在线编辑 - sqlfiddle
  
• mozilla 在线编辑器
  

21. 播放器

• Html5 VideoPlayer
  

22. 粒子动画

• Proton 烟花
  

九. Nodejs

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

十. 性能优化

• 　　常规优化
  
  
  
  • Javascript高性能动画与页面渲染
    
  • 移动H5前端性能优化指南
    
  • 5173首页前端性能优化实践
    
  • 给网页设计师和前端开发者看的前端性能优化
    
  • 复杂应用的 CSS 性能分析和优化建议
    
  • 张鑫旭——前端性能
    
  • 前端性能监控总结
    
  • 网站性能优化之CSS无图片技术
    
  • web前端性能优化进阶路
    
  • 前端技术：网站性能优化之CSS无图片技术
    
  • 浏览器的加载与页面性能优化
    
  • 页面加载中的图片性能优化
    
  • Hey——前端性能
    
  • html优化
    
  • 99css——性能
    
  • Yslow——性能优化
    
  • YSLOW中文介绍
    
  • 转一篇Yahoo关于网站性能优化的文章，兼谈本站要做的优化
    
  • Yahoo!团队实践分享：网站性能
    
  • 网站性能优化指南：什么使我们的网站变慢？
    
  • 网站性能优化实践，减少加载时间，提高用户体验
    
  • 浅谈网站性能优化 前端篇
    
  • 前端重构实践之如何对网站性能优化？
    
  • 前端性能优化：使用媒体查询加载指定大小的背景图片
    
  • 网站性能系列博文
    
  • 加载，不只是少一点点
    
  • 前端性能的测试与优化
    
  • 分享网页加载速度优化的一些技巧？
    
  • 页面加载中的图片性能优化
    
  • web前端优化(基于Yslow)
    
  • 网站性能优化工具大全
    
  • 【高性能前端1】高性能HTML
    
  • 【高性能前端2】高性能CSS
    
  • 由12306谈谈网站前端性能和后端性能优化
    
  • AlloyTeam——前端优化
    
  • 毫秒必争，前端网页性能最佳实践
    
  • 网站性能工具Yslow的使用方法
    
  • 前端工程与性能优化（上）：静态资源版本更新与缓存
    
  • 前端工程与性能优化（下）：静态资源管理与模板框架
    
  • HTTPS连接的前几毫秒发生了什么
    
  • Yslow
    
  • Essential Web Performance Metrics — A Primer, Part 1
    
  • Essential Web Performance Metrics — Part 2
    
  • YUISlide,针对移动设备的动画性能优化
    
  • Improving Site Performance
    
  • 让网站提速的最佳前端实践
    
  • Why Website Speed is Important
    
  • Need for Speed – How to Improve your Website Performance
    
  • 阿里无线前端性能优化指南 (Pt.1 加载期优化)
    
  • 前端资源教程
    
  
  
• 　　优化工具
  
  
  
  • JavaScript 性能分析新工具 OneProfile
    
  • JavaScript 堆内存分析新工具 OneHeap
    
  
  
• 　　在线工具
  
  
  
  • google在线工具
    
  • 阿里测
    
  • 阿里-免费测试服务
    
  • 阿里-F2etest多浏览器兼容性测试解决方案
    
  • js性能测试
    
  • 前端资源教程
    
  
  

十一. 前端架构

• 技术架构
  
• 前端架构
  
• 如何成为前端架构师
  
• 关于前端架构-张克军
  
• 百度腾讯offer比较（腾讯游戏VS百度基础架构）
  
• 前端资源教程
  

十二. 个人作品1. 推荐作品

• winter代码片段需要FQ
  
• fgm
  
• 岑安作品集
  
• 当耐特demo集合
  
• 米空格 js作品
  
• myFocus
  
• SeaJS组件库
  
• 颜海镜作品
  
• 脚儿网作品
  
• javascript个人作品
  
• 妙味的雷东升游戏作品
  
• javascript作品集
  
• 云五笔，灰度产生生成工具
  
• 项目主页
  
• 个性的作品主页
  
• 播放器
  
• ucren js demos 集
  
• 智能社
  
• 实例陈列架
  
• zoye demo
  
• 王员外
  
• 平凡
  
• jyg 游戏案例
  
• 很多jquery插件
  
• 不羁虫 - soJs 作品系列
  
• frozenui
  
• 黑白棋
  
• fromone
  

2. 群员作品

• MDialog - [合肥-M.J]
  
• 轮播图 - [上海－冷静]
  
• [广州—坚壳]
  
• [成都 - 无痕]　感恩节专题
  
• [球霸天]
  
• [北京-小数]
  
• [ptf] Magix 工具
  
• [杭州-Pft] Magix 基于 MVC 结构和 Hash 驱动的 OPOA（One Page One Application）应用
  
• [上海-剧中人]-实验室
  
• [上海-豪情 ] 作品集合
  
• [成都-feeling]
  
• [上海-angela]
  
• [海南-hank]作品
  
• [上海-张力]博客
  
• [上海-zenki]作品
  
• 移动端图案解锁
  
• [合肥-M.J] - MPreview 移动端图片预览组
  
• [合肥-M.J] - Mexam 移动端在线做题组
  
• [北京-苏瑞] - dancer小人
  
• [上海-玄沐]- 个人网站
  
• [厦门-二哲]- 个人博客
  

3. 国外大牛精品

• pazguille
  

十三. 简历模板

• 不错的个人简历
  
• 简历
  
• 张伦
  
• 简历
  
• 翁天信
  
• 动画方式的简历
  
• 组件丰富简历
  
• 简历池
  
• haorooms博客
  
• Justin Young
  
• 前端资源教程
  

十四. 面试题

• 那几个月在找工作（百度，网易游戏）
  
• 2014最新面试题
  
• 阿里前端面试题
  
• 2016校招内推 – 阿里巴巴前端 – 三面面试经历
  
• 腾讯面试题
  
• 年后跳槽那点事：乐视+金山+360面试之行
  
• 阿里前端面试题上线
  
• 拉勾网js面试题
  
• 前端面试
  
• Web开发笔试面试题 大全
  
• 前端开发面试题
  
• 2014最新前端面试题
  
• 百度面试
  
• 面试题
  
• 前端工作面试问题
  
• 前端开发面试题
  
• 5个经典的前端面试问题
  
• 最全前端面试问题及答案总结
  
• 如何面试一名前端开发工程师？
  
• 史上最全 前端开发面试问题及答案整理
  
• 前端实习生面试总结
  
• 史上最全 前端开发面试问题及答案整理
  
• BAT及各大互联网公司2014前端笔试面试题：JavaScript篇
  
• 前端开发面试题大收集
  
• 收集的前端面试题和答案
  
• 如何面试前端工程师
  
• 前端开发面试题
  
• 牛客网-笔试面经
  

十五. iconfont

• 中文字体
  
• 淘宝字库
  
• 字体
  
• 制作教程
  
• zhangxinxu-icommon
  
• icommon
  
• 用字体在网页中画ICON图标(推荐教程)
  
• 字体压缩工具 感谢初级群　[深圳-小鱼] 的推荐
  

十六. 开发工具类

• 　　前端开发工具
  
  
  
  • IntelliJ IDEA 简体中文专题教程
    
  • Webstorm,InterllIdea,Phpstorm
    
  • SublimeText
    
  • Atom
    
  • visual studio code
    
  
  
• 　　Chrome, Firebug, Filddle 调试
  
  
  
  • 　　Fiddler
    
    
    
    • Fiddler调式使用知多少(一)深入研究
      
    • 微信fiddle
      
    • 微信fiddle
      
    • 前端资源教程
      
    
    
  • 　　Chrome
    
    
    
    • Google Chrome 官方
      
    • Chrome - 基础
      
    • Chrome - 进阶
      
    • Chrome - 性能
      
    • Chrome - 性能进阶
      
    • Chrome - 移动
      
    • Chrome - 使用技巧
      
    • Chrome - Console控制台不完全指南
      
    • Chrome - Workspace使浏览器变成IDE
      
    • network面板
      
    • chrome开发工具快捷键
      
    • chrome调试工具常用功能整理
      
    • Chrome 开发工具 Workspace 使用
      
    • Chrome神器Vimium快捷键学习记录
      
    • sass调试-w3cplus
      
    • 如何更专业的使用Chrome开发者工具-w3cplus
      
    • chrome调试canvas
      
    • chrome profiles1
      
    • chrome profiles2
      
    • chrome profiles3
      
    • chrome移动版调试
      
    • chrome调试
      
    • chrome的调试
      
    • chrome console 命令详解
      
    • 查看事件绑定1
      
    • 查看事件绑定2
      
    • 神器——Chrome开发者工具(一)
      
    • 奇趣百科性能优化(Chrome DevTools 中的 Timeline Profils 等工具使用介绍)
      
    • chrome 开发者工具的 15 个小技巧
      
    • Chrome开发者工具不完全指南
      
    • Chrome 开发者工具使用技巧
      
    
    
  • 　　Firebug
    
    
    
    • firebug视频教程
      
    • firefox 模拟器
      
    • console.log 命令详解
      
    • Firebug入门指南
      
    • Firebug控制台详解
      
    • 前端资源教程
      
    
    
  • 　　移动,微信调试
    
    
    
    • 浏览器端调试安卓
      
    • 移动端前端开发调试
      
    • 使用 Chrome 远程调试 Android 设备
      
    • mac移动端调试
      
    • mac移动端调试
      
    • 无线调试攻略
      
    • 无线调试攻略
      
    • 屌爆了,完美调试 微信webview(x5)
      
    • 微信调试的那些事
      
    • 远程console
      
    • 微信调试工具
      
    • 各种真机远程调试方法汇总
      
    
    
  • 　　iOS Simulator
    
    
    
    • Simulator
      
    • Xcode中的iOS模拟器(iOS Simulator)的介绍和使用心得
      
    
    
  
  
• 　　img
  
  
  
  • loading img
    
  • 智图-图片优化平台
    
  • 在线png优化
    
  
  
• 　　生成二维码
  
  
  
  • 生成二维码
    
  
  
• 　　浏览器同步
  
  
  
  • puer
    
  • liveReload
    
  • f5
    
  • File Watchers
    
  
  
• 　　在线PPT制作
  
  
  
  • nodePPT
    
  • PPT
    
  • reveal
    
  • slippy
    
  • impress.js
    
  
  

十七. 前端导航网站

• 界面清爽的前端导航
  
• 前端导航
  
• 前端网址导航
  
• 前端名录
  
• 前端导航
  
• 前端开发资源
  
• 网址导航
  
• 前端开发仓库 - 众多效果的收集地
  
• 前端资源导航
  
• F2E 前端导航
  

十八. 常用CDN

• 新浪CDN
  
• 百度静态资源公共库
  
• 360网站卫士常用前端公共库CDN服务
  
• Bootstrap中文网开源项目免费 CDN 服务
  
• 开放静态文件 CDN - 七牛
  
• CDN加速 - jq22
  
• jQuery CDN
  
• Google jQuery CDN
  
• 微软CDN
  

十九. Git,SVN,Github

• 　　Git
  
  
  
  • git-scm
    
  • 廖雪峰-Git教程
    
  • git-for-windows
    
  • GitHub 添加 SSH keys
    
  • gogithub
    
  • git常规命令练习
    
  • git的资料整理
    
  • 我所记录的git命令（非常实用）
    
  • 企业开发git工作流模式探索部分休整
    
  • GitHub 漫游指南
    
  • GitHub秘籍
    
  • 使用git和github进行协同开发流程
    
  • 动画方式练习git
    
  
  

作者：匿名用户
链接：http://www.zhihu.com/question/22146521/answer/110619920
来源：知乎
著作权归作者所有，转载请联系作者获得授权。

我不是大牛，只是介绍一点微小的人生经验。
我开始学前端，是w3cshool上的最基本的html、css和javascript教程，刚学完这些的时候其实也就入了个门，事实上连个毛都写不出来。“学以致用”，这些基础的知识，可能很多当时看的时候并不太明白，但是以后你碰到了具体的问题，再回想的时候，你就会恍然大悟，“原来如此”。
后来我在我的毕业设计上，需要用到一些前端操作，那个时候我主要用的是Bootstrap和jQuery，学完这两个东西你就能比较简单地写出一些还算好看的、也能动起来的页面了，不像前面那些东西，学了半天还是只能做一些很丑的页面，即使是实现一些基本的dom操作和ajax请求都很麻烦。
后来我实习了，刚开始学AngularJS的时候，它的双向绑定，前端MVC，真是让我惊为天人，简直太特么好用了。你要是前面的路都走完了，来到这里的时候你就会发现其实基本的html、css、javascript也就真的只是个基础，不一定要学得一字不落的，前端的发展日新月异，每分每秒都有很多新鲜的东西发明出来，虽然这有重复造轮子的嫌疑，但是这些新技术确实体现了现代化的软件开发思想（毕竟js是一门设计时间很短、也很不完善的语言）。
现在我主要用React+Redux+ES6写前端，感觉真是爽飞。而像gulp、webpack这些工具，其实只要稍微了解一下就行了，我个人的css不算好，所以对css方面不算太了解。
Apress出的书其实都蛮好的，例子很多，讲解又深，我推荐这几本
<img src="https://pic3.zhimg.com/9691a16fb124cc0f86bafbecdfa39bca_b.png" data-rawwidth="493" data-rawheight="605" class="origin_image zh-lightbox-thumb" width="493" data-original="https://pic3.zhimg.com/9691a16fb124cc0f86bafbecdfa39bca_r.png"><img src="https://pic1.zhimg.com/cd4cc048dd0944edfe751c1ee029a378_b.png" data-rawwidth="430" data-rawheight="606" class="origin_image zh-lightbox-thumb" width="430" data-original="https://pic1.zhimg.com/cd4cc048dd0944edfe751c1ee029a378_r.png">《Pro AngularJS》《Pro React》两本，还有一本css的书我觉得也很不错《CSS3 the missing manual》，不过都是英文的（搞计算机还是要有一定的英文水平）。《Pro AngularJS》《Pro React》两本，还有一本css的书我觉得也很不错《CSS3 the missing manual》，不过都是英文的（搞计算机还是要有一定的英文水平）。
<img src="https://pic1.zhimg.com/ae11ae89b03c9d1280cbc31b5a1106f4_b.png" data-rawwidth="469" data-rawheight="610" class="origin_image zh-lightbox-thumb" width="469" data-original="https://pic1.zhimg.com/ae11ae89b03c9d1280cbc31b5a1106f4_r.png">至于电子书的下载地址，你用谷歌搜书名就都找得到。至于电子书的下载地址，你用谷歌搜书名就都找得到。
然后还有几个链接：
ECMAScript 6入门
React 入门教程
Read Me | Redux
一小时包教会 —— webpack 入门指南
我个人主要的路子就是以上这样的。其实我前端的基础并不算太好，全都是自学。但是这世上很多事情，要都想等到万无一失的时候才动手，那就什么都干不了，所以学得差不多了就赶快用起来，不要拖不要等，用着用着，你就会发现，也就这样，没啥大不了的。