前言

这是一本 Web 前端开发入门的学习书籍，它完成于我创办 “妙味课堂” 的七年后。在这七年间，有许多朋友都问过我同一个问题：我想学习前端开发，能不能给我推荐一本好书？每次遇到这种问题，我多少还是有些犯难的。虽然市面上好书不少，但细琢磨起来，给别人推荐一本技术类书籍，最起码需要满足两个条件：

一是自己看过以后，感觉这本书确实好；

二是这本书对学习者真得有帮助。

先说第一个条件，怎样才算是自己感觉真得好呢？无非是这种情况：自己曾经在某个阶段，被某些技术问题所困扰，就在这段迷茫期，刚好遇见一本好书，它恰到好处地解决了我的困惑，因此对这本书印象深刻、感觉很好。

第二个条件说的是你觉得好的书，如何能确保其他人也感觉好呢？为了满足这个条件，我需要去了解咨询者的学习基础，例如他学到了哪个阶段？做了哪些练习？经常遇到的困惑是什么？他的解决方案通常是什么？即便如此，阅读风格也会因人而异，有些人喜欢阅读幽默风趣比喻颇多的书籍，而有些人却不喜欢太多花里胡哨的内容，认为思路清晰、简洁明了地把问题描述清楚就行。因此，如果你完全站在对方的立场、设身处地去想这些实际问题，那么推荐一本书这种看似简单的小事，也变得困难了。

因此，面对推荐书籍这样的问题，我的回答是这样：你想买一本真正适合自己的书，那你最好到书店里，亲自去翻翻那些书，如果遇到你看了超过 15 分钟以后还不愿撒手的书，那就果断把它买走吧！这本书应该适合当下的你。

这样的回答并不能让所有的咨询者满意，他们会执着地继续追问下去，直到我给他们推荐几本市场上卖得好的书，才十分感谢地离开。

好在这样的尴尬状况终于结束了，因为我们自己的图书即将出版！我可以非常兴奋、郑重其事地将这本书推荐给所有前端初学者，并且告诉你这本书为何适合你，因为这本书至少有以下这些特点。

第一，这本书完全根据妙味课堂的培训大纲改编而来，它既源于实战，又十分注重系统性和专业性，最关键的是：当你在学习这本书的知识点时，如果遇到技术问题，随时可以到妙味课堂的社区中去提问。妙味课堂是资深的前端开发培训机构，妙味的讲师们每天都在回答众多初学者的各类技术困惑，因此，我们极有把握在你简短的提问中准确判断出你的困惑是什么，并指导你去解决它。

第二，为了保证妙味课堂的教学质量，我们坚持做实体培训，经过七年时间的一线前端开发培训，我们深知学员会在什么地方有困惑，会在什么地方容易犯错误，这些问题的解决办法都汇集在妙味课堂的视频库。现在，我们把与本书相关的视频资源共享出来，希望能够帮助到正在用本书学习前端开发的你。

第三，在编写本书时，我们把妙味课堂多年来精心设计的案例（与本书相关的部分）几乎全都融入到本书中，你完全可以像我们的实体学员一样，一边学习一边动手实战！实战是学习的必经之路，也是检测是否真正掌握知识的关键！更何况，当你遇到练习上的难点时，妙味课堂社区上有非常多热心的学员与你一起讨论交流，讲师也会参与其中。在这种相互鼓励、相互帮助的氛围中，在讲师频繁到社区解答各种技术问题的条件下，还有什么理由学不会呢？

接下来我想和大家聊聊关于 Web 前端开发的学习路径。在此之前，你需要了解“Web 前端开发” 这个职业的工作内容。职场上的 “Web 前端开发工程师”需要解决的问题主要有四类：

一是浏览器端的各种界面展示问题；

二是产品与用户之间的一系列人机交互问题；

三是前端与后台开发者之间的数据处理问题；

四是产品功能上的程序逻辑问题。

在前端的表现形式上，会从 PC 端一直延伸到移动端。因此，学习前端开发需要经历以下几个阶段。

