春节贺卡之收获

麻雀虽小,五脏俱全

虽然课程只是一个小小的移动端项目开发,但麻雀虽小,五脏俱全。
课程涉及到需求分析,切图,重构,优化等等知识!

一个好的项目,如果想要快速开发完成,知识储备肯定要充足!
html,html5,css,css3,javascript那肯定得会的!
都不会那得了解一番了!

HTML元素参考

html5指南

css&css3

javascript

代码会写了,编程工具得有一个好的哪!这能大大提高您的开发速度。当然,你十分厉害,用着记事本也能快乐的玩耍,这种大神,我只想说:“师傅,你收徒不?我能介绍个女同学您!”

前端开发工具技巧介绍—DW篇

前端开发工具技巧介绍—Sublime篇

WebStorm 有哪些过人之处?

开发工具很多,但最适合自己的才是最好的工具!

下面我们来进入项目开发过程!

项目分析

  • 由于项目面对的是移动端用户,并且主题是新春主题,所以表现形式得欢快活泼!
  • 项目涉及的特殊字体因为考虑到移动端并且有一定大小影响加载,所以采取图片代替
  • 图片方面尽可能压缩到无损最小值
  • 项目过小,用原生javascript代替其他框架.
  • 为了便于测试,使用WampServer为本地服务器测试环境

切图

切图的软件有Photoshop,Fireworks

前端工程师必备的PS技能——切图篇
##重构涉及知识##
前辈们分享的技巧我们得学习学习!避免进坑!

移动端页面开发资源总结

还有一本书里面的技巧也非常不错(推荐)!

HTML5移动Web开发实践

项目由于是三屏全屏结构!所以得设置html,body元素的高度为100%;
html,body{height:100%}

css3方面用到的是

CSS3 选择器——伪类选择器

Box-sizing

Animation

Transform

Background-size

Border-radius

audio标签详细解析

audio

js方面

addEventListener()

TouchEvent

项目涉及的知识都了解了一番,那学习起来就不会一头雾水,云里云雾的了!跟着老师的脚步开发完成后,测试就是必不可少的了!这WampServer
就发挥它的作用了!测试了一番后,bug方面解决了后,可以尝试把第三屏的对联动起来!这里有类似教程!

手淘年货节舞龙揭幕动画实战

好了!这就是我看完整个课程所收获的东西!您的收获又是多少呢?欢迎大家一起探讨!

标签: none

添加新评论