前端入门经验

探索前端学习

从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等)

 

 

前端的路很长，要学的东西也很多，主要的是保持一份良好的心态，学会聆听和分享。我们都一样，在探索的路上，所以一起加油吧！