第一阶段：要把设计师精心设计的效果图和网站内容，通过一系列的技巧和编码方式，在浏览器上完美展现。以 PC 端为例，想要达成这个目标，意味着你必须要掌握 HTML 和 CSS，并能使用一些其他的辅助软件工具（如 PS 、编辑器、浏览器插件等），这样，才能在 PC 端浏览器上把设计师设计的静态图片变成浏览器内高效运行的 HTML 文件。那怎样才能算掌握HTML 和 CSS呢？你需要知道 “布局”是怎么回事，需要熟悉各种各样的页面结构制作技巧，需要知道如何用运用恰当的 HTML 标签并以最佳的语义化去呈现，还需要能够编写灵活且易维护的 CSS 代码……最后架构出 PC 端的整套静态页面，使得它在不同的浏览器内都能完美展现。这是学习前端开发的基础，非常关键！不论前端开发的新技术迭代有多么迅速，都必须要先踏踏实实地掌握HTML和CSS。这也是本书的定位。

第二阶段：能够完成整套的静态页面搭建之后，可以开始思考人机交互的诸多问题。作为前端开发人员，需要能开发出一个用户体验完善的网站界面。例如，看到一则网页新闻，被网页里面的一张小图片所吸引，轻点鼠标，图片即可放大呈现，左右滑动时图片还能以超细腻的动画方式进行切换。这是一个简单的交互体验，却能让用户产生好感，感觉这个网站是有生命的、有趣味的，这样，用户才愿意花更多时间停留在你的网页中。除了考虑用户体验，还要考虑各种数据交互问题、功能逻辑问题等，这些点点滴滴的问题组合起来，共同构成网站体验至关重要的环节。如果想做到这些，需要紧密配合上一阶段所讲述的布局结构，以及更多 CSS 命令，还需要你具有慎密的思维逻辑。这些问题是我们正在编写的JavaScript一书需要去解决的。

第三阶段：征服了PC 端大屏幕上的一切，可以转战到一块更小的屏幕：移动端！别小看这个小小的屏幕，相对PC端，移动端对新特性的支持变多了，度量单位也随之变化，各种脑洞大开的移动端适配技巧纷纷登场，诸多挑战性能极限的解决方案也不断出炉。无论是单指滑屏、双指操作，还是长按短触、摇晃手机……任何用户行为，移动端皆可随其变化而发生响应。那些为了解决某些问题而诞生的各种框架、各类组件库等，但凡工程化级别的开发人员，必不会对其感到陌生。我们想要征服移动端、想要构建各种易用性更佳的移动化产品，就必须遵循移动端开发的规则。带着镣铐却仍要跳出更精彩的舞蹈，这才是高手的风范！这些精炼的内容，将会在我们后续推出的移动端开发一书中去呈现。

经历了以上三个阶段的学习，算是踏上了前端开发工程师修炼之路。在掌握了诸多开发技巧过后，应当要实践更多项目，以此来验证自身所学。系统化的学习，一定是循序渐进的，这是我们多年实体培训和课程优化、改革的心得。我希望这套打磨了七年时间、经过上万名实体学员检验的课程体系，能给你带来实质上的帮助。

值得一提的是，这些年妙味学员已经遍布全国各大 IT 公司，在腾讯、阿里、网易、新浪、360、小米、京东等公司都能看到他们奋斗的身影。他们时常回到妙味课堂的社区，和大家讨论技术问题。通过社区，除了技术问题外，还可以探讨职业规划、公司招聘等问题，也可以看看他们在技术上遇到的新问题，以及他们的解决方案。

最后，回到这本书的话题上。我们录制了一个短视频，请在学习之前，扫描封面的二维码进行播放。短视频中详细介绍了高效地利用本书进行学习的方法，例如：本书的案例源码下载地址、作业源文件下载方式、章节相对应的视频观看方式、提问和问题解答通道、QQ 交流群、作品提交平台、问题反馈等。另外，要强调一点：购买本书后免费观看妙味课堂视频的有效期是1年。因为我们认为，在本书和视频的帮助下，你可以很快打好基础，成为前端开发的高手！

这套书籍的出版承载了我们极大的期望，尽管我们竭尽全力去编写，但书稿中难免会有不妥之处，若你在阅读本书时发现任何问题，或有不认同之处，请给我发送电子邮箱：leo@miaov.com，不胜感激。