简介
特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。
本以为自己收藏的站点多,可以很快搞定,没想到一入汇总深似海。还有很多不足&遗漏的地方,欢迎补充。有错误的地方,还请斧正…
有好友反应和斧正,会及时更新,平时业务工作时也会不定期更新…2018-09-13
内容精简
资源这么多,多看看多学习再总结肯定是好的。多读读就算看重了不算浪费时间,毕竟一千个读者就有一千个林黛玉,还有温故而知新,说不定多读一些内容,就发现惊喜了呢。不过,在此也精简一些内容,就1~2项,只供参考。更多内容细看分类。
- 知乎:程序员应该如何注意身体健康?
- js:JavaScript 标准参考教程
- js:JavaScript 秘密花园
- Es6:ECMAScript 6入门
- Es6:深入浅出ES6
- css:CSS 参考手册
- html:HTML超文本标记语言
- jquery:从零开始学习jQuery
- jquery:前端开发者都应知道的 jQuery 小技巧
- 移动Web:腾讯移动Web前端知识库
- 移动Web:移动web知识资料集-白树
- 小程序:微信小程序开发资源汇总…
- Git:Git教程 - 廖雪峰
- Git:设置Git快捷命令
- React:React入门教程
- Angular: Angular.js 的一些学习资源
- underscore:underscore.js 手册
- vue:vue.js API 中文
- RegExp:RegExp对象 - 阮一峰
- Node:Node.js 包教不包会
- Express:Express 4.x API 中文手册
- Koa:Koa 框架学习
- 前端:Front-End-Develop-Guide 前端开发指南
- 模块化:JavaSript模块规范 - AMD规范与CMD规范介绍
- 规范化:通过分析github代码库总结出来的工程师代码书写习惯
- 工程化:前端工程——基础篇
- 博客:淘宝前端团队
- 博客:Tencent AlloyTeam
- 博客:FEX 百度WEB前端研发部
- 工具:sublime-text & 资料齐聚
- 工具:chrome 开发者工具的 15 个小技巧
- 优化:移动H5前端性能优化指南
- 面试:前端开发面试题
前端资源教程类
各种教程会有很多,我也精简的挑选了一些。选择一两个合适的就好了。有时间多看看多比比也是极好的。
JavaScript
- Javascript教程-小白的零基础JavaScript全栈教程-瘳雪峰
- JavaScript 标准参考教程
- You-Dont-Know-JS – 不建议初学者查看
- You-Dont-Know-JS – 翻译版
- 重新介绍 JavaScript(JS 教程)
- 前端入门教程
- 前端开发者手册
- JavaScript学习总结-trigkit4
- 温故js系列-对知识点进行回顾知新
- JS函数式编程指南
- JavaScript Promise迷你书(中文版)
- 精通JavaScript开发-智能社
- JavaScript秘密花园
- JavaScript 资源大全中文版
- JavaScript闯关记 - 编辑中
- JavaScript练习网站收集
- 统一回复《怎么学JavaScript?》
- runjs - js在线编辑学习
- 常用的Javascript设计模式
- 45个实用的JavaScript技巧、窍门和最佳实践
- 给JavaScript初学者的24条最佳实践
- 编写快速、高效的JavaScript代码
- Ajax知识体系
- javascript功能插件大集合
- Moment.js
- Moment.js 中文网
- TypeScript 2.1 新特性一览
- JS Tips – A JS tip per day!
ES6
HTML5
- HTML5与CSS3权威指南(书籍)
- html:HTML超文本标记语言
- 译谷歌 HTML/CSS 规范
- HTML5菜鸟教程
- 每周一点canvas动画
- 玩转html5canvas画图
- HTML5+NodeJs实现WebSocket即时通讯
CSS3
- CSS 语法参考
- CSS 参考手册
- 腾讯css3动画制作工具
- Bootstrap 中文网
- css3 js 移动大杂烩
- Animate.css
- Sass guide
- Sass中文文档
- less
- 谈谈一些有趣的CSS题目系列
- CSS居中:完全指南(译)
- 业务代码中可用的css小技巧
- You Don’t Know CSS(一)
- You Don’t Know CSS(二)
- Css In Js
jQuery
移动WEB
- 腾讯移动Web前端知识库
- 支付宝-无线Web开发经验谈
- 移动web知识资料集-白树
- 移动端学习 - mobileTech
- 移动前端的一些坑和解决方法(外观表现)
- hotcss 移动端布局终极解决方案 - 让移动端布局开发更加容易
- zepto
- jqmobile 手册
- swiper中文网
- iscroll
- 移动开发大杂烩
- 特色的HTML框架可以创建精美的iOS应用-框架
微信小程序
Git
React
- React 教程
- Redux-saga 中文文档
- react.js 官方文档
- reactnative
- React 入门实例教程 - 阮一峰
- React Native 中文版
- 深入浅出React(一):React的设计哲学 - 简单之美
- 一看就懂的ReactJs入门教程(精华版)
- React china 中文社区
- 深入浅出React(系列)
- React 设计思想
- dva- 基于 redux、redux-saga 和 react-router@2.x 的轻量级前端框架
- Ant Design of React
- tween-one 动效组件
Angularjs
- Angular.js 的一些学习资源
- 关于 AngularJS 框架的使用有哪些经验值得分享?
- 有jQuery背景,该如何用AngularJS编程思想
- AngularJS 源码分析
- AngularJS 中文社区
- AngularJS 入门教程 图灵社区
函数工具
vue.js
- vuejs 英文官网
- vuejs 中文官网
- vue.js API 中文
- vue.js 中文社区
- vue github 官方仓库
- Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库
- vue最新实战 gank客户端(vue2 + vue-router2 + vuex +webpack+ es6)新手福利,干货多多
- Welcome to the Vue Forum!
- iView - 一套基于 Vue.js 的高质量 UI 组件库,主要服务于 PC 界面的中后台产品
- vue 性能优化
- Vue 2.0 构建单页应用最佳实战
- Vue 2.0源码学习
- Mint UI 使用文档
正则表达式
NodeJs
- 深入浅出NodeJs(推荐书籍)
- Node.js 包教不包会
- 七天学会NodeJS
- NodeJs学习笔记
- NodeJs-阮一峰
- Node.js 究竟是什么?
- NodeJs的代码调试和性能调优
- Express 框架学习
- Express 4.x API 中文手册
- Koa 框架学习
- Koa 手册
- ejs Embedded JavaScript Template
简单算法
前端综合
- Front-End-Develop-Guide 前端开发指南
- 前端知识体系
- 前端知识结构
- 前端开发的历史和趋势
- 前端工程师必备的PS技能——切图篇
- 结合个人经历总结的前端入门方法
- w3help
- 响应式布局指南
- 关于前端开发谈谈单元测试
前端模块化开发类
- JavaSript模块规范 - AMD规范与CMD规范介绍
- Javascript模块化编程(一):模块的写法 阮一峰
- Javascript模块化编程(二):AMD规范 阮一峰
- Javascript模块化编程(三):require.js的用法 阮一峰
- RequireJS入门(一)Snandy
- RequireJS入门(二)Snandy
- RequireJS入门(三)Snandy
- RequireJS进阶(一)Snandy
- RequireJS进阶(二)Snandy
- RequireJS进阶(二)Snandy
- RequireJS 入门指南
- Seajs 提供简单、极致的模块化开发体验
前端开发规范类
- 通过分析github代码库总结出来的工程师代码书写习惯
- HTML&CSS编码规范 by @mdo
- Javascript编码规范-Max Yu
- CSS编码规范-Max Yu
- 前端编码规范之JavaScript-小胡子哥
- 前端编码规范之css-小胡子哥
- 前端开发规范手册
- 前端代码规范 及 最佳实践
- 百度前端规范
- 网易前端规范
前端工程化类
工程化的工具都不是绝对的,选择合适的使用,项目多了,说不定你都用上了也不一定。反正在我身边我知道的项目中,不同项目用着不同工具,基本都包含了。
- 前端工程——基础篇
- Gulp中文网
- Gulp官网
- Gulp:任务自动管理工具 - 阮一峰
- Gulp 入门指南
- Gulp入门教程
- Grunt中文网
- Grunt官网
- fis 前端工具框架
- fis 文档
- Webpack
- Webpack 中文指南
- Webpack傻瓜式指南(一)
- Webpack傻瓜指南(二)开发和部署技巧
- 入门Webpack,看这篇就够了
- Webpack 2 入门教程
前端开源Git类
- Facebook Projects
- Baidu FEX team
- nzakas
- chrome开发团队成员
- 玉伯 -支付宝前端Leader
- 豆瓣前端Leader
- JacksonTian 朴灵
- 伯乐在线
- 淘宝UED北京团队
- 国外TJ大神
- substack
- 支付宝前端美女沉鱼~
- fengmk2
- github上值得关注的前端项目 - 404
前端知名博客类
SF内有很多高手,可以前去排行榜看看。。。
- 淘宝前端团队
- Tencent AlloyTeam 2016
- FEX 百度WEB前端研发部
- EFE 百度EFE(Excellent FrontEnd)技术体系
- qunaer UED
- Ruby-China
- CNodeJs
- i5ting狼叔
- 伯乐在线
- 博客园
- 大漠
- 朴灵
- justjavac - 迷渡
- 阮一峰的网络日志
- 三生石上-专注于前端(JavaScript、jQuery、ExtJS)
- 司徒正美-Ruby’s Louvre
- 张鑫旭 - CSSCSSCSS
- Snandy
前端开发工具类
- sublime-text & 资料齐聚
- SublimeText-快捷键大全
- Gif多图:我常用的 16 个 Sublime Text 快捷键
- sublime Text3 常用快捷键 - mac版
- AngularJS最理想开发工具WebStorm
- Fiddler调式深入研究(一)
- Fiddler实战深入研究(二)
- 移动web调式利器—Rosin研究
- 移动开发中Fiddler的那些事儿
- 微信内移动前端开发抓包调试工具fiddler使用教程
- Google Chrome 官方
- Chrome开发者工具不完全指南(一、基础功能篇)
- Chrome开发者工具不完全指南(二、进阶篇)
- Chrome开发者工具不完全指南(三、性能篇)
- Chrome开发者工具不完全指南(四、性能进阶篇)
- Chrome开发者工具不完全指南(五、移动篇)
- chrome开发工具快捷键
- Chrome 开发工具 Workspace 使用
- chrome 开发者工具的 15 个小技巧
- 天啦噜!原来Chrome自带的开发者工具还能这么用!
- 神器——Chrome开发者工具(一)
- 使用Chrome开发工具调试Canvas
- WEB调试工具—Firebug-慕课网
- Firefox 开发工具 WebIDE
- Firebug入门指南 - 阮一峰
- Firebug控制台详解 - 阮一峰
- 移动端前端开发调试
- 屌爆了,完美调试 微信webview(x5)
- 微信调试的那些事
- 在线二维码图片生成器
- Smart PNG and JPEG compression在线图片压缩
- imagecompressor
- easyicon 图标下载
- Icon Hover Effects
- easy-mock
前端性能优化类
- Javascript高性能动画与页面渲染
- 移动H5前端性能优化指南
- 给网页设计师和前端开发者看的前端性能优化
- 转一篇Yahoo关于网站性能优化的文章,兼谈本站要做的优化
- Yahoo!团队实践分享:网站性能优化的34条黄金守则(一)—内容
- 网站性能优化指南:什么使我们的网站变慢?
- 分享网页加载速度优化的一些技巧
- 【高性能前端1】高性能HTML -
- 【高性能前端2】高性能CSS
- 前端工程精粹(一):静态资源版本更新与缓存
- 前端工程精粹(二):静态资源管理与模板框架
- 让网站提速的最佳前端实践
- 阿里无线前端性能优化指南 (Pt.1 加载期优化)
- pagespeed - 检测网页性能及优化建议
前端面试类
面试题可以供我们学习补漏,但面试题始终有一种应对面试的感觉。请相信面试官能轻易的看出你的斤两,掌握基础和提升技术才是最重要的。这些面试题也是极好的。