学 Web 前端开发，培训还是自学靠谱？

时间：2022-09-03 17:00:01 | 来源：网站运营

时间：2022-09-03 17:00:01 来源：网站运营

这个回答 2021 年 4 月有更新放在原回答后

=== 2015 年原回答 ===

如果姑娘不介意，来，把手伸过来，让叔手把手一对一教你，另外，把头靠过来一点，这样方便我跟你讲话，最好再近一点嗯嗯，这样学习前端才最靠谱，哈，开个玩笑。
培训靠不靠谱我不知道，对于我这种智商拙计的人来说，看书自学是挺靠谱的，毕竟智商低老师讲课我听不懂嘛，复习的时候不能倒带，让老师反反复复在讲台上单曲循环，也不能把老师绑在身边，让我能够在做练习的时候碰到不懂东西可以随时提问。 前面有许多人都分享了各种学习资源，不过貌似就是没人分享书单，那么我来给大家分享下我的自学前端所用的书单吧。看书又累又慢？谁让我拙呢，只能靠勤来补了，不然还能怎样呢。这些书效果非常不错，20个月前，我还是一个 local 广告公司的苦逼 copy ，现在是一个能够独当一面的前端工程尸了呢，收入也翻了许多倍呢，mac这种高大上的从前想都不敢想的东西，现在可以天天摸了有木有。下面的时间是我当时学习的时候的所用的时间，每天大约学习 3~4 个小时这样吧，每周大约会偷懒 1~2 天，OK 进入正题。

第一步：入门 html & css ，用时 2 周
Head First HTML与CSS（第2版） (豆瓣)
head first 系列的书一直很受初学者欢迎，语言诙谐，图片丰富，行大字稀，这本 700 多页的书 2 周左右就能看完。此书的用法非常简单，只需打开代码编辑器跟着作者的思路敲下去就可以了，一个个小案例从自己手上被敲出来，还真的很有成就感呢，因为是写给初学者的书，它假设读者没有任何相关的背景知识，新碰到的知识点，会用各种各样的图片说明一遍，生怕读者不懂。这本书学完，只要不是太复杂的页面，基本上能够临摹出一套长相上差不多的了吧。

第二步： 入门 javascript ，用时 3 周
JavaScript DOM编程艺术 （第2版） (豆瓣)
这本书很薄， 280 多页，一开始看的时候，其实我是拒绝的，因为当时我的编程基础只有能够用 c 写出让别人输入两个整数然后打印出这两个数相加结果这种程序的水平。然而即便如此，这本书依然能够让我看得懂。此书前言的第一句就说了，“它不是专门写给程序员的，而主要是写给 Web 设计师的。具体的说，本书是为那些喜欢使用 CSS 和 HTML 并愿意遵守编程规范的 Web 设计师们编写的。”好吧，虽然也不是写给我这种初学的傻子的，但反正只要它不是写给程序员的就好，因为当时我不是程序员啊，当然我也不是设计师，但我会写一丁丁 HTML 和 CSS ，这就够了。这本书跟上本书一样，新碰到的知识点，会专门用案例介绍一番，让人在不带着太多疑问包袱的情况下跟着作者的思路走，用法也跟上一本书一样，跟着作者的思路用编辑器一路敲下去，然后你会发现，自己能够给网页加特技了，duang~duang~ 棒棒的。

第三步：入门 jQuery，用时 3~4 周
锋利的jQuery (豆瓣)
这本书只需要看 1-9 章就够了，也就是 290 页左右的内容。看完 《JavaScript DOM 编程艺术》 可能会觉得里面的程序很繁琐，想要达到一些目的经常需要拐来拐去的。那么 jQuery 会解决这种繁琐，做到它所标榜的 write less, do more ， 也因此 jQuery 成为了几乎所有前端工程师必须要掌握的一个工具。这本书的内容有些啰嗦和跳跃，后面几章甚至还有错误，不过有上一本书的作为基础，配合搜索引擎是能够解决看着本书时碰到的绝大部分疑问的。打开编辑器跟着作者的思路把书上的例子都敲出来跑一遍，另外把最后的案例吃透。 jQuery 就算是入门了。

