零基础的前端开发初学者应如何系统地学习？
A.学习背景&br&
开始网站开发，起先是从手机网站的UBB语法开始的，也因此有了深入学习的兴趣。为了让学习的热情膨胀，我有意的培养这一爱好 ，定位了自己要成为一名优秀的网站开发员的目标。&br& 作为一名只有高中水平的零基础初学者，周围也没有掌握相关知识的朋友，打算自学的我只有通过google,baidu来了解要学习网站开发所需要的知识点。&br&目前掌握的知识点&br& 了解到网站分为前端和后端。&br&
前端方面：由于我是从UBB语法上开始的，我一开始就选择了学习的XML，后来学到，schema的一知半解，到后来的DOM就出现了瓶颈，于是放下这个开始学习HTML，CSS,可是一直都觉得简单，也就当看电影一样一气呵成，便开始了学习Javascript，一直坚持到了自己能编写一些简单的效果，也在这里进一步的了解了DOM，此时我觉得可以进行一些进阶级的网站效果设计，可是忽然发现我对HTML+CSS原来是如此不堪，我并不能很好的用它们去编排内容，更或者说我连从哪下手去设计都不知……为此我迷茫了很久，又回过头来学习一遍，我才发现自己脑子里的知识点是一片混乱！&br& 由于我是断网自学（手机上网看文字的内容还是很方便的），原因是为了不让自己在网络上分散了学习上的那份专注。所以对于图片等素材是很是欠缺的。我也知道前端对于熟悉PS，AI，Flash等图行工具很重要，可是我看了这么多教程，就是找不到学习的窃门，只能对图片进行一些简单处理，Flash更是难点重重，我就一直想不明白，用鼠标键盘怎么画出那么好看的动画。。。。。。&br&
后端方面：我选择了PHP，MySQL。由于前面学Javascript的经验，学PHP也不是很难，学完了一些基础语法，MySQL也了解了建库建表，可就是一直没用过，这也是因为前面的知识点一直没找到突破口，所以也就没打算怎么去深入学习后台知识。&br&B.问题&br&一． 怎样编写标准的HTML+CSS，对于这些规范的标准很是不解，对于编写代码(包括js，php)有哪些好的习惯?我一直没有给自己写的代码注释，也许是目前自己写的都是太简单了。&br&二． 从Javascript , xml 上我都对DOM这一知识点上了解不深，是不是一种面向对象的知识，我该怎么去形象通俗的了解面向对象？&br&三． 我该如何去系统的整合我现在的HTML+CSS+Javascript+xml+PHP+MySQL的知识，或者说是如何系统的学习，作为一名单独的自学者，我很是迷茫这一点！???&br&四． 图形工具（PS,AI,Flash）方面，有没有一个好的学习建议或窍门？&br&五． 从未来的互联网发展趋势来看，还有哪些知识点是网站开发者需要掌握的?&br&C.后记&br& 个人对自己的点评：1）可能是约束力不够，搞得知识面混杂。2)有点好高骛远了，基础没劳固就想开发？3)急功求成，对于一个23岁没收入的青年来说，如果不能早日学成，是个很可怕的事，压力啊！&br& 在此我也讲讲发这一篇像博文般问题的原由，知乎作为中国首家专注社交问答类的网站，我认为这必然有它的出彩之处。这里牛人前辈也是特别的多，所以我想单纯的提出问题，还不如上百度算了，这里提倡社交式的问答，问题问的不止是要答案，还要是着重于社交这一点，所以我加入了对问题背景的产生，更好的让人了解了我的现状，对回答应该有所帮助。&br&同时我也是想着能否找到一些与我一样的初学者，相互提高；或者是偏重图形工具的人能与我形成互补，希望以后能有合作的机会。有意的加上以下联系方式：&br&E-mail: t-sky2008#&a href=&///?target=http%3A//& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a& (把 # 换成 @)&br&&br& 最后,我对所有对我的帮助者致以真诚的感谢! &br&&br&---------------------------------日--------------------------------&br&&br&&b&
坐在一个完全与编程无关的职位上&/b&，我对着电脑，想了好久，这个问题的发出两年多了，让我认识了好多朋友，大部分都是在校的学生，你们都正当年，我很开心看到你们这么热情的学习心态，同时我也想让其它更多看到这个问题的人，好好珍惜学习的机会。我是没有适当的条件的，我没有在编程开发这条路上坚持到我成长成为一个工程师。现在的我依然感到有点惋惜，因为，我即将开始一场属于自己的事业，必然的选择了与互联网，网站开发建设有关，呵呵，大家也别笑我没这能力还去搞这玩意，具体我做什么的就不在这里表露了。&br&&b&
顺便说一下&/b&，有心找我学习编程知识，共同进步的人，可能要失望了，但是，这些都不会阻碍我们能成为朋友，而且从社会经验来讲，我这草根人物，很多经验会适合很多人，有兴趣的不妨也可以问一下。联系我邮箱就行。&br&&b&
在此最后&/b&，真心感谢用心回答这个问题的答主们，您们辛苦了！感谢您们为这么多迷茫在这条路上的学习者提供了这么好指引，声明，我不是来骄情式的感恩，我是诚心的，没有饿过的人，永远无法知道饥饿者对给他们一块面包的人那种感恩的心。&br&还有一些回复，一些点赞的事，我就不锦上添花了，希望能理解。谢谢。
A.学习背景
开始网站开发，起先是从手机网站的UBB语法开始的，也因此有了深入学习的兴趣。为了让学习的热情膨胀，我有意的培养这一爱好 ，定位了自己要成为一名优秀的网站开发员的目标。 作为一名只有高中水平的零基础初学者，周围也没有掌握相关知识的朋友，打算自学的我只有通过google,baidu来了解要学习网站开发所需要的知识点。目前掌握的知识点 了解到网站分为前端和后端。
前端方面：由于我是从UBB语法上开始的，我一开始就选择了学习的XML，后来学到，schema的一知半解，到后来的DOM就出现了瓶颈，于是放下这个开始学习HTML，CSS,可是一直都觉得简单，也就当看电影一样一气呵成，便开始了学习Javascript，一直坚持到了自己能编写一些简单的效果，也在这里进一步的了解了DOM，此时我觉得可以进行一些进阶级的网站效果设计，可是忽然发现我对HTML+CSS原来是如此不堪，我并不能很好的用它们去编排内容，更或者说我连从哪下手去设计都不知……为此我迷茫了很久，又回过头来学习一遍，我才发现自己脑子里的知识点是一片混乱！ 由于我是断网自学（手机上网看文字的内容还是很方便的），原因是为了不让自己在网络上分散了学习上的那份专注。所以对于图片等素材是很是欠缺的。我也知道前端对于熟悉PS，AI，Flash等图行工具很重要，可是我看了这么多教程，就是找不到学习的窃门，只能对图片进行一些简单处理，Flash更是难点重重，我就一直想不明白，用鼠标键盘怎么画出那么好看的动画。。。。。。
后端方面：我选择了PHP，MySQL。由于前面学Javascript的经验，学PHP也不是很难，学完了一些基础语法，MySQL也了解了建库建表，可就是一直没用过，这也是因为前面的知识点一直没找到突破口，所以也就没打算怎么去深入学习后台知识。B.问题…
按投票排序
原本不想回答这个已经有了这么多答案的问题的，但是发现竟然没有人安利现在Github上最火的一个项目：这是一个专门为零基础学习者准备的学习路径，从零开始学习Web开发。FreeCodeCamp鼓励的学习方式是learning by doing，课程设置很平滑，既有循序渐进的基础知识，又有需要你自由发挥的开发小项目，和打游戏闯关一样的学习体验，比起看教学视频，w3cschool之类的要更加生动有趣。这是一个专门为零基础学习者准备的学习路径，从零开始学习Web开发。FreeCodeCamp鼓励的学习方式是learning by doing，课程设置很平滑，既有循序渐进的基础知识，又有需要你自由发挥的开发小项目，和打游戏闯关一样的学习体验，比起看教学视频，w3cschool之类的要更加生动有趣。学会之后你还可以参与合作项目组里和其他FreeCodeCamp的学习者一起为公益组织开发真正会投入使用的Web应用。中文版官网：参与完整个Camp之后，你不光学习到了知识，也获得了开发经验。FCC的论坛里已经有很多零基础学习者通过完成课程之后成功找到开发工作的真实例子。在FCC整个学习路径中，你可以获得四个资质认证：前端开发认证完成前端开发认证需要学习基本的HTML/CSS/JQuery和Bootstrap知识。完成10个前端开发任务，和学习基本的Javascript算法。数据可视化认证学习有关Sass, React 和 D3的技术。开发完成5个React应用，5个D3.js的数据可视化应用。后端开发认证学习Node.js, Express, 和MongoDB相关知识，学习版本控制软件Git等。完成5个API开发任务，5个全栈App开发任务。全栈开发认证运用你所学的知识为公益组织开发真实可用的Web应用。你需要开发两个全新的项目，维护两个已有的项目，这些都是公益组织会真实投入使用的应用，完成也就意味着你有了真正的开发工作经验。点击这里加入：===============================================================已经有很多从知乎过来的朋友加入了，欢迎更多的人参与到FCC当中来，现在就可以加入中文聊天室和大家交流：聊天室使用的是gitter，使用方式比较极客，而且服务器在墙外。为了使大家更好地交流，并真正参与到FCC的学习中来，我创建了一个微信群，感兴趣的同学可以加入一起相互帮助，相互鼓励，真正完成FCC的课程和任务，而不只是点个赞加入收藏就仿佛自己学会了Web开发一样。微信群已满100人，想加群的私信我微信号。如果你的英文还说得过去的话，还是推荐到英文官网去学习：===============================================================FCC的题目除了一关一关地学习Web编程知识以外，还有许多需要自主完成的任务，例如创建一个个人主页、当地天气应用、JavaScript计算器、股票应用甚至是克隆Pinterest，完整学习下来并完成所有的任务还是需要付出相当努力的，不过不需要担心，课程的设置完全是从零开始，一步一步，循序渐进的。FCC的题目除了一关一关地学习Web编程知识以外，还有许多需要自主完成的任务，例如创建一个个人主页、当地天气应用、JavaScript计算器、股票应用甚至是克隆Pinterest，完整学习下来并完成所有的任务还是需要付出相当努力的，不过不需要担心，课程的设置完全是从零开始，一步一步，循序渐进的。FCC鼓励Read-Search-Ask的学习方法。即阅读文档和错误-搜索问题-询问他人获得帮助。并且建立了很成熟的社区：在线聊天室：交流论坛：FCC中文社区QQ群：FCC在很多平台上都非常活跃，再给几个比较有用的链接：Youtube频道： 这里有FCC官方的视频课程，学习者为公益组织开发项目的展示等等。Linkedin 大学主页： 是的你没有看错，Linkedin认证FCC为大学机构，你可以把你在FCC学习的经历填写在你的Linkedin主页里。Medium主页： FCC官方分享的一些技术干货等。Github 主页：
（前端变化太快，以下内容我会不定期更新，第三方网站请不要转载，如果实在想转载，请只转载摘要，并保留原文链接，谢谢）网站开发开发大致分为前端和后端，前端主要负责实现视觉和交互效果，以及与服务器通信，完成业务逻辑。其核心价值在于对用户体验的追求。可以按如下思路学习系统学习：基础知识：1. html + css 这部分建议在
上学习，边学边练，每章后还有小测试。 之后可以模仿一些网站做些页面。 2. javascript 要学的内容实在很多，如果没有其他编程语言的基础的话，学起来可能要费些力，还是建议先在 w3school上学习。之后建议马上看《javascript语言精粹》，js是一门很混乱的语言，这本书能够帮助你区分哪些是语言的精华，哪些是糟粕，对于语言精华，应该深入学习。糟粕部分能看懂别人写的代码就行，自己就不用尝试了。对于习惯看视频学习的同学，以上内容也可以在
上学习。虽然我没用过，但好几位同学推荐过了，大概看了下，内容还不错。进阶：有了以上基础，就可以进行一般的静态网页设计，不过对于复杂的页面还需要进一步学习。1. css。截至今日（），天猫、淘宝、支付宝都已停止对ie6,7的支持，未来相信大多数网站都会停止对ie6，7的支持，ie8的市场份额也不像两年前那么高了，webkit内核已成为市场主流。对于css的学习，我推荐分三块：“基础概念”，“css2.1规范”，“css3规范”。必看 ，看完这本书你应该对：盒子模型，流动，block，inline，层叠，样式优先级，等概念非常了解了。这本确实有些年头了，但基础概念部分讲述非常清晰，可以称之为经典。ie6，7相关的内容可以不看。css3的部分可以参考：。这本书同样有些老，只是最新出版的书中没发现有特别好的。2. javascript。上面提到内容还不足以让你胜任js编程。在有了基础之后，进一步学习内容包括：a) 框架。推荐 zepto，简单易用，在w3school简单学习js后，直接上手 zepto 即可完成一些简单的项目。zepto 源码简单清晰，也适合新手阅读。补充： 可以使用
学习 javascript，zepto，用户体验真的很好（感谢
）。最近比较热门的框架是React, VUE, Angular这些, 根据需要稍作了解即可。随着ie浏览器市场份额的下降，以及移动端的发展，标准原生js已经可以在实际项目中使用（目前还需要借助es5shim、babel等），重点还是ES5, ES6, ES7。b) javascript 语言范式 。这个名字可能并不恰当，只是我找不到可以描述“面向对象”，“函数式”这个两个概念的概念。javascript不完全是一个面向对象的语言，它的很多设计理念都有函数编程语言的影子，甚至说如果你不用面向对象，完全可以把它理解成一门函数式编程语言。javascript的很多语言特性，都是因为他具有函数式语言的特点才存在的。这部分推荐先学习面向对象的基本理论，对封装，继承，多态等概念要理解，维基百科，百度百科会是你的帮手，另外推荐《object oriented javascript》，应该有中文版。对与函数式编程可以参考这篇文章：c) javascript 语言内部机制。必须弄清如下概念：js中变量的作用域，变量传递方式，函数的定义环境与执行环境，闭包，函数的四种调用方式（一般函数，对象的方法，apply，call），以及四种调用方式下，‘this'指向的是谁。这部分内容你会在《javascript语言精粹》中详细了解。d) dom编程，这个web前端工程师的核心技能之一。必读《dom编程艺术》，另外《高性能javascript》这本书中关于dom编程的部分讲的也很好。e) ajax编程，这是另一核心技术。ajax建议在网上查些资料，了解这个概念的来龙去脉，百度百科，维基百科上的内容就足够了。真正编程是很容易的，如今几乎所有框架都对ajax有良好的封装，编程并不复杂。另外，ajax未来几年会被
取代，也需要了解。另外关于xhr2，cors（跨站资源共享），formData文件上传，也需要了解。f) es5, es6。现在开发js大部分基于es5的，ie8以下通过es5-shim。但利用一些工具，现在已经可以直接写es6代码了，尤其在reactjs，nodejs类型的项目中。对于从es5，es6每个阶段js发生了哪些变化都需要系统学习，学习顺序建议是 JavaScript基础 -& es5 -& es6，越靠前的越重要。一些参考链接：3. html5。需要了解html都提供了哪些api，然后项目中用起来。这部分没有什么难理解的，关键在于能用html5解决业务问题，以及不支持html5的浏览器的降级方案。这部分体现了前端的一个思想：面向未来编程，尽早将新技术引入业务中来，而不是过分考虑兼容性问题，进而导致面向过去编程。再进一阶 · 代码层面：有了以上知识，对于大多数小型网站，你应该已经可以写出能够工作的代码了。但要想成为更专业的前端，你还需继续努力。更高的要求大概还有四方面：1易维护，2可测试，3高性能，4低流量（移动端）。1. 易维护。对于页面你该理解‘样式’，‘数据’，‘行为’三者分离，对应的当然就是css,html,js。对于js代码，你最好了解设计模式，重构，MVC等内容。2. 可测性。3. 高性能。必读《高性能javascript》4. 低流量。移动端关注比较多。再进一阶 · 工程层面：前端项目同样面临软件生命周期的各个环节，首先是代码管理，你必须学会使用svn和git。其次是代码的构建，如今前端代码构建已经不是简单的压缩一下了，需要进行依赖管理、模块合并、各种编译，必须要学会使用grunt、gulp等前端构建工具。然后呢？以上内容只是简单说了前端学习的顺序。前端工程师应该有的知识结构请参考这里：补充：对于前段开发，基本内容就这些了，可以根据自己的兴趣爱好选择性学习以下内容。1. 交互设计。大公司依然有专业人士搞这些，不过不懂交互的前端一定不是好前端。推荐《简约至上》。2. 后端。应该说前段工程师必须至少了解一门后端语言，不过如果爱好也可深入学习，入手难度比较低的应该是php了。这部分由可分为基于页面，基于框架两种。大型项目都是基于框架开发的，建议至少了解一个MVC框架，比如php的ci, yii, yaf 等，好还框架的设计思想都大同小异。如今NodeJs在大公司已经得到普遍的使用，推荐大家使用在Node上使用Koa框架做一些后端服务的开发。3. Android和ios开发。时至今日，前端的工作领域已经非常广泛，native的界面开发本质上也是前端开发，个大公司都面临着Native环境和web环境页面同时维护的问题，如果能够在技术上得到统一，将会有巨大的价值。对于学有余力的同学，应该了解Native开发的基本流程，至少了解到界面构建的技术。4. 如果你能够认真看到这里，说明你对前端有真爱，最后说一个编程习惯的问题，绝对是保你工作平安，少出故障。代码提交前必须做的三个事情：A. git diff（svn diff）,检查所有变更；B. 跑一边单元测试；C. 手动运行一遍所有demo.如果你以上内容你都已掌握，想加入一个牛B的前端团队，可以私信我。坐标：杭州·天猫·前端（以上内容最初发布于2012年上半年，已经更新过几次了，我会持续维护，希望对后来人有帮助。加油、共勉！最后更新时间： 15:27）
虽然我不是零基础,在一个半月前，对前端(JS全端?)这块我是一窍不通的。然而在一个半月以后，我已经能利用 nodejs+express+angular+mongodb 仿一个简单的知乎了。你可以看我的这个项目——————————————————————————学习路线1.
百度前端技术学院。非常好非常好的项目，对新人十分友善。分四个task，每次都会有详细的学习资料提供，跟着这个项目的步骤来，差不多大半个月html+css+javascript基础就都可以了。2.接下来学习框架,在如今这个前端框架满天飞的年代。我个人建议还是学好angular.js，推荐资料
和官方文档。或者 网易云课堂 金旭亮老师的课程中也有详细介绍angular的，可以看看。3.后端 nodejs 推荐资料 《nodejs入门》 《nodejs开发指南》。另外自己看一下express的文档4.mongodb我没怎么仔细了解，属于边用边看文档的阶段。————————————————————————————finally学习数据结构与算法 c/c++ java 编译原理 计算机网络 操作系统贴几张 copyzhihu的图
首先你已经不是零基础了。其实这种事情没有什么捷径，亲自动手，一步一步来即可，不能好高骛远。Step 1: 用 HTML + CSS 模仿几个漂亮的静态页面。当你看到现在大部分的网页都觉得能大概猜到怎样做，并且花时间真的能做出来的时候，即可进入下一步。注意，这个时候请你不要管浏览器兼容性或者太过注意代码的优雅结构，因为没必要。做到能兼容现代浏览器，内容和样式基本完全分离即可。这大概需要半个月到一个月的学习时间。Step 2: 用 HTML + CSS + JS 写几个有交互的页面。例如，你可以写一个漂亮的注册页面，它能够验证各种输入是否符合条件并且有一个用原生 JS 实现的日期选择器（Date Picker）。或者，写一个漂亮的，有动画的相册。注意，这个阶段请使用原生 JavaScript。同样的，兼容现代浏览器即可。这大概需要半个月的学习时间。Step 3: 入门一门后端语言。按照你的情况，就 php 吧。有了上面的经验，php 入门之后，相信你能够做一个漂亮的无用户留言版了。请把数据存贮在文件中，因为你还没有学习 SQL 嘛。这大概需要半个月的时间，如果你学习能力强，一个星期也不是没有可能。Step 4: 入门一个关系数据库。比如说 MySQL。DDL 和 CRUD ，请一定要熟练。恩，这个阶段不要谈什么优化，那是扯淡。现在，你大概可以做一个多用户的博客程序了。这大概需要半个月的时间。你看，两个半月不到你就可以成为一个初级的 Web 开发者了。博客做好之后，你可以尝试造更多的轮子。比如：带简单的用户权限的论坛程序、简单的记账工具，等等，做你喜欢做的任何小程序都行。在这个过程中，你会变成一个熟练的初级程序员，或者，你为了偷懒，会学会 jQuery，Smarty 等框架。有一天，你发现你靠写小程序提高不了水平了。接下来就要学习真正的干货了。学习 C 语言。别问我为什么，我就是觉得一个程序员应该要学过 C 语言，牛逼不牛逼是另外一会事儿，况且很多书都是用的 C 语言描述。别光学语法，弄清编译是什么，链接是什么，指针是又怎么一会事儿。学习数据结构和简单的算法。你看，你学完 C 语言就能学数据结构和算法了，我难以想象用 php 来描述数据结构和算法会有多么地奇怪。如果你觉得学了之后还是不知道数据结构究竟是什么，有什么用，那证明你还没有真的学到。学习一门面向对象的静态编程语言。推荐 Java。学得有多好，就看你花了多少时间了。请务必仔细阅读各类相关书籍，深刻领会面向对象的重要编程思想（不过，切忌迷信面向对象编程）。学习操作系统和计算机网络。至少一些基本的概念需要弄清楚，具体的细节，没有必要过于纠结。Okay...以上都可划为「不求甚解」的阶段，接下来就可以选一个方向（前端，或者后端）「求甚解」了。在「求甚解」的阶段里，我这里就不细说了，也没法儿细说，并且你到了这个阶段，一般是不需要别人告诉你需要学什么了。所以，我只说在进入这个阶段之前，或者刚刚进入这个阶段时，最好去做的一些事情：看书或文档抛弃中文译本，借助各种工具阅读英文原版。学习使用 Unix-like 系统。学会提问[1]。订阅科技博客，了解业界正在发生什么事情。Happy hacking！[1] 提问的智慧：
前端资源汇总
综合类 | 地址
前端知识体系--
前端知识结构--
免费的编程中文书籍索引--
智能社 - 精通JavaScript开发--(视频教学)
重新介绍 JavaScript（JS 教程）--(文字教学)
麻省理工学院公开课：计算机科学及编程导论--
JavaScript中的this陷阱的最全收集--没有之一--
JS函数式编程指南--
JavaScript Promise迷你书（中文版）--
腾讯移动Web前端知识库--
大前端工具集 - 聂微东--
Web Front-end Stack v2.2--
入门类 | 地址
前端入门教程--
瘳雪峰的Javascript教程--（js笔记）
jQuery基础教程--
前端工程师必备的PS技能——切图篇--
结合个人经历总结的前端入门方法--
jQuery| 地址
jQuery API 中文文档--
hemin 在线版--
css88 jq api--
css88 jqui api--
学习jquery--
jquery 源码查找--
综合API| 地址
-包含各种API集合--
开源中国在线API文档合集--
devdocs-- 英文综合API网站
效果类 | 地址
js弹出层--
js焦点图轮播特效--
w3help-- 综合Bug集合网站
腾讯css3动画制作工具--
志爷css小工具集合--
bouncejs 触摸库--
animate.css--
全局CSS的终结(狗带 [译]--
工具类| 地址
css sprite 雪碧图制作--
版本控制入门 – 搬进 Github--
Grunt-beginner前端自动化工具--
慕课专题| 地址
张鑫旭 - 慕课系列--
lyn - 慕课系列--
艾伦 - 慕课系列--
碧仔 - Hello，移动WEB--
弹出层| 地址
artDialog 最新版--
artDialog 文档--
google code 下载地址--
贤心弹出层--
Angularjs| 地址
Angular.js 的一些学习资源--
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.js material UI|
react.js TouchstoneJS UI|
react.js amazeui UI|
React 入门实例教程 - 阮一峰|
React Native 中文版|
Webpack 和 React 小书 - 前端乱炖|
Webpack 和 React 小书 - gitbook|
Webpack，101入门体验|
webpack入门教程|
基于webpack搭建前端工程解决方案探索|
React原创实战视频教程|
移动端API| 地址
99移动端知识集合|
移动端前端开发知识库|
移动前端的一些坑和解决方法（外观表现）|
【原】移动web资源整理|
zepto 1.0 中文手册|
zepto 1.0 中文手册|
zepto 1.1.2|
zepto 中文注释|
jqmobile 手册|
移动浏览器开发集合|
移动开发大杂烩|
微信webview中的一些问题|
%A1webview%E4%B8%AD%E7%9A%84%E4%B8%80%E4%BA%9B%E9%97%AE%E9%A2%98
框架| 地址
特色的HTML框架可以创建精美的iOS应用|
avalon| 地址
Avalon新一代UI库： OniUI|
avalon.oniui-基于avalon的组件库|
Requriejs| 地址
Javascript模块化编程（一）：模块的写法 |
Javascript模块化编程（二）：AMD规范|
Javascript模块化编程（三）：require.js的用法|
RequireJS入门（一）|
RequireJS入门（二）|
RequireJS进阶（三）|
requrie源码学习|
requrie 入门指南|
requrieJS 学习笔记|
requriejs 其一 |
require backbone结合|
Seajs| 地址
seajs 中文手册|
Less,sass| 地址
sass教程-sass中国|
Sass 中文文档|
Markdown| 地址
Markdown 语法说明 (简体中文版|
markdown入门参考|
gitbook| 国外的在线markdown可编辑成书
一款国内的在线markdown编辑器
stackedit| 国外的在线markdown编辑器，功能强大，同步云盘
mditor| 一款轻量级的markdown编辑器
lepture-editor|
markdown-editor|
d3 Tutorials|
ruanyifeng|
兼容性| 地址
esma 兼容列表|
W3C CSS验证服务|
csscreator|
microsoft|(v=vs.85.aspx
在线测兼容-移动端|
emulators|
UI相关| 地址
MetroUICSS|
worldhello|
rogerdudler|
gogojimmy|
HTTP| 地址
HTTP API 设计指南|
其它API| 地址
javascript流行库汇总|javascriptoo
underscore 中文手册|
underscore源码分析|
underscore源码分析-亚里士朱德的博客|
underscrejs en api|
lodash - underscore的代替品|
backbone 中文手册|
qwrap手册|
svg 中文参考|
svg mdn参考|
svg 导出 canvas|
svg 导出 png|
ai-to-svg|
localStorage 库|
图表类| 地址
Highcharts 中文API|
Highcharts 英文API|
ECharts 百度的图表软件|
开源的矢量图脚本框架|
Vue 入门指南|
Vue 的一些资源索引|
awesome-vue|
正则| 地址
JS正则表达式元字符|
正则表达式30分钟入门教程|
MDN-正则表达式|
ruanyifeng - RegExp对象|
小胡子哥 - 进阶正则表达式|
正则在线测试|
ionic| 地址
其它| 地址
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公司版）|
网易前端开发规范|
前端规范资源列表|
最流行的PHP 代码规范|
最流行的PHP 代码规范|
Android| 地址
【敏捷开发】Android团队开发规范|
Android 开发规范与应用|
各大公司开源项目| 地址
Facebook Projects|
百度web前端研发部|
百度github|
alloyteam|
alloyteam-github|
alloyteam-AlloyGameEngine|
AlloyDesigner| 即时修改，即时保存，设计稿较正，其它开发辅助工具
H5交互页编辑器AEditor介绍| H5动画交互页开发的工具介绍
AEditor| H5动画交互页开发的工具
值得订阅的weekly|
腾讯html5|
奇舞团开源项目|
Qunar UED|
常用 |地址
ieBetter.js-让IE6-IE8拥有IE9+,Chrome等浏览器特性|
/wordpress/2013/12/iebetter-js-make-ie6-ie8-like-modern-browser-ie9-chrome
中国个人身份证号验证|
算法 | 地址
数据结构与算法 JavaScript 描述. 章节练习|
常见排序算法（JS版）|
常见排序算法-js版本|
JavaScript 算法与数据结构 精华集|
面试常考算法题精讲|
移动端 | 地址
fastclick|
no-click-delay|
JSON | 地址
模拟生成JSON数据|
返回跨域JSONAPI|
Html5 | 地址
HTML5 有哪些让你惊艳的 demo？|
CSS | 地址
browserhacks|
焦点图 | 地址
myfocus-官方演示站|
SuperSlidev2.1 -- 大话主席|
Ext, EasyUI, J-UI 及其它各种UI方案 | 地址
ext4英文api|
ext4中文api|
EasyUI | 地址
jquery easyui 未压缩源代码|
J-UI | 地址
Other | 地址
MUI-最接近原生APP体验的高性能前端框架|
Amaze UI | 中国首个开源 HTML5 跨屏前端框架|
淘宝 HTML5 前端框架|
KISSY - 阿里前端JavaScript库|
网易Nej - Nice Easy Javascript|
Kendo UI MVVM Demo|
Bootstrap|
雅虎UI - CSS UI|
页面 社会化 分享功能 | 地址
百度分享| pc端
JiaThis| pc端
社会化分享组件| 移动端
ShareSDK 轻松实现社会化功能| 移动端
友盟分享| 移动端
富文本编辑器 | 地址
功能齐全 tinymce|
百度 ueditor|
经典的ckeditor|
经典的kindeditor|
一个有情怀的编辑器。Bach's Editor|
tower用的编辑器|
summernote 编辑器|
html5编辑器|
wangEditor|
强大的独立日期选择器|
fullcalendar|
fullcalendar日历控件知识点集合 |
超酷的仿百度带节日日历老黄历控件|
日期格式化|
大牛日历控件|
我群某管理作品|
input按位替换-官网|
input按位替换-github|
bootstrap-daterangepicker|
国外30个插件集合|
JavaScript datepicker|
Datepair.js|
一个风格多样的日历|
弹出层式的全日历|
jquery双日历|
移动 | 地址
大气实用jQuery手机移动端日历日期选择插件|
jQuery Mobile 移动开发中的日期插件Mobiscroll |
Date library | 地址
综合效果搜索平台 | 地址
常用的JavaScript代码片段|
概述 | 地址
前端工具大全|
什么是前端工程化|
Gulp中文网|
gulp资料收集|
Gulp：任务自动管理工具 - ruanyifeng|
Gulp不完全入门教程|
为什么使用gulp?|
Gulp安装及配合组件构建前端开发一体化|
Gulp 入门指南|
Gulp 入门指南 - nimojs|
Gulp入门教程|
Gulp in Action|
Gulp开发教程（翻译）|
前端构建工具gulpjs的使用介绍及技巧|
Grunt中文网|
单屏轮播sochange|
左右按钮多图切换|
fullpage全屏轮播|
全屏fullpage|
单个图片切换|
单个全屏切换|
百度的切换库|
单个全屏切换|
旋转拖动设置|
类似于swipe切换|
支持多种形式的触摸滑动|
大话主席pc移动图片轮换|
基于zepto的fullpage|
[WebApp]定宽网页设计下，固定宽度布局开发WebApp并实现多终端下WebApp布局自适应|
/plums/archive//WebApp-fixed-width-layout-of-multi-terminal-adapter-since.html
判断微信客户端的那些坑|
可以通过javascript直接调用原生分享的工具|
JiaThis 分享到微信代码|
聊聊移动端跨平台开发的各种技术|
前端自动化测试|
多种轮换图片|
滑动侧边栏|
百度上传组件|
flash 头像上传|
图片上传预览|
图片裁剪-shearphoto|
jQuery图片处理|
模拟select
糖饼 select|
flexselect|
类似 Photoshop 的界面取色插件|
jquery color|
取色插件集合|
farbtastic 圆环＋正方形|
jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果|
clipboard 最新的剪切方案|
不是Flash的剪贴板|
facebook表格|
类似于Excel编辑表格-handsontable|
bootstrap-table插件|
datatables|
js 在线编辑 - runjs|
js 在线编辑 - jsbin|
js 在线编辑 - codepen|
js 在线编辑 - jsfiddle|
java 在线编辑 - runjs|
js 在线编辑 - hcharts|
js 在线编辑 - jsdm|
sql 在线编辑 - sqlfiddle|
mozilla 在线编辑器|
Html5 VideoPlayer|
Proton 烟花|
nodejs 篇幅比较巨大|
Node.js 包教不包会|
篇幅比较少|
node express 入门教程|
nodejs定时任务|
一个nodejs博客|
【NodeJS 学习笔记04】新闻发布系统|
过年7天乐，学nodejs 也快乐|
七天学会NodeJS|
Nodejs学习笔记（二）--- 事件模块|
nodejs入门|
angularjs nodejs|
从零开始nodejs系列文章|
理解nodejs|
nodejs事件轮询|
nodejs cms|
Node初学者入门，一本全面的NodeJS教程|
NodeJS的代码调试和性能调优|
常规优化|地址
Javascript高性能动画与页面渲染|
移动H5前端性能优化指南|
5173首页前端性能优化实践|
给网页设计师和前端开发者看的前端性能优化|
复杂应用的 CSS 性能分析和优化建议|
张鑫旭——前端性能|
前端性能监控总结|
网站性能优化之CSS无图片技术|
%E8%83%BD%E4%BC%98%E5%8C%96%E4%B9%8Bcss%E6%97%A0%E5%9B%BE%E7%89%87%E6%8A%80%E6%9C%AF
web前端性能优化进阶路|
%A7%E8%83%BD%E4%BC%98%E5%8C%96%E8%BF%9B%E9%98%B6%E8%B7%AF.html
前端技术：网站性能优化之CSS无图片技术|
浏览器的加载与页面性能优化|
页面加载中的图片性能优化|
Hey——前端性能|
99css——性能|
Yslow——性能优化|
YSLOW中文介绍|
转一篇Yahoo关于网站性能优化的文章，兼谈本站要做的优化|
Yahoo!团队实践分享：网站性能|
网站性能优化指南：什么使我们的网站变慢？|
网站性能优化实践，减少加载时间，提高用户体验|
浅谈网站性能优化 前端篇|
前端重构实践之如何对网站性能优化？|
前端性能优化：使用媒体查询加载指定大小的背景图片|
网站性能系列博文|
加载，不只是少一点点|
前端性能的测试与优化|
分享网页加载速度优化的一些技巧？|
页面加载中的图片性能优化|
web前端优化(基于Yslow|
网站性能优化工具大全|
【高性能前端1】高性能HTML|
【高性能前端2】高性能CSS|
由12306谈谈网站前端性能和后端性能优化|
AlloyTeam——前端优化|
毫秒必争，前端网页性能最佳实践|
网站性能工具Yslow的使用方法|
前端工程与性能优化（上）：静态资源版本更新与缓存|
前端工程与性能优化（下）：静态资源管理与模板框架|
HTTPS连接的前几毫秒发生了什么|
Essential Web Performance Metrics — A Primer, Part
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百度基础架构）|
推荐作品|地址
winter代码片段需要翻墙|
岑安作品集|
当耐特demo集合|
米空格 js作品|
SeaJS组件库|
颜海镜作品|
脚儿网作品|
javascript个人作品|
妙味的雷东升游戏作品|
javascript作品集|
云五笔，灰度产生生成工具|
个性的作品主页|
ucren js demos 集|
实例陈列架|
zoye demo|
jyg 游戏案例|
很多jquery插件|
不羁虫 - soJs 作品系列|
国外大牛精品|地址
pazguille|
简历模板|地址
不错的个人简历|
动画方式的简历|
组件丰富简历|
haorooms博客|
Justin Young|
面试题|地址
那几个月在找工作（百度，网易游戏）|
2014最新面试题|
阿里前端面试题|
2016校招内推 -- 阿里巴巴前端 -- 三面面试经历 |
腾讯面试题|
年后跳槽那点事：乐视+金山+360面试之行|
阿里前端面试题上线|
拉勾网js面试题|
Web开发笔试面试题 大全|
前端开发面试题|
2014最新前端面试题|
前端工作面试问题|
前端开发面试题|
5个经典的前端面试问题|
最全前端面试问题及答案总结 |
如何面试一名前端开发工程师？|
史上最全 前端开发面试问题及答案整理|
前端实习生面试总结 |
史上最全 前端开发面试问题及答案整理|
BAT及各大互联网公司2014前端笔试面试题：JavaScript篇|
前端开发面试题大收集|
收集的前端面试题和答案|
如何面试前端工程师|
前端开发面试题|
牛客网-笔试面经|
iconfont|地址
zhangxinxu-icommon|
用字体在网页中画ICON图标(推荐教程|
字体压缩工具|
前端开发工具|地址
IntelliJ IDEA 简体中文专题教程|
Webstorm,InterllIdea,Phpstorm|
SublimeText|
visual studio code|
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
debugging/md/Use-Tools/remote-debugging.md
mac移动端调试|
mac移动端调试|
无线调试攻略|
无线调试攻略|
屌爆了,完美调试 微信webview(x5|
微信调试的那些事|
远程console|
微信调试工具|
各种真机远程调试方法汇总|
iOS Simulator|地址
Simulator|
Xcode中的iOS模拟器(iOS Simulator的介绍和使用心得|
loading img|
智图-图片优化平台|
在线png优化|
生成二维码|地址
生成二维码|
浏览器同步|地址
liveReload|
File Watchers|
在线PPT制作|地址
前端导航网站|地址
界面清爽的前端导航|
前端网址导航|
前端开发资源|
前端开发仓库 - 众多效果的收集地|
前端资源导航|
F2E 前端导航|
常用CDN|地址
百度静态资源公共库|
360网站卫士常用前端公共库CDN服务|
Bootstrap中文网开源项目免费 CDN 服务|
开放静态文件 CDN - 七牛|
CDN加速 - jq22|
jQuery CDN|
Google jQuery CDN|
廖雪峰-Git教程|
git-for-windows|
GitHub 添加 SSH keys|
git常规命令练习|
git的资料整理|
我所记录的git命令（非常实用）|
企业开发git工作流模式探索部分休整|
GitHub 漫游指南|
GitHub秘籍|
使用git和github进行协同开发流程|
动画方式练习git|
优秀JavaScript项目 | 地址
Angular和Webpack种子文件|
Fis3面向前端的工程构建系统|
Fis3 DEMO|
前端JQuery系列:源码剖析|
avalon框架|
Microsoft ChakraCore 微软的Chakra引擎|
Quintus HTML游戏引擎|
一个用node.js搭建的有趣博客|
Web前端助手--FeHelper（Chrome扩展）|
百度前端技术学院|
Cheerio（node.js中的jQuery）|
nodejs的一个聊天软件 类似微信|
使用html5和node.js构建的网易云音乐|
babel ES6转换为ES5|
一个JS富文本编辑器|
一个JS脑图可视化工具|
一个JS写的Flappy Bird Game|
一个JS写的GBA模拟器|
SegmentFault写的Markdown解析器|
基于node.js的Ghost博客|
学习react的demos|关于我：程序员的专栏：
献上我写的《》电子书放在GitHub上，遇到错别字等内容欢迎来Pull Request。对这本书有兴趣的，求个微信公众号(Phodal)关注~
帮不了题主太多，但是路过推荐些资源： 一个专门收集高质量国内外学习网站的小众站点。************另附学霸养成学习榜单(不谢，可以点个赞嘛~\(≧▽≦)/~)************一、汇总榜单：二、适合大学生的：三、IT互联网相关的：四、IT职业技能相关网站：五、其他：麻烦点个赞好嘛！
其实前端我接触的并不多，但现在不是提倡Full Stack全栈工程师嘛。如果你掌握下面的会让你如鱼得水，不需要被UI,UE人员优先级而影响。：在web2.0时代，RoR一下子获得很多创业公司的青睐，开发者将Rails作为一个框架来创建数据库支持的Web应用，它本身是一个完整的解决方案，通过默认的标准实践（convention）可以很大的加快开发效率，无缝的整合所有子组件以提供给开发者一个统一的接口。当时Twitter早期也是用这个框架写的，但这个也是双刃剑，在性能和内部机制上很难调节。：Python的前端管理框架，直接生成管理页面。有人经常那上面的作为PK：PHP的一种模板语言，很容易上手。Twitter提出的HTML，CSS和JS框架，让你的web app容易适配到各种平台，比如手机上。：Javascript的最流行的库，可以做一些Ajax调用。：就是下一代的HTML标准，增加了一些兼容的便签，使得在手机和浏览器中阅读效果一致。对应的是Native APP，就是原生的从底层开始写的APP。当年Facebook是走HTML5的路，发现不对劲，性能很差，体验糟糕。赶紧转变成Native APP才让它重新赢得市场。：js写的后端服务器，处理高并发场景性能佳，特别适合移动的服务器端。是其中一个组件，为了在浏览器和移动设备上创建实时应用而产生的，它可以模糊不同传输机制之间的差异：各种可视化的效果，确实非常酷。: 基于CSS3转换和过渡、工作于现代浏览器、并受的理念启发的演示工具。：前端的MVC，为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构。: 一个构建在 Node.js 之上的平台，用来开发实时网页程序。Meteor 位于程序数据库和用户界面之间，保持二者之间的数据同步更新。因为 Meteor 是基于 Node.js 开发的，所以在户端和服务器端都使用 JavaScript 作为开发语言。而且，Meteor 程序的代码还能在前后两端共用。
张帅的回答令我明确了很多东西，写了一篇文章总结了盒子模型，流动，block，inline，层叠，样式优先级，等概念有兴趣的同学欢迎阅读指正
对于你说的 “图片等素材是很是欠缺的。”我觉得这个不是阻碍。不必去精通PS，现在的网页除了那种设计感强的宣传页，其实对图片的要求并不高，需要的时候用用PS就OK了，要求高的可以交给专业美工。但是对于设计理论，配色排版知识等还是有必要去深入学习，多看看国外优秀设计，上上花瓣之类的网站。所以希望你不要闭门造车，还是去牵一根网线吧。框架了解即可，只要你熟悉了js，框架什么的上手还不简单？框架屏蔽简化了很多东西，比如ajax的实现原理，建议去深入下，这部分涉及到的东西比较重要。学习还是要把基础打好。我就见过很多用jQuery的人，基本原理都搞不清楚，脱离框架连选择元素都不会，这样自然是不可取的。面向对象这一块，对于没有面向对象语言实战基础的人来说是不知道怎么去学。这个就可以去学别人的库，看别人是怎么使用面向对象的，了解这样的好处，然后自己模仿模仿。一定要善用开发者工具。firefox的firebug和Chrome的F12都是很好的选择，用好了这个必会发现他带给你的帮助比看一本书更多。你把firebug摸透了你还担心对DOM理解不够？考虑到未来，html5和css3是必须学习的。
已有帐号？
无法登录？
社交帐号登录