前端入门经验

探索前端学习

从20158月下旬到现在学习前端已经有一段时间,从刚开始的不知道什么是前端到接触一些简单的前端的知识,从修改bug到独立切页面,从不知道什么是JavaSctipt 到做一些简单的交互效果。近乎半年的时间,我从一个“盲童”变成能够独立完成静态页面制作的员工,感谢一路走来,领导的指导,同事的帮助。为此,我想把自己的一些学习经验分享给还没有踏入前端的伙伴们,希望能够对你们有所帮助。

(一)什么是前端开发工程师

前端工程师,也叫作web前端开发工程师。是随着web的发展,逐渐的细分出来的行业。主要的职能就是把网站的界面更好的呈现给用户。前端开发的学习曲线是由快到慢,因而有很多的自学成“才”的前端开发工程师。但是一位优秀的web前端开发工程师,在知识体系上既要有广度,也要有深度。所以,如果你做好了成为一名前端开发工程师的心理准备,接受挑战吧!

(二)前端的知识体系结构图

web前端开发是一个典型的基于MVC模型的开发。HTML作为信息模型(model),CSS控制样式(view),JavaScript负责调整数据和展现逻辑(Controller)。如何更好的应用MVC进行开发呢?首先要掌握三大要素:HTMLCSSJavaScript。(但是随着时代的发展,现在的前端开发三要素已经演变为: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)

 

 

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

 

 

 

 

 

 

你可能感兴趣的:(前端入门经验)