近10年来，前端变化非常的快！

07年哪会儿，重构工程师这个词还是很时髦的，哪时候如果你想进入这个领域，很多行业内的朋友会向你推荐《网站重构》（由阿捷翻译的一本脸谱书）、《CSS禅意花园》、《CSS布局实录》（中国人写的）、《精通CSS》（但是一般初学者大家不推荐）这些书。

哪个时候大家推荐上的网站有蓝色理想，还有阿捷创办的网页设计师这个网站：http://www.w3cn.org/index.html

在当时，我选择了《CSS布局实录》这本书，这本书我觉得写得还是非常不错的，但是后来我的这本书送人了，所以我现在手上也没有这本书。

虽然我当年读书的时候，老师还曾教过我用Dreamweaver（当年网页三剑客还是很火的）做网站，可以看懂一些HTML代码，但是当我买来这本书以后，其实还是一头雾水的。

因为书中给你讲的都是Web标准、HTML、CSS，讲标签，讲语义化，讲盒模型，讲CSS属性，讲布局等，并没有谈到比如像当时QQ、网易、新浪这样的网站是怎么做出来的，而且我本来就不会设计，在学校读书的时候，当时就认为要想做网站开发，就需要会设计。所以当我拿到这本书的时候，感觉并没有解决的实际问题。

在后来，我弄明白了，其实在一家公司内部的流程中，重构工程师的上一个环节是产品经理、设计师。也就是产品经理会给你需求原型，设计师会给你设计稿，有了原型和设计稿以后，重构工程师可以干活了，哪个时候有一个词：还原设计稿。

既然要和设计师打交道，会有设计稿，哪自然就少不了PhotoShop，当我明白这一点以后，问题又来了。如何使用PhotoShop来与代码结合呢？

当年哪个时候，QQ群还是很火的，热心的朋友也非常多，氛围非常好，所以有很多QQ群里的朋友帮助我！

通过大家的帮助，和自己的总结，最后明白了，当你拿到设计稿以后，首先我们需要分析设计稿，理解设计稿中整体的布局，哪些是主要内容，同时，还有一个很重要就是哪些是用来修饰的，哪些是内容（文字和图片等）。

只有理解了这些以后，我们才能够写出整个页面的布局，才能够用PhotoShop帮助我们，把用来修饰的图片提取出来用着背景图片，把用着内容的图片提取出来，做后续CSS的准备工作。

理解了上面的概念以后，当你拥有一本不错的入门书以后，你学起来就快了，好吧，我们现在就开始来为学习前端做一些准备工作：我们先得有一台电脑，然后在我们的电脑上装上以下工具：

• 编辑器（Sublime Text/Atom/VS Code/其他任选其一）
• 浏览器（至少需要Chrome，Firefox、IE、Safari可选，而且Safari在Windows上已经不更新了）
• PhotoShop（如果你需要和UI打交道的，这个工具还是需要的）

有了以上工具以后，我们还缺少设计稿，但是我们自己不会设计怎么办？

没关系，你可以去模仿一个QQ的网站，或者淘宝，或者其他网站。

因为我们在以后的实际工作中是需要和设计稿打交道的，所以我们这里不建立你立即使用Chrome的开发者工具去查看别人的源代码，你先按照你在书中学的，和上面我所说的，分析结构。所以我们需要把你想模仿的网站截图以后进行保存成图片，然后使用PhotoShop打开，来提取页面中的颜色，宽度，高度等信息。

好了，先说这么多，因为经过十年的发展，现在的整体前端发展得已经变化很大，但是你想成为一个专业的前端工程师，HTML,CSS还是必不可少的，所以切图的技能还是需要的，所以我觉得还是有必要学习一下如何切图。除非你想做一个纯的JavaScript工程师。

但是一定要清楚，如果你选择前端，你就要做好心理准备，前端很好玩，但是也很苦，要求也很高，你需要数学好，算法好，而且需要学习的东西很多！

上面写得比较乱，欢迎指正与交流！

扫码关注w3ctech微信公众号