零基础的前端开发初学者应如何系统地学习？

前端变化太快，以下内容我会不定期更新，一年至少一次，持续做到2021年8月30日，刚好满十年。第三方网站请不要转载，如果实在想转载，请只转载摘要，并保留原文链接，谢谢。
发布于2011年8月30日
最后更新时间：2019年4月21日 00:42

在正文开始前，我还是先说一下我个人对于前端职业发展前景的看法。希望对那些站在前端学习起点，或者已经在路上，但犹豫不决的同学有所启发。

总的来说，到了2019年，初级前端在市场上是供大于求的，而高级前端依然是供小于求。这个判断主要是通过这些年面试的情况来看，没有全面的数据支撑，仅代表我个人观点。

初级前端供大于求。在培训机构和互联网公司的共同推动下，市场的初级前端很多。相比我2011年回答这个问题时，互联网公司在前端工程师的招聘要求高了很多。我毕业那年只是在学校里做了一个“图书管理系统”，边做边学搞了4个月，就可以拿到百度、淘宝的offer，而如今能做到这一点的候选人实在太多了。

高级前端供小于求。本质上因为互联网公司的发展速度高于市场上的前端工程师的平均成长速度。所以，虽然新手多了，企业招人依然困难。比如，天猫消费者端的导购页面，为了提高购买转化率，这些年来，在导购效率、用户体验维度做了非常多系统级体验优化方案，复杂度很高；又比如，阿里巴巴供应链平台，为了构建一套适用于阿里所有零售场景的供应链解决方案，同样在系统架构、用户体验、体验与研发效率的平衡等维度做了大量封装、抽象。这些是企业的高速发展的必然结果，然而市场上能够满足这样场景的同学，真的不容易找。

所以，到了2019年，那些打算通过这篇文档，开始自己前端职业生涯的同学，我希望大家，在起点处就做好了从初级跨入高级的准备。为了验证自己是否真的准备好了，可以尝试反复问自己这这个问题：你是否真的对前端感兴趣？至少说出3个能说服自己的理由。（如果是因为不喜欢现在工作，又听说前端简单才来学的，可以掉头回去了）。

一、前端通用学习方法

前端开发上手快，又容易得到反馈（页面效果是可见的），我推荐学习一点内容后快速实战，在实战中找到成就感，发现问题，然后再带着问题回去系统学习，如此往复。

二、基础

html + css

这部分建议在 w3school 在线教程 上学习，边学边练，每章后还有小测试。 学习过程中请打开chrome浏览器调试工具，直接命令行在内做些练习。

javascript

要学的内容实在很多，如果没有其他编程语言的基础的话，学起来可能要费些力，还是建议先在 w3school上学习。之后建议马上看《javascript语言精粹》，js是一门很混乱的语言，这本书能够帮助你区分哪些是语言的精华，哪些是糟粕，对于语言精华，应该深入学习。糟粕部分能看懂别人写的代码就行，自己就不用尝试了。

对于习惯看视频学习的同学，以上内容也可以在 慕课网-国内最大的IT技能学习平台 上学习。虽然我没用过，但好几位同学推荐过了，大概看了下，内容还不错。

数据结构和算法（2019年4月新增）

正如开篇的分析，目前市场缺的是高级前端，初级到高级的门槛不在未来，而是在过去的大学基础课。

前端为什么要学这些？因为这些都是稍微复杂一点的场景解决问题的必备武器。比如，把一个列表形式的地址数据，以树形渲染到页面，或者反过来；又比如，把一个多级嵌套的数据对象，转化成扁平的map结构再提交到服务器。更关键的，数据结构和算法，是计算机的思维方式，尤其是分治递归的思想，影响到代码实现、模块设计、乃至到系统设计。

三、初级

有了以上基础，就可以进行一般的静态网页设计，不过对于复杂的页面还需要进一步学习。

1. css

对于css的学习，我推荐分三块：“基础概念”，“css2.1规范”，“css3规范”。必看 精通CSS（第2版） (豆瓣)，看完这本书你应该对：盒子模型，流动，block，inline，层叠，样式优先级，等概念非常了解了。这本确实有些年头了，但基础概念部分讲述非常清晰，可以称之为经典。ie6，7相关的内容可以不看。css3的部分可以参考：CSS3实用指南 (豆瓣)。这本书同样有些老，只是最新出版的书中没发现有特别好的。

