web前端必备学习指南

精华

工具

• box-shadow generator

  生成 box-shadow 的工具。

• gradient-generator

  渐变生成器。

• Ultimate CSS Gradient Generator

  也是渐变生成器

• CSS Generators -CSSREFLEX

  CSS3 生成器

• 图床 https://sm.ms/

  有 API 可用。

• 新浪微博图床 Chrome扩展

• Unix 时间戳 Unix timestamp

编程语言

JavaScript

• 前端资源教程 i5ting

• 廖雪峰JavaScript教程

• JavaScript 标准参考教程（alpha） -阮一峰

• JavaScript Promise迷你书 -azu

• 前端的异步解决方案之Promise和Await Async

• You Don’t Know JS (book series)

• You Don’t Need jQuery

  前端发展很快，现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行，直接操作 DOM 不再是好的模式，jQuery 使用场景大大减少。本项目总结了大部分 jQuery API 替代的方法，暂时只支持 IE10+ 以上浏览器。

• JavaScript 秘密花园

• JavaScript 设计模式 系列 AlloyTeam

ES2015(ES6)

• 《ECMAScript 6入门》 -阮一峰

• EcmaScript6 全规范（含node） -ouvens

• 30分钟掌握ES6/ES2015核心内容（上）

• 30分钟掌握ES6/ES2015核心内容（下）

• ES2015规范 英文

TypeScript

• TypeScript语法

前端博文

• 前端 JSer 装逼手册

• 6周学习计划，攻克JavaScript难关

NodeJS

• 七天学会NodeJS -Nanqiao Deng

• Node入门到精通 i5ting

• 高可用架构专用《全栈工程师之路-Node.js》 i5ting

• 前后端分离的思考与实践

框架&脚手架&部署工具

Babel

Babel 入门教程

Bower

基础教程

Yeoman

• yeoman 安装和使用 - 快速构建web应用

Gulp

• Gulp学习总结

• Gulp不完全入门教程

Grunt

• 用grunt搭建自动化的web前端开发环境-完整教程

webpack

• Webpack 中文指南 -赵达

• Webpack傻瓜式指南（一） -前端外刊评论 知乎专栏

• Webpack傻瓜指南（二）开发和部署技巧 -前端外刊评论 知乎专栏

• Webpack傻瓜指南（三）和React配合开发 -前端外刊评论 知乎专栏

  上述傻瓜指南的原始出处 https://github.com/vikingmute/webpack-for-fools Webpack傻瓜式指南

• Webpack，101入门体验 -Yika

• Webpack 入门指迷 -题叶

• https://webpack.github.io/ Webpack 官网

Vue

• awesome-vue
• Vue.js 和 Webpack（一） -Randy Lu
• Vue.js 和 Webpack（二） -Randy Lu
• Vue.js 和 Webpack（三） -Randy Lu
• Vuejs 1.0 中文系列视频教程 -Laravist
• Vuejs-QQ群 相关资料 来自豪情

React

• 深入理解 React -Thinking in React 中文版
• Thinking in React

AngularJS

• AngularJS api 官网

• AngularJS入门教程——AngularJS中文社区提供

• AngularJS 教程 | 菜鸟教程

  类似 w3school 的入门 AngularJS 教程。

React-Native

• React-Native学习指南

WEEX

• Weex中文文档 官方

• Weex详解：灵活的移动端高性能动态化方案

测试

• 测试框架 Mocha 实例教程 阮一峰

类库与插件

• Masonry

  瀑布流布局库。

• jssor

  图片轮播图其 GitHub 地址 jssor/slider

• cssslider

  纯 CSS 的图片轮播图。

模块化

• 后端程序员的 JavaScript 之旅 - 模块化（一）
• 后端程序员的 JavaScript 之旅 - 模块化（二）

• 后端程序员的 JavaScript 之旅 - 模块化（三）

• CommonJS 规范 -来自 阮一峰 JavaScript 标准参考教程(alpha)

技巧

• 将footer固定在页面底部的实现方法

编辑器

Atom 中常用插件

• auto-beautify
• autoprefixer
• block-comment
• color-picker
• docblockr
• emmet
• jquery-snippets
• jshint
• linter
• linter-csslint
• linter-htmlhint
• minimap
• minimap-git-diff
• minimap-codeglance 滑过 minimap 显示代码
• minimap-find-and-replace 在 minimap 中显示 ctrl+D 选中的内容
• open-in-browser
• uglify
• active-power-mode
• atom-terminal-panel
• linter-scss-linter
• atom-ternjs
• file-icons 将图标变成彩色
• autocomplete-paths 自动补充路径
• symbols-tree-view A symbol treeview like taglist

常用的主题：

UI Theme: One Dark

Syntax Theme: Atom Dark or One Dark

GitBook 及其插件

• Gitbook 的使用和常用插件 -赵达

• gitbook-plugin-expandable-chapters

  折叠左侧目录章节。

  

Chrome 插件

• Chrome扩展及应用开发 -图灵电子书

• 有哪些鲜为人知却非常有意思、好用的 Chrome 扩展？ -知乎

• Dribbble New Tab

  新建 tab 时，显示 dribbble 上的精选作品。

Other blogs

• 进击的马斯特 http://pinkyjie.com/

  马斯特，87年生人，爱溜冰的码农。技术： Javascript、Python、Mac、iOS

• Jerry Qu

  JerryQu，奇虎 360，前端开发，前百度前端。

• 码志 https://mazhuang.org/

  我是马壮，码而生，码而立。就职sogou。

• 小胡子哥 http://www.barretlee.com/

  李靖，阿里巴巴。

• Xcat Liu http://blog.xcatliu.com/

  Microsoft Software Engineer II, Meituan Senior Front-End Engineer

• 极限前端 http://ouvens.github.io/

  Ouvenzhang, 前端工程师，对前端领域的技术知识具有较高的职业能力和探究精神。对响应式页面设计、工程构建组件化、mv*设计实现、前端优化、ES6开发体系等有深入的研究与项目实践。来自腾讯科技。

• 凳子_Joinery 邓智容 http://www.dengzhr.com/

• 赵达的个人网站 腾讯高级前端开发工程师

• Randy

  95年出生的全栈。卢涛南，英文名 Randy，用 djyde 这个ID混迹于网络。

• JS前端开发群月报 -豪情等人维护

如果你在学习前端的过程中遇到什么问题或者想获取学习资源的话，欢迎加入前端学习交流QQ群：328058344  我们一起学前端！

转载于:https://my.oschina.net/u/3531365/blog/997673