HTML5和CSS3(简称H5技术)是Web前端开发的最新技术, H5技术可以实现多方面的跨界:PC端/移动端,Android/iOS。应用领域包含传统互联应用、移动开发和云计算等。市场上对Web前端人才的需求量很大, Web前端工程师的薪资高、前景好。本课程的目标是培养学生运用Web新技术进行Web前端设计的能力。

本课程内容采用项目化教学。配套线下教材为正在建设的省级新形态教材《Web前端开发项目化教材》;

教学内容:       成长项目:响应式网站项目

任务1 Hbulider的安装与使用

任务2 制作“五环之歌”页面——盒模型

任务3 给导航条添加CSS样式——CSS3新属性

任务4 文章列表页——文本

任务5 信纸设计——背景

任务6 风景页——边框

任务7 文明公约页——盒子阴影

任务8 音乐排行榜页——渐变

任务9 大图轮播图——定位

任务10 电子杂志页——多列布局

任务11 滑动的导航条——动画

任务12 照片墙——动画

任务13 学员信息页——表单

任务14 音视频页面

任务15制作位置固定的导航条

任务16 制作响应式网页主体部分

任务17制作两栏式网页尾部

授课方式

课程采用项目化的教学方式,在设计开发项目的同时,注重知识、技能的总结和提升,以项目开发核心技术为中心点布局知识单元。更注重工作任务的完整性,每个项目都是独立且完整的,结合开发实际需求,密切联系行业实际,学生能学以致用。课程中采用各具特色的项目,面向不同应用场景,具有极高的适应能力,由企业技术人员把关项目与行业技术的贴合度。项目锻炼了Web前端的必要技能,在内容设计上,将知识点融在了项目开发的各个子任务中,让学生边学边操作边提高。

html前端开发作品,Web前端开发(HTML5+CSS3)相关推荐

  1. 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件

    b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <! ...

  2. 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件

    b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTYP ...

  3. 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个可拖动的拼图游戏动画效果~适合初学者~超简单~ |it前端开发

    b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个可拖动的拼图游戏动画效果~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!D ...

  4. 【web前端特效源码】使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT编程

    b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTY ...

  5. 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个影子~~适合初学者~超简单~ |前端开发|IT软件

    b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个影子特效~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTYPE ...

  6. 【web前端特效源码】使用HTML5+CSS3制作一个会动的不规则斑点边框半径动画的动画效果~~适合初学者~超简单~ |前端开发

    b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的不规则斑点边框半径动画的动画效果~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCT ...

  7. 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个果冻导航标签栏图标按钮效果~~适合初学者~超简单~ |前端开发|IT软件

    b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个果冻导航标签栏图标按钮效果~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: < ...

  8. 【web前端特效源码】使用HTML5+CSS3制作一个会动的电脑桌面+昼夜变化动画效果~~适合初学者~超简单~ |前端开发

    b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的电脑桌面+昼夜变化动画效果~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTYPE ...

  9. 【web前端特效源码】使用HTML5+CSS3制作一个会促销广告滚动字幕3D动画效果~~适合初学者~超简单~ |前端开发|IT软件

    b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会促销广告滚动字幕3D动画效果~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTYPE ...

最新文章

  1. 流行于机器学习竞赛的Boosting,这篇文章讲的非常全了
  2. redis linux 文件位置,Linux下Redis的安装和部署
  3. c语言send方法,高效编写代码的方法(九):了解objc_msgSend
  4. docker容器内服务访问宿主机服务
  5. 吉林师范计算机考研真题,2021吉林师范大学考研历年真题专业目录
  6. ubuntu NGINX uwsgi https 部署Django 遇到的问题
  7. E. Mahmoud and Ehab and the function Codeforces Round #435 (Div. 2)
  8. python打包exe_Python | 用Pyinstaller打包发布exe应用
  9. git-合并分支指定commits
  10. D3D学习摘记(I)上
  11. 手把手教你自学单片机,三个步骤请做好笔记
  12. Linux下载GEO数据,最简单的IGS精密星历等数据下载方法PPT
  13. (原創) 如何破解Quartus II 6.0? (IC Design) (Quartus II) (Nios II)
  14. logistic 回归分析
  15. 记一次Maya使用入门
  16. 鸽主姓名查询成绩_获奖鸽主姓名,名次及足环号码
  17. esxi怎么传输文件到虚拟机_软路由篇2:3865U软路由折腾记——Esxi软虚拟机+OpenWrt教程
  18. 按键精灵移动端系列 - 按键精灵IOS版 之 网络已断开,请检查网络连接.解决方案.
  19. EMUI/MIUI卸载系统预装软件,开启上帝模式无需ROOT权限
  20. git 撤销单个文件到某个提交

热门文章

  1. 大数据分析有哪些分析模型
  2. 大数据分析可以用哪些营销策略
  3. 机器学习初级入门(一)感知机
  4. java数据校验博客_springmvc教程:利用Validation进行参数校验
  5. interop.cdo 发送邮件乱码_手把手教你用 Java 发送邮件,不用框架
  6. codeforces round #752
  7. Caffe︱构建lmdb数据集、binaryproto均值文件及各类难辨的文件路径名设置细解
  8. Tensorflow如何读取文件
  9. Pychram中如何导入其他文件的.py文件
  10. scikit-learn和tensorflow的区别