关于浏览器兼容性。webkit内核已成为市场主流，ie6、7已成为历史，ie8、9的市场份额在进一步缩小，总之兼容IE已不在是前端工程师面试需要考察的点。

2. javascript

上面提到内容还不足以让你胜任js编程。在有了基础之后，进一步学习内容包括：

2.1. 简单框架。推荐先学 zepto，简单易用，在w3school简单学习js后，直接上手 zepto 即可完成一些简单的项目。zepto 源码简单清晰，也适合新手阅读。补充： 可以使用 codecademy 学习 javascript，zepto，用户体验真的很好（感谢 TonyOuyang ）。学习zepto只是为了快速上手开发项目，获得成就感。同时还是要关注JS原生编程的能力，尤其随着低端浏览器份额的下降，很多 zepto API 已经可以被原生浏览器api替代。以天猫消费者端 h5页面为例，主要就是靠 原生JS + 少量 zepto api 的方式开发完成，配合pwa等浏览器最新api就可以开发出极致的用户体验。

2.2. 复杂框架。是指 react、vue、angular 等不直接操作dom的框架。这类框架建议js基础打扎实后再学习。复杂框架是用来解决复杂问题的。对于电商无线端导购页面来说原生JS足以。对于类似商家管理系统这类交互复杂，开发量大的系统，才适合用这类框架。对于这些框架核心在于理解理念，不要只停留在会用的层面。

2.3. javascript 语言范式 。这个名字可能并不恰当，只是我找不到可以描述“面向对象”，“函数式”这个两个概念的概念。javascript不完全是一个面向对象的语言，它的很多设计理念都有函数编程语言的影子，甚至说如果你不用面向对象，完全可以把它理解成一门函数式编程语言。javascript的很多语言特性，都是因为他具有函数式语言的特点才存在的。这部分推荐先学习面向对象的基本理论，对封装，继承，多态等概念要理解，维基百科，百度百科会是你的帮手，另外推荐《object oriented javascript》，应该有中文版。对与函数式编程可以参考这篇文章：JavaScript 中的函数式编程实践

2.4. javascript 语言内部机制。必须弄清如下概念：js中变量的作用域，变量传递方式，函数的定义环境与执行环境，闭包，函数的四种调用方式（一般函数，对象的方法，apply，call），以及四种调用方式下，‘this'指向的是谁。这部分内容你会在《javascript语言精粹》中详细了解。

2.5. dom编程，这个web前端工程师的核心技能之一。必读《dom编程艺术》，另外《高性能javascript》这本书中关于dom编程的部分讲的也很好。

2.6. 网络编程，这部分相对简单，就这些关键字，自己搜索学习即可：fetch，websocket，jsonp，cors，formData。另外，Ajax已经被 Fetch Standard 取代，学习 fetch api 即可，如果遇到不靠谱面试官还在问 ajax 的事情，直接跟他讲你对fetch的理解即可。

2.7. es5, es6。现在开发js大部分基于es5的，ie8以下通过es5-shim。但利用一些工具，现在已经可以直接写es6代码了，尤其在reactjs，nodejs类型的项目中。对于从es5，es6每个阶段js发生了哪些变化都需要系统学习，学习顺序建议是 JavaScript基础 -> es5 -> es6，越靠前的越重要。一些参考链接：ECMAScript 5 compatibility tableECMAScript 6入门ES5 ? 张鑫旭

3. html5

需要了解html都提供了哪些api，然后项目中用起来。这部分没有什么难理解的，关键在于能用html5解决业务问题，以及不支持html5的浏览器的降级方案。这部分体现了前端的一个思想：面向未来编程，尽早将新技术引入业务中来，而不是过分考虑兼容性问题，进而导致面向过去编程。

四、中级（2019年4月20日重写）

初级阶段的目标是能写出可以运行页面。中级阶段的目标则是以更快的速度，写出体验更好的页面。

1. 高内聚、低耦合

如果说数据结构和算法是从初级到高级的第一道门槛，能否写出高内聚、低耦合的代码，则是第二道门槛。

