探索前端学习
从2015年8月下旬到现在学习前端已经有一段时间,从刚开始的不知道什么是前端到接触一些简单的前端的知识,从修改bug到独立切页面,从不知道什么是JavaSctipt 到做一些简单的交互效果。近乎半年的时间,我从一个“盲童”变成能够独立完成静态页面制作的员工,感谢一路走来,领导的指导,同事的帮助。为此,我想把自己的一些学习经验分享给还没有踏入前端的伙伴们,希望能够对你们有所帮助。
(一)什么是前端开发工程师
前端工程师,也叫作web前端开发工程师。是随着web的发展,逐渐的细分出来的行业。主要的职能就是把网站的界面更好的呈现给用户。前端开发的学习曲线是由快到慢,因而有很多的自学成“才”的前端开发工程师。但是一位优秀的web前端开发工程师,在知识体系上既要有广度,也要有深度。所以,如果你做好了成为一名前端开发工程师的心理准备,接受挑战吧!
(二)前端的知识体系结构图
web前端开发是一个典型的基于MVC模型的开发。HTML作为信息模型(model),CSS控制样式(view),JavaScript负责调整数据和展现逻辑(Controller)。如何更好的应用MVC进行开发呢?首先要掌握三大要素:HTML、CSS和JavaScript。(但是随着时代的发展,现在的前端开发三要素已经演变为:html5,css3,jQuery。但是具体的使用还要看项目)。
图 1
(三)切静态页面的学习
了解自己的职能和将要接触到的技术后,现在就可以进入实战篇--切静态页面。
l 第一步:PhotoShop 的学习
n 常用工具的了解和使用(选择工具、选框工具、切片工具、文字工具)
n 能够从设计师给的psd文件中切出自己想要的内容。
l 第二步: HTML的学习
n 了解常用标签,并学会应用
n 能够结合css做一些简单的页面
l 第二步: CSS的学习
n 了解常用的样式,并学会使用
n 能够结合html,通过控制html的样式,完成简单的页面的操作。
² 能够通过以上的三步学习,那么你就算是入门了。现在是不是觉得虽然知道自己要干什么,但是不清楚从哪里来进行学习呢。接下来我会分享一下工具和学习的网址给大家。(仅供参考)
² 常用软件分享(ps,ie6模拟器,标尺,雪碧图转换工具,文件对比工具,看图工具):http://pan.baidu.com/s/1qXjPStu
² 学习网站:
Html&css学习: http://www.51zxw.net/list.aspx?page=4&cid=393
Html&css学习:http://www.imooc.com/learn/9
Ps学习:http://www.imooc.com/learn/506
以个人的经验来看,这个自学的过程大概需要三周左右的时间,三周之后你就可以尝试着切一个简单的页面,如果此时能够成功,那么恭喜你,你可以调试前辈们的bug了。接下里的成长就看自己的修行了,我也在学习和努力当中,一起加油吧!(这种文章被大牛们勿看)
(四)工作流程
l 第一步:拿到设计师给的页面之后要通栏页面,做到心中有数
n 多少页面,页面的复杂度,是否有疑问的地方,是否有公用的地方
l 第二步:和需求,设计师对一下页面
n 页面中的基本规范(结构,字体,行间距)以及交互效果
l 第三步:切页面
n 原则是尽量的将结构和样式的CSS分开,尽量的模块化,可复用化,切记避免耦合
(五)农行项目的简单规范
前端的规范一般和项目已经团队的习惯有关,这里仅仅列举一下我个人的习惯。
l 图片的命名规范:页面_页面对应模块_公司前缀 (例如:index_btn_y.png)
l CSS类名的命名规范:一般会同一个模块使用同一个前缀,这样后期代码的可维护性高。另外还有一些常用的命名(见图2)
图 2
l CSS样式的书写顺序:
n (1)位置属性(position, top, right, z-index, display, float等)
n (2)大小(width, height, padding, margin)
n (3)文字系列(font, line-height, letter-spacing, color- text-align等)
n (4)背景(background, border等)
n (5)其他(animation, transition等)
前端的路很长,要学的东西也很多,主要的是保持一份良好的心态,学会聆听和分享。我们都一样,在探索的路上,所以一起加油吧!