w3ctech

初入前端的困惑

近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微信

扫码关注w3ctech微信公众号

共收到5条回复

  • 07年,我还在网吧玩跑跑卡丁车呢~~

    前端确实越来越复杂,涉及的东西也越来越多。不过这也恰好体现了前端的价值。

    作者在前端界的影响力不言而喻。很难想象一个前端,不但需要学习这么多技术,还专注技术分享。 最气人的是,这么多年专注技术分享,前端却一点没拉下。 https://t.75team.com/ 在极短的时间内从前到后,迅速搞定。

    作者好屌,是在下输了~~

    回复此楼
  • 作者好屌,07年我还没上大学....

    回复此楼
  • 顶,学习的榜样

    回复此楼
  • 作者好屌,07年还在上初中

    回复此楼
  • 波大真是学习的好榜样

    回复此楼

只有w3ctech成员才能发表和回复。
登录 或者 注册 后发表或回复!