这部分是《设计模式》课程的主要内容，在《敏捷软件开发-模式、原则与实战》这部分书中也有更好解读，这里只能简单说下我的理解：

高内聚和低耦合的核心是内聚什么？解耦什么？简单来说就是一个分类问题，展开来说分类的原则包括：变化的角度，未来可能变化和不太可能变化的代码需要解耦；功能的角度，不同职能的代码必须解耦。从变化的角度理解，对应的原则包括：开放—封闭原则（OCP）、Liskov替换原则（LSP）、依赖倒置原则（DIP）、接口隔离原则（ISP）；从功能的角度理解对应的原则是：单一责任原则（SRP）。至于单例、工厂、模板、代理等等设计模式，只是这些原则之下的具体解决方案。

所以如果再有面试官去考察你的设计模式功底，要先去跟他讲你对模式之上的原则的理解。具体的模式，在不通语言范式下的用法可能不同，甚至压根没用。但模式背后的原则，却在哪都能用。

2. 极致的用户体验

在 webkit + v8 组合出现之后，浏览器的性能得到很大提升，以至于在多数场景下前端工程师都不会面临的什么性能问题。这其实是从初级到中级的一道隐形的门槛，很多工作多年，由于工作场景的限制，接触不到什么问题，自己也没主动学习，导致在性能优化维度一片空白。

遗憾的是业务在发展，为了更高的开发效率，前端工程和组件体系的复杂度也在提升。很多场景下，我们依然要面临性能优化的问题。《高性能javascript》依然是这个领域的经典，部分过时内容（第五章，字符串和数组相关操作，V8已经做优化；第九章，构建部分，现在基于webpack已经有很成熟的方案了；第十章工具不用看，直接去看chrome的devtool文档）自己忽略一下即可。

总结一下：对于前端页面极致的用户体验围绕这三方面：加载体验、渲染体验、操作体验。千万不可以只知道优化加载体验，5G时代即将来临，网络速度回得到进一步提升，但CPU处理速度，貌似还没看到突破性进展，未来的用户体验问题，会更加聚焦到渲染体验和操作体验。

3. 工程效率

前端项目同样面临软件生命周期的各个环节，首先是代码管理，你必须学会使用git。其次是代码的构建，如今前端代码构建已经不是简单的压缩一下了，需要进行依赖管理、模块合并、各种编译，必须要学会使用webpack、rollup等前端构建工具，以及前端模块管理的方式，amd，cmd，es6 module 等等。

五、高级

从初级、到中级是可以根据教程（比如本文）或者参加培训而快速达到的。但进入高级只能靠自己，就算你找到一个“高级前端研修班”，学到了高级前端的技巧，也学不到灵魂。这里只提供一个前端知识结构，仅供进一步学习的同学参考：JacksonTian/fks · GitHub

正走在从初级到中高级路上的大三或者研二的同学，如果想来阿里实习，可以邮件联系我。

已经迈入高级阶段的前端同路人，如果想来阿里工作，可以邮件联系我。

我的邮箱：mokun.zs@alibaba-inc.com

2019年4月21日 00:42

• 学习 C 语言。别问我为什么，我就是觉得一个程序员应该要学过 C 语言，牛逼不牛逼是另外一会事儿，况且很多书都是用的 C 语言描述。别光学语法，弄清编译是什么，链接是什么，指针是又怎么一会事儿。
  
• 学习数据结构和简单的算法。你看，你学完 C 语言就能学数据结构和算法了，我难以想象用 php 来描述数据结构和算法会有多么地奇怪。如果你觉得学了之后还是不知道数据结构究竟是什么，有什么用，那证明你还没有真的学到。
  
• 学习一门面向对象的静态编程语言。推荐 Java。学得有多好，就看你花了多少时间了。请务必仔细阅读各类相关书籍，深刻领会面向对象的重要编程思想（不过，切忌迷信面向对象编程）。
  
• 学习操作系统和计算机网络。至少一些基本的概念需要弄清楚，具体的细节，没有必要过于纠结。

• 看书或文档抛弃中文译本，借助各种工具阅读英文原版。
  
• 学习使用 Unix-like 系统。
  
• 学会提问[1]。
  
• 订阅科技博客，了解业界正在发生什么事情。