最重要的一步：复习巩固，用时 6~12 周

OK 至此， 入门学习已经完成，接下来是复习巩固，这才是学习的真谛。这一步，不能省略，不能省略，不能省略，重要的事情说三遍，否则会像一个学习了各种格斗技巧，但却廋得皮包骨连站稳都吃力的人一样毫无战斗力。此时可以用之前所学配合着搜索引擎模仿一些自己认为觉得好看的页面，学习使用一些第三方插件，大量模仿。无他，唯手熟尔。

这里列出一些在这个阶段有可能会用到的工具书和一些网络资源，希望能有所帮助。

工具书：

JavaScript高级程序设计（第3版） (豆瓣)

一本全面介绍原生 JavaScript 编程的书籍，从基础内容到高级内容都有，任何阶段的前端工程师都能从中学到知识。

精通CSS（第2版） (豆瓣)，这本书现在有第三版了，在这里（2021 年留）。

一本介绍 CSS 的书，把一些有用的 CSS 技巧汇集起来，供人学习，但可惜年代久远，不过依然有参考价值。

网络资源：

阮一峰的个人网站

这里会用一些通俗的语言介绍许多 js 编程中重要的中高级问题和技巧。

司徒正美 - 博客园

功能同上。但这里有个副作用，就是总时不时会听到一种叫做 Avalon 的玩意儿，但这不是现阶段需要深究的东西，目前只用知道 Avalon 是英格兰神话中拔出石中剑的亚瑟王战败后去的仙境就可以了。

w3school 在线教程

资源丰富的文档，碰到不懂的不管是 HTML CSS JavaScript 方面的内容都能够来看看。

张鑫旭-鑫空间

博主是一个把 CSS 研究得出神入化的男人，可以从他的博客里学到许多 CSS 相关的知识和技巧。

Bootstrap中文网

Bootstrap 是套优秀的 UI 组件库，其中的精华是它 css 代码，使用它你会发觉以前各种卡手布局的问题可以很快解决，并且不用自己写太多 CSS 代码就能弄出美如画（至少不丑）的页面。使用它，并且学习它的 less 代码的组织和设计，可以从中学会许多 css 架构的知识，棒棒的~

p.s less 是一种跟 CSS 很像，兼容 CSS 并且可以编译为 CSS 的样式语言

前面的步骤都完成了以后，恭喜入门，可以尝试去找一些相关的工作了，同时也再也不用担心被知呼上这位严重智商拙计的怪叔叔骚扰了。 在往后的路中可能会碰到许多奇奇怪怪的概念，比如 workflow ， mvc ， mmvc ， flux ，SPA 等类似的不是出自人类语言中的名词，就说明可以开始提高了：）

---

另外，可以点击下边链接免费获取更多学习资料，以及了解培训相关的内容，方便最后选确定学习方案，自学或是培训。

=== 2017.4 更新 ===

这问题回答的时候是 2015 年，我没想到这个回答会影响那么多人，现在两年过去了，前端这领域已经变了样，许多朋友吐槽现在学完上面所说的内容已经很难找到工作了，但不管怎样，上面的内容还是基础，入门的时候先按照上面的流程走一遍问题不大，但现在毕竟已经是 2017 年，入行前端的要求变得比原来多了不少内容，所以学完了上边内容的朋友还需要继续学习现代前端开发所需要掌握的知识，具体的路线可以参考我在另外一个答案的回答：https://www.zhihu.com/question/55886635/answer/147275692

另外之前提到的 w3school 在线教程 里面的内容比较老旧，现在有了更好的选择，那就是 MDN ，它的地址在这： JavaScript 。

=== 2021.4 更新 ===

推荐先读 2015 年的回答再看这里

