本书为“十四五”高等职业教育计算机类专业新形态一体化系列教材之一，根据职业院校计算机相关专业Web前端开发方向课程体系编写，同时结合企业Web前端开发岗位能力模型，对接《1+X证书Web前端开发职业技能等级标准》，形成了三位一体的Web前端开发知识地图。本书以实践能力为导向，遵循企业软件工程标准和技术，以项目任务为驱动，阐述了HTML5、CSS3、JavaScript等Web前端开发相关技术和知识。全书共分七个项目，包括认识Web前端开发、Web前端页面结构搭建、Web前端页面美化、响应式Web页面移动端设计、Web前端页面交互效果设计、微信小程序开发、Web前端新技术等。
本书适合作为高等职业院校计算机及相关专业Web前端开发方向课程的实训教材，也适合作为《Web前端开发职业技能等级标准》的实践参考用书，还可作为对移动Web前端开发感兴趣的读者的参考书。

项目一 认识Web前端开发
任务1.1 初识Web前端
任务1.2 安装IDE
任务1.3 熟悉开发流程与规范
拓展训练
项目小结
习题
项目二 Web前端页面结构搭建——好物商城网站首页页面结构搭建
任务2.1 学习HTML基础知识
任务2.2 探究HTML常用标签和Web标准
任务2.3 跟踪HTML5
任务2.4 搭建好物商城首页顶部功能区
任务2.5 搭建好物商城首页banner区域
任务2.6 搭建好物商城首页限时秒杀区域
任务2.7 搭建好物商城首页网站栏目区域
任务2.8 搭建好物商城首页底部区域
拓展训练
项目小结
习题
项目三 Web前端页面美化——好物商城网站页面美化
任务3.1 认识CSS3
任务3.2 实现好物商城网页公共样式
任务3.3 头部及导航区域美化
任务3.4 轮播快报区域美化
任务3.5 限时秒杀区域美化
任务3.6 网站栏目区域美化
任务3.7 网页底部区域美化
拓展训练
项目小结
习题
项目四 响应式Web页面移动端设计
任务4.1 了解视口
任务4.2 媒体查询
任务4.3 网页移动端设计
拓展训练
项目小结
习题
项目五 Web前端页面交互效果设计——好物商城网站首页交互效果设计
任务5.1 学习JavaScript基础知识
任务5.2 面向对象编程
任务5.3 导航菜单交互效果设计
任务5.4 banner广告区域交互效果设计
拓展训练
项目小结
习题
项目六 微信小程序开发——心灵方舟-大学生心理健康服务小程序
任务6.1 初识微信小程序
任务6.2 微信小程序开发环境搭建
任务6.3 心灵方舟小程序开发
任务6.4 心灵方舟小程序部署与上线
拓展训练
项目小结
习题
项目七 Web前端新技术
任务7.1 认识Web VR
任务7.2 认识数据大屏可视化
任务7.3 认识可视化网页构建器
任务7.4 认识人工智能建站
拓展训练
项目小结
习题