前端知识学习步骤

著作权归作者所有。
商业转载请联系作者获得授权，非商业转载请注明出处。
作者：龚一峰
链接：https://www.zhihu.com/question/19862294/answer/44311692
来源：知乎

• css 编写规范 http://cssguidelin.es/
• 前端性能优化的24种方法 http://browserdiet.com/en/
• 学习js正确的方法 JS: The Right Way
• 很有趣的js编程教材（才出的） Eloquent JavaScript
• 设计师写的js入门教程，页面很赞 http://rachelnabors.com/javascript-for-designers/#slide-0
• CSS女神开发的正则表达式工具，超赞： RegExp playground

著作权归作者所有。
商业转载请联系作者获得授权，非商业转载请注明出处。
作者：陈炳遥
链接：https://www.zhihu.com/question/19862294/answer/47926672
来源：知乎

以前学习过一段时间的web前端开发，整理了一些我看过的/我认为比较好的学习资料（网站、书籍）。不要问我为啥没有进阶版，我只是一条产品汪而已，求轻喷。＝＝

以下引用知乎 @李路 的话。

以我的经验，大部分技术，熟读下列四类书籍即可。

入门，用浅显的语言和方式讲述正确的道理和方法，如head first系列
全面，巨细无遗地探讨每个细节，遇到疑难问题时往往可以在这里得到理论解答，如Definitive Guide/Programming xx系列
实践，结合实际中经常遇到的情景环境，来描述如何设计和解决问题，如cookbook系列
深入，讲解一些文化，思路，甚至于哲学上的东西，真正做到深入一种语言去编程，如unix编程艺术，程序员修炼之道等等

受李路老师的启发，我结合了自己在学习前端过程中用到的资料如下：

一、 语言基础（以书和网站为主）
1.HTML&CSS：
（1）入门：

• Codecademy上的html&css课程——在线交互式编程平台，弄清楚基本概念和基本语法
• w3school上的HTML/CSS教程——技术手册式的教程，比较全面，照着实例敲一遍

（2）进阶：

• 《精通CSS·高级Web标准解决方案》——对CSS有一个比较深入的学习，对核心技术了解
• 《HTML5权威指南》——非常全面的书，内容也很新，包含了HTML5+CSS3+JS DOM

（3）实战：

• bootstrap框架: bootstrap中文网/《bootstrap实战》——流行的前端框架，注重实用即可
• Codeademy上的Web Developer Skills+Projects——通过自己做小页面/小网站来运用所学

（4）提高：

• 《CSS禅意花园》——提高自己的艺术设计能力，通过实例来学习如何用CSS设计出漂亮的页面

2.Javascript：
（1）入门：

• Codeademy上的javascript教程——实例比较多，比较浅，算是基本了解JS
• w3school上的JS教程——比较详细的了解下JS的特性
• 《JavaScript DOM编程艺术》——讲js和DOM的基本知识和运用，了解JS和DOM可以做什么

（2）进阶：

• 《JavaScript高级程序设计》——JS圣经，比较全面，非常好的一本书，比犀牛书可阅读性强
• 《JavaScript权威指南》——传说中的犀牛书，好厚好厚的一本书，不适合入门，适合当工具书看
• 《JavaScript语言精粹》——很薄的一本书，但是可以帮助你快速了解JS的精华部分

（3）实战：

• jQuery框架: w3school上的jQuery教程/Codeademy上的jQuery教程——了解Jquery
• 《jQuery基础教程》——流行的前端框架，注重实用

（4）提高：

• 《高性能JavaScript》——讲如何提高js性能，以及构建和部署文件到生产环境的最佳实践
• 《Secrets of the JavaScript Ninja》——jQuery作者写的书，如果你觉得精通JS了再看这本书

附录：前端网站大汇总
1、前端知识体系：

• 前端知识体系及修炼攻略：前端知识体系及修炼攻略——对前端知识体系剖析的非常好，尤其是最后对前端的阶段性划分，对前端学习很有指导意义，推荐！
• 前端开发知识结构：JacksonTian/fks · GitHub——有个前端知识框架的思维导图，给了很多链接和好书，推荐！

2、技术资讯类

• W3Cfuns : 前端网（W3Cfuns）——国内最大的前端站，比较全
• 大前端：大前端_关注前端开发和wordpress主题的博客——没有W3Cfuns那么杂，有些wodpress的主题，“前端导航”也比较好用
• W3Cplus:W3CPlus | css3教程-css3实例-css3动画——也是比较全，有个“国外优秀译文”，非常喜欢
• 前端观察 ：前端观察——专注于前端设计与开发的博客，比较有深度，排版干净，推荐！
• 前端乱炖 ：前端乱炖, 最专业的前端技术内容社区——有点像前端的知乎，有问答平台和专栏啥的

3、技术教程、文档类

• 慕课网：慕课网-学习计划
  ——超级实用的视频教程类网站，各种小实例，非常适合照着“前端学习计划”计划学习
• codecademy :http://www.codecademy.com/——英文，简单有趣的互动编程学习网站，非常适合入门，中文版是http://www.fenby.com/
• W3schoo在线教程l: w3school 在线教程——中文，适合入门，教程相当全，在线实例可以敲，可惜较浅，有些地方不太准确和深入
• 火狐开发者网络MDN：Mozilla 开发者网络——中文，不仅有技术文档，而且有相当多的参考资料和资源、工具，推荐！
• W3C标准：Standards - W3C
  ——英文，不解释，官方文档，真前端和伪前端就在于此。可惜英文的，而且可读性差。极不适合入门，适合提高。
• Web平台文档：Your Web, documented · WebPlatform.org——英文，权威性仅次于W3C标准，可读性高于W3C标准，W3C官方认可，高质量。