现在是 2021 年，其实这些年来不少人给我留言，说这个回答帮助了许多他们走上了前端的道路，我在 2017 年更新过一次，现在再过去了四年。回过头看，很多东西已经物是人非，在我初学路上对我有很多帮助的司徒正美老师已经离开了，说来惭愧，我从来没有到他的博客上给他留言说过一句「谢谢」，我也从当初的初学者变成了创业公司的技术负责人，文风也不再那么戏谑（可能大家就是喜欢戏谑的文风呢？）就我在工作中招聘人的情况看，前端入行的门槛比起 2015 年和 2017 年高了许多，这个回答中提到的一些内容已经过期了，有一些内容依然值得学习，还有一些新加入的内容要考虑。

总的来说，现在想要找到前端的工作，要求比 17 年高了不少，但是总归是有途径的，我简单补充一下吧，首先是基础部分。

基础部分调整（也就是 2015 年的原回答）

第一步：入门的 Head First HTML与CSS（第2版） (豆瓣) 这本书里边说的知识，是基础中的基础在当下依然有用，这本书依然值得推荐。

第二步：JavaScript DOM编程艺术 （第2版） (豆瓣) 这本书里边的内容非常基础，但是基础到在现实的项目开发中许多已经过时不再用了，但是作为一本能让人从 0 到 1 慢慢学编程但又很薄的书还是值得去看的，花两三周的时间对 JavaScript 和对前端开发最经典的编程方式完成一次观赏之旅，同时感受到前端编程到底是在编个啥，抱着这个目的看这本书就好，另外还有一本类似功效的书，是深入浅出JavaScript（中文版）两本选择一本看就可以，看完了能够学会 JavaScript 最经典的样子，也为现代开发打下基础。

第三步： 锋利的jQuery (豆瓣) 这本书已经不需要再看了，jQuery 的时代已经过去，我们很少再需要写 jQuery 代码了。把节省下来的时间拿去做别的事情会更有意义。那么这一步改为学习 React 吧，React 是三大前端框架中的一个，三大框架中只有 React 我是自学入门的，其他的两个都是触类旁通，我就在这里介绍 React 和当时我学习时所用到的资源吧，首先也是最重要的 React官方文档的入门教程 这里简扼的介绍了 React 的使用方式，推荐搭建本地环境（教程中有），这样你能领略到有比 JavaScript DOM编程艺术 （第2版） (豆瓣) 或者 深入浅出JavaScript（中文版） 介绍的，更现代前端工程的开发方式，是天壤之别！另外你也会看到他里边的代码跟你在第二步中学到的代码语法有出入，是因为它用了更现代的 JavaScript，也就是我们日常开发时会用到的 ES6/7 ，你可以在 ES 6 入门——阮一峰 中查看相关知识。

第四步：彻底吃透 React 的官方教程以后，相信你能够自己写写玩具类型的小项目了，接下来就要开始学习 React 技术栈了，React 技术栈的意思就是以 React 为核心的一系列技术的组合，在这里推荐一本书 深入浅出React和Redux 这里会介绍如何使用 React 以及一系列与之相关的技术，来完成开发任务，但是这本书的成书年代是在 2017 年底，在阅读的时候务必安装的是和书中一模一样的 React 版本避免出错，相信我，能顺利的学习旧版然后在过渡到新版的过程，会比直接上新版然后一直踩雷要平滑得多的多得多。

最后一步也是最重要的一步：练习

这步不能省略不能省略不能省略不能省略。你可以临摹一堆页面，可以作出自己的 v2ex 或者 cnodejs 客户端（v2ex 和 cnodejs 都是技术论坛，他们开放了数据接口，学完前面四步你就知道我在说啥了），然后拿出自己最满意的个人作品，投简历去吧。

工具书：

JavaScript高级程序设计（第3版） (豆瓣) 这本书中的内容现在许多用不上了，买来收藏吧，可能极少情况下会需要查阅

精通CSS（第2版） (豆瓣)，这本书现在有第三版了，在这里，新版我没看过，但是旧版的知识本身就很硬核，新版应该也不会太差吧。

---

最后，可以点击下边链接免费获取更多学习资料，以及了解培训相关的内容方便最后确定学习方案，自学或是培训。