HTML5、CSS、JavaScript、JQuery、Ajax是Web前端工程师的核心技术，另外，作为一个合格的前端工程师还需要熟悉互联网交互设计能力、熟悉后端服务器运行环境和数据通信协议、掌握响应式布局框架、Bootstrap、AngularJS等最新的JS框架技术。

基础：HTML,、CSS学习

主要学习HTML标签、属性和事件，学习使用CSS来控制网页的样式和布局。

基础知识点：HTML 基本格式、文本、图像、超链接、表格、列表、表单、框架等；

CSS 基础语法、框模型与背景、文本格式化、表格、显示与定位、动画、过渡、2D/3D 转换、CSS 优化等。

超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架，无论是静态网页还是动态网页，最终返回到浏览器端的都是HTML代码，浏览器将HTML代码解释渲染后呈现给用户。因此，Web前端工程师必须掌握HTML的基本结构和常用标记及属性。

HTML 的学习是一个记忆和理解的过程，在学习过程中可以借助Dreamweaver的“拆分”视图辅助学习。在“设计”视图中看效果，在“代码”视图中学本质， 将各种视图的优势发挥到极致，这种对照学习的方法弥补了单纯识记HTML标签和属性的枯燥乏味。

在学习了HTML之后，我们只是掌握了各种“原材料”的制作方法，要想盖一幢楼房就还需要把这些“原材料”按照我们设计的方案组合布局在一起并进行一些样式的美化。开始CSS学习。

CSS是英文Cascading Style Sheets的缩写，叫做层叠样式表，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言其样式是可以复用的，这样就极大地提高了我们开发的速度，降低了维护的成本。

同时CSS中的盒子模型、相对布局、绝对布局等能够实现对网页中各对象的位置排版进行像素级的精确控制。通过此阶段的学习，我们就可以顺利完成“一幢楼房”的建设。

进阶：Javascript，jQuery

做HTML5开发，主要使用JS语言，所以学习JS非常有必要，必要时还要学习一些JS库。如jQuery。

基本知识点：JS语法、函数、DOM对象、事件处理等。

JQuery：语法、选择器、JQuery HTML操作、jQuery CSS操作、事件、元素、特效、JQuery Traversing、JQuery常用Plug-in、JQuery扩展、JQuery Mobile

JavaScript是一种在客户端广泛使用的脚本语言，在JavaScript当中提供了一些内置函数、对象和DOM操作，借助这些内容可以来实现一些客户端的特效、验证、交互等，使页面看起来不那么呆板。

JavaScript的兼容性和复杂性有时候的确让人头疼，还好有“大神”做了封装。

jQuery 是一个免费、开源的轻量级的JavaScript库，并且兼容各种浏览器(jQuery2.0及后续版本放弃了对IE6/7/8浏览器的支持)，同时现在有很多基于jQuery的插件可供选择，这样在我们实现一些丰富的动态效果时更方便快捷，大大节省了开发的时间，提高了开发速度，这也充分体现了其 write less,do more的核心宗旨。

高级：AJAX ，JSON ，XML

ajax是指一种创建交互式网页应用的网页开发技术，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。Ajax 的核心是 JavaScript 对象 XmlHttpRequest。

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成(网络传输速率)。

框架扩展学习：Bootstrap，jQuery UI，jQuery EasyUI ，jQuery Mobile

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包，是一个CSS/HTML框架，并且支持响应式布局。一经推出后颇受欢迎，一直是GitHub上的热门开源项目。

在项目开发过程中，我们可以借助Bootstrap提供的CSS样式、组件、JavaScript插件等快速的完成页面布局和样式设置，然后再有针对性的微调样式，这样基于框架进行开发大大缩短了开发周期。

拓展：

10大H5、Js 3D游戏引擎和框架

22款最佳JavaScript框架盘点

常用开发工具：Dreamweaver，Notepad++，Photoshop

10款Web程序员必备的在线CSS工具

Web前端工程师其他技术：

调试工具：Firebug

UI 交互设计：Photoshop设计工具、原型工具AP、互联网UI交互设计理论

HTTP协议：服务器端组件原理、HTTP请求（GET、POST、PUT、DELETE等）、HTTP响应、Cookie原理、Session原理、Restful协议

