继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

H5+css3春节贺卡之个人收获

点解点解
关注TA
已关注
手记 4
粉丝 7
获赞 193
麻雀虽小,五脏俱全

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

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

HTML元素参考

html5指南

css&css3

javascript

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

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

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

WebStorm 有哪些过人之处?

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

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

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

切图的软件有Photoshop,Fireworks

前端工程师必备的PS技能——切图篇

重构涉及知识

前辈们分享的技巧我们得学习学习!避免进坑!

移动端页面开发资源总结

文章分享的包括!诸如:禁止缩放!宽度设置为设备宽度!禁止ios识别数字为电话号码等等!课程中的视口控制中的内容差不多都有一一讲到!并且也分享了很多老师没讲到的知识!

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

HTML5移动Web开发实践

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

css3方面用到的是

CSS3 选择器——伪类选择器

Box-sizing

Animation

Transform

Background-size

Border-radius

vh

vw

rem

audio标签详细解析

audio

js方面

addEventListener()

TouchEvent

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

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

总体来说,课程兼顾知识很多!也用了很多新特性!是一个非常棒的课程!

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

打开App,阅读手记
4人推荐
发表评论
随时随地看视频慕课网APP