零基础想要学好前端开发，必须先“学好切图做静态页面”

开头第一句，这个文章针对的是零基础学员。

WEB前端开发，是用JS来操作DOM和DATA，响应用户的操作，实现前端的交互，包括更新view和ui以及更多。

Dom，就是HTML页面。你点击一个DOM元素，触发一个JS事件，请求一个API接口，返回一个JSON，调用tpl或其它，生成或更新DOM。等待下一次事件触发。

这算是一个简单版的交互流程。

很多零基础的同学，被WEB前端职位的高薪所吸引，向往之，追求之。付出了很多的时间，精力，也确实是学会了HTML,CSS,JS,JQ。但对“WEB前端开发”却依然是不得其门而入。

原因就在于，

一、对于HTML网页的理解并不透彻；

二、对于“交互--响应”这个过程理解不到位。

因为时间关系，简单的说一下这二点。

HTML网页，在培训班里是做为HTML,CSS课程的面貌出现的。于是，很多同学以为学了HTML,CSS，就是学会了HTML网页制作。虽然网页在代码层面上确实是由HTML,CSS组成，但在实际工作中，网页制作并不等于“HTML + CSS”。

我在昨天的文章“新人提问 | 一个自学前端四个月的新人来信”说过，许多同学脑子里所学到的只是技术的罗列。我这句话的意思，是说培训班并不讲，这个网页是怎么来的，以及为什么要这么做。

培训班所讲的前端开发中的业务层面的内容也不完整，甚至是根本不讲。例如，这个网页它的需求分析，它的使用场景，数据传输与展示，等等，这些东西在网页上呈现的时候，需要什么样的DOM结构。

从代码的角度来讲，静态网页制作并不难，无非是HTML,CSS，这也导致很多同学对于网页制作的环节是轻视的。我并不是说它有多难，我只是说它的重要性并没有被许多初学者所认识到，当然这不怪他们，他们本来就不懂。只是培训机构嘛，早讲完早拉倒。

简单点说吧，切图做页面，它的重要性就在于，“决定前端的View层展现结构”，JS的整个运行结果，都是基于它的；JS控制的，也是基于它。

不熟悉静态页面的来龙去脉，就不知道JS往哪写，就抓不到你要写的DEMO的JS的起点，就无处下笔。

如果不重视这个，就会造成想要自己写点东西的时候，不知道写什么，不知道往哪写，不知道操作谁。

三不知。

业务需求UI设计，UI设计决定网页制作。哪怕你随便在网上找个网页或图，你也要给它假设一个业务场景。

否则，没有网页设计图，就没有静态页面，就没有业务，就不知道做什么，就不知道用JS写什么。

不要试图反驳我，因为这是工作流程决定的。

而多数培训机构只是填鸭式的教学，这也造成初学者脑子里只是一些程序，代码的机械复制。再加上一些同学自身的懒，学习效果就更呵呵了。

当然了，现在WEB前端分化的很厉害，上面那些说的是零基础入WEB前端坑的人。

-== 分割线 ==-

还有另一种，就是后端转前端。

他们是不必关心DOM的，他们是完全的操作数据。写的内容基本都很底层了，例如前端类库开发，前端框架与库，通用组件库，整体的前端架构制定，等等。基本不太涉及具体的UI交互

对于这种人来讲，JS只是另一种工具而已，他们不在此文的范围之内。

转行的同学，或没有扎实的计算机科学基础的人，至少在三年之内，不要想成为“他们”。