服务端：Java服务器端技术简介及Tomcat服务器、PHP服务器端技术简介及Apache服务器、.NET服务器端技术简介及IIS服务器

响应式布局：使同一份代码快速，有效适配手机，平板和PC设备。

Web前端技术刚入门时比较快，但想要精通在后续学习中速度则会降下来。因为前端工程师在工作中接触面比较光，在知识体系上就有一定的广度，但要成为一个有竞争力的工程师在核心技术上也要有深度，有时就牵涉到取舍的问题。另外，WEB前端技术日新月异，入了门想要有一定的发展就需要不断的学习与调整。

附两张Web前端工程师学习图：

1. 公开课_学习网站导航

   收录了网易、多贝、传课等众多公开课学习网站

2. 大学生常用_学习网站导航收录了外语学习、就业、实习、考研等众多大学生相关的学习网站
3. IT互联网_学习网站导航收录了IT、程序员、web开发、移动开发等众多互联网相关的学习网站
4. IT职业技能_学习网站导航收录了产品经理、UI设计师、前端、网络安全等互联网职业技能提升网站
5. 其他网站收录

   收录了一些稀奇古怪的网站、音乐电台、工具应用、大杂烩

1. 外语学习提供了英语学习的相关网站
2. 就业 | 实习提供了大学生就业、实习相关的学习网站
3. 考研提供了考研相关的学习网站
4. 国外学习网站收集国外众多优质学习网站，首先。。你得会英文(⊙o⊙)…
5. 科研|文档|资料

   学霸过来吧~找论文利索~

1. IT互联网IT互联网学习相关网站
2. IT程序员IT程序员学习相关网站
3. IT移动开发IT移动开发学习相关网站
4. web开发web开发学习相关网站
5. IT培训机构

   这些培训机构上可以找到一部分免费的教程

1. 产品经理网站导航N多产品经理学习入门学习网站
2. UI设计师学习网站导航N多UI设计师入门学习网站
3. WEB前端学习网站导航N多前端初学者学习入门的网站
4. 黑客|网络安全学习网站导航N多黑客入门安全攻防学习资料
5. 科技媒体网站导航

   了解互联网圈内动态，培养互联网思维~

1. 稀奇古怪的网站不少都是很有意思的，不要错过~
2. 稀奇古怪工具有些工具可是神器哦~
3. 益智训练专治大脑生锈！
4. 舞蹈|艺术妹子可以看看
5. 谷歌代理访问国外网站学习的利器，提供N多代理
6. 音乐电台N多高质量音乐网站，触动心灵的音符！
7. 影视动画|游戏策划
8. 电影|动漫
9. 旅游|摄影|体育|户外
10. 创意|生活有意思

• Growth: 全栈增长工程师指南
  • 全栈工程师是未来
    • 技术的革新史
    • 软件开发的核心难题：沟通
    • 大公司的专家与小公司的全栈
    • 全栈工程师的未来：无栈
• 基础知识篇
  • 工具只是辅助
    • WebStorm还是Sublime?
    • 语言也是一种工具
  • 提高效率的工具
    • 快速启动软件
    • IDE
    • DEBUG工具
    • 终端或命令提示符
    • 包管理
  • 环境搭建
    • OS X
    • Windows
    • GNU/Linux
  • 学好一门语言的艺术
    • 一次语言学习体验
    • 输出是最好的输入
    • 如何应用一门新的技术
  • Web编程基础
    • 从浏览器到服务器
    • 从HTML到页面显示
  • HTML
    • hello,world
    • 中文？
    • 其他html标记
    • 小结
  • CSS
    • 简介
    • 样式与目标
    • 选择器
    • 更有趣的CSS
  • JavaScript
    • hello,world
    • JavaScriptFul
    • 面向对象
    • 其他
• 前端与后台
  • 后台语言选择
    • JavaScript
    • Python
    • Java
    • PHP
    • 其他
  • MVC
    • Model
    • View
    • Controller
    • 更多
  • 后台即服务
    • API演进史
    • 后台即服务
  • 数据持久化
    • 文件存储
    • 数据库
    • 搜索引擎
  • 前端框架选择
    • Angular
    • React
    • Vue
    • jQuery系
  • 前台与后台交互
    • Ajax
    • JSON
    • WebSocket
• 编码
  • 编码过程
  • Web应用的构建系统
    • Web应用的构建过程
    • Web应用的构建实战
  • Git与版本控制
    • 版本控制
    • Git
  • Tasking
    • 如何Tasking一本书
    • Tasking开发任务
  • 写代码只是在码字
  • 如何编写测试
    • 测试金字塔
    • 如何测试
  • 测试替身
    • Stub
    • Mock
  • 测试驱动开发
    • 红-绿-重构
    • 测试先行
  • 可读的代码
    • 命名
    • 函数长度
    • 重复代码
  • 代码重构
    • 重命名
    • 提取变量
    • 提炼函数
  • Intellij Idea重构
    • 提炼函数
    • 内联函数
    • 查询取代临时变量
  • 重构到设计模式
    • 过度设计与设计模式
• 上线
  • 容器
    • Web容器
    • 应用容器
  • Docker
  • LNMP架构
    • Linux
    • HTTP服务器
  • 代理服务器
  • Web缓存
    • 数据库端缓存
    • 应用层缓存
    • 前端缓存
    • 客户端缓存
    • HTML5 离线缓存
  • 可配置
  • Toggle
    • PropertyPlaceHolder
  • 自动化部署
• 数据分析
  • 数据分析
    • 数据分析的过程
  • Google Analytics
    • 受众群体
    • 流量获取
    • 移动应用
  • SEO
    • 爬虫与索引
    • 什么样的网站需要SEO？
    • SEO基础知识
    • 内容
  • Hadoop分析数据
    • 数据源
    • 数据分析
    • 学习
  • UX
    • 什么是UX
  • UX入门
    • 什么是简单？
    • 进阶
    • 用户体验要素
  • 认知设计
• 持续交付
  • 持续集成
    • 前提条件
    • 瀑布流式开发
    • 小步前进
  • 持续交付
    • 配置管理
    • 持续集成
    • 测试
    • 构建与部署
    • 自动化
• 遗留系统与修改代码
  • 遗留代码
    • 什么是遗留代码
    • 遗留代码的来源
    • 遗留代码的问题
  • 如何修改代码
  • 网站重构
    • 速度优化
    • 功能加强
    • 模块重构
• 回顾与架构设计
  • 自我总结
    • 吾日三省吾身
  • Retro
    • Well
    • Less Well
    • Suggestion
    • Action
  • 浮现式设计
    • 意图导向
    • 重构
    • 模式与演进
  • 架构模式
    • 预设计式架构
    • 演进式架构
  • 每个人都是架构师
    • 如何构建一个博客系统
    • 相关阅读资料
  • 架构解耦
  • MVC
  • CQRS
  • 高级CQRS

http://weixin.qq.com/r/mnVYQHrEVicprT4j9yCI (二维码自动识别)

前端资源汇总

综合类 | 地址
--- | ---
前端知识体系--前端知识体系
前端知识结构--GitHub - JacksonTian/fks: 前端技能汇总 Frontend Knowledge Structure
免费的编程中文书籍索引--GitHub - justjavac/free-programming-books-zh_CN: 免费的计算机编程类中文书籍，欢迎投稿
智能社 - 精通JavaScript开发--精通JavaScript开发(视频教学)
重新介绍 JavaScript（JS 教程）--重新介绍 JavaScript（JS 教程）(文字教学)
麻省理工学院公开课：计算机科学及编程导论--麻省理工学院公开课：计算机科学及编程导论
JavaScript中的this陷阱的最全收集--没有之一--JavaScript中的this陷阱的最全收集--没有之一
JS函数式编程指南--第 1 章: 我们在做什么？
JavaScript Promise迷你书（中文版）--http://liubin.github.io/promises-book
腾讯移动Web前端知识库--GitHub - AlloyTeam/Mars: 腾讯移动Web前端知识库
大前端工具集 - 聂微东--GitHub - nieweidong/fetool: 大前端的瑞士军刀，只记录有用的
Web Front-end Stack v2.2--https://raw.githubusercontent.com/unruledboy/WebFrontEndStack/master/Web%20Front%20End%20Stack.png

入门类 | 地址
--- | ---
前端入门教程--web前端开发分享
瘳雪峰的Javascript教程--JavaScript教程（js笔记）
jQuery基础教程--jQuery基础课程_jQuery视频教程
前端工程师必备的PS技能——切图篇--前端工程师必备的PS技能
结合个人经历总结的前端入门方法--GitHub - qiu-deqing/FE-learning: 结合个人经历总结的前端入门方法

jQuery| 地址
--- | ---
jQuery API 中文文档--jQuery API 中文文档 -- jQuery 中文网
hemin 在线版--jquery 在线手册
css88 jq api--.on() | jQuery API中文文档(适用jQuery 1.0
css88 jqui api--jQuery UI API中文文档(适用jQuery UI 1.10)
学习jquery--jQuery Learning Center
jquery 源码查找--jQuery source viewer

综合API| 地址
--- | ---
runoob.com-包含各种API集合--菜鸟教程 - 学的不仅是技术，更是梦想！
开源中国在线API文档合集--在线API文档
devdocs--DevDocs API Documentation 英文综合API网站

效果类 | 地址
--- | ---
js弹出层--弹出层效果_技术学习教程
js焦点图轮播特效--焦点图轮播特效
w3help--http://www.w3help.org 综合Bug集合网站

CSS| 地址
--- | ---
腾讯css3动画制作工具--动画工具[Tool]
志爷css小工具集合--CSS小工具
bouncejs 触摸库--Bounce.js
animate.css--Animate.css
全局CSS的终结(狗带 [译]--全局CSS的终结(狗带) [译]

工具类| 地址
--- | ---
css sprite 雪碧图制作--CSS Sprite雪碧图应用
版本控制入门 – 搬进 Github--版本控制入门
Grunt-beginner前端自动化工具--Grunt-beginner前端自动化工具

慕课专题| 地址
--- | ---
张鑫旭 - 慕课系列--http://www.imooc.com/space/teacher/id/197450
lyn - 慕课系列--http://www.imooc.com/space/teacher/id/104593
艾伦 - 慕课系列--http://www.imooc.com/space/teacher/id/290139
碧仔 - Hello，移动WEB--Hello，移动WEB_移动web建站

弹出层| 地址
--- | ---
artDialog 最新版--GitHub - aui/artDialog: 经典的网页对话框组件
artDialog 文档--artDialog
google code 下载地址--https://code.google.com/p/artdialog/downloads/list
贤心弹出层--layer官方演示与讲解（jQuery弹出层插件）

Angularjs| 地址
--- | ---
Angular.js 的一些学习资源--GitHub - dolymood/AngularLearning: Angular.js 的一些学习资源
Angular的一些扩展指令|AngularJS 最佳实践
Angular数据绑定原理|GitHub - Pasvaz/bindonce: Zero watches binding for AngularJs
一些扩展Angular UI组件|AngularUI · GitHub
Ember和AngularJS的性能测试|http://voidcanvas.com/emberjs-vs-angularjs-performance-testing
带你走近AngularJS - 基本功能介绍|带你走近AngularJS
Angularjs开发指南|403页面不存在
Angularjs学习|Angularjs学习---官方phonecat实例学习angularjs step0 step1
不要带着jQuery的思维去学习AngularJS|不要带着jQuery的思维去学习AngularJS
angularjs 学习笔记|点点网络 | 轻博客
angularjs 开发指南|{{global.metatitle}}
angularjs 英文资料|GitHub - jmcunningham/AngularJS-Learning: A bunch of links to blog posts, articles, videos, etc for learning AngularJS
angular bootstrap|Angular directives for Bootstrap
angular jq mobile|GitHub - opitzconsulting/jquery-mobile-angular-adapter: jquery mobile angular adapter
angular ui|AngularStrap
整合jQuery Mobile+AngularJS经验谈|【每日一博】整合jQuery Mobile+AngularJS经验谈
有jQuery背景，该如何用AngularJS编程思想|有jQuery背景，该如何用AngularJS编程思想？
AngularJS在线教程|AngularJs 在线教程 入门教程 开发指南 学习笔记 基础教程 angular在线
angular学习笔记|AngularJS学习笔记


React| 地址
--- | ---
react.js 中文论坛|React 中文
react.js 官方网址|A JavaScript library for building user interfaces
react.js 官方文档|Getting Started
react.js material UI|Material-UI
react.js TouchstoneJS UI|TouchstoneJS
react.js amazeui UI|Amaze UI React
React 入门实例教程 - 阮一峰|React 入门实例教程
React Native 中文版|React Native官方文档中文版_React Native中文教程_React Native开发中文手册[PDF]下载
Webpack 和 React 小书 - 前端乱炖|Webpack 和 React 小书
Webpack 和 React 小书 - gitbook|介绍 | React Webpack 小书
webpack|GitHub - webpack/webpack: A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows to load parts for the application on demand. Through "loaders" modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
Webpack，101入门体验|Webpack，101入门体验
webpack入门教程|webpack入门教程
基于webpack搭建前端工程解决方案探索|基于webpack搭建前端工程解决方案探索
React原创实战视频教程|霹雳渔


移动端API| 地址
--- | ---
99移动端知识集合|GitHub - jtyjty99999/mobileTech: A useful tools or tips list for mobile web application developing
移动端前端开发知识库|GitHub - AlloyTeam/Mars: 腾讯移动Web前端知识库
移动前端的一些坑和解决方法（外观表现）|移动前端的一些坑和解决方法（外观表现）
【原】移动web资源整理|【原】移动web资源整理
zepto 1.0 中文手册|403页面不存在
zepto 1.0 中文手册|http://www.html-5.cn/Manual/Zepto
zepto 1.1.2|Zepto.js (1.1.6) API 中文文档
zepto 中文注释|zepto源码注释
jqmobile 手册|http://app-framework-software.intel.com/api.php
移动浏览器开发集合|Issues · maxzhang/maxzhang.github.com · GitHub
移动开发大杂烩|GitHub - hoosin/mobile-web-favorites: This is a favorites, with a mobile web tips.
微信webview中的一些问题|http://lin-chao.github.io/2014/11/14/%E5%BE%AE%E4%BF %A1webview%E4%B8%AD%E7%9A%84%E4%B8%80%E4%BA%9B%E9%97%AE%E9%A2%98


框架| 地址
--- | ---
特色的HTML框架可以创建精美的iOS应用|Framework7 - Full Featured Mobile HTML Framework For Building iOS & Android Apps
淘宝SUI|SUI Mobile


avalon| 地址
--- | ---
avalonjs|avalon中文官网
Avalon新一代UI库： OniUI|OniUI
avalon.oniui-基于avalon的组件库|GitHub - RubyLouvre/avalon.oniui: 基于avalon的组件库
|

Requriejs| 地址
--- | ---
Javascript模块化编程（一）：模块的写法 |Javascript模块化编程（一）：模块的写法
Javascript模块化编程（二）：AMD规范|Javascript模块化编程（二）：AMD规范
Javascript模块化编程（三）：require.js的用法|Javascript模块化编程（三）：require.js的用法
RequireJS入门（一）|RequireJS入门（一）
RequireJS入门（二）|RequireJS入门（二）
RequireJS进阶（三）|RequireJS进阶（三）
requrie源码学习|【requireJS源码学习01】了解整个requireJS的结构
requrie 入门指南|RequireJS 入门指南
requrieJS 学习笔记|RequireJS学习笔记
requriejs 其一 |Why SeaJS
require backbone结合|RequireJS与Backbone简单整合


Seajs| 地址
--- | ---
seajs|http://seajs.org
seajs 中文手册|Why SeaJS


Less,sass| 地址
--- | ---
sass|sass入门 - sass教程
sass教程-sass中国|sass中国_SCSS教程_Sass教程_Sass学习
Sass 中文文档|Sass: Syntactically Awesome Style Sheets
less|快速入门 | Less.js 中文文档


Markdown| 地址
--- | ---
Markdown 语法说明 (简体中文版|Markdown 语法说明(简体中文版)
markdown入门参考|Learning-Markdown/README.md at master · LearnShare/Learning-Markdown · GitHub
gitbook|GitBook ?· Writing made easy 国外的在线markdown可编辑成书
mdeditor|Cmd Markdown 编辑阅读器 一款国内的在线markdown编辑器
stackedit|StackEdit a