本课程着眼于实战，讲解的都是开发时经常遇到的典型问题和案例，主要涉及Web前端开发先备知识、构建HTML5页面、使用CSS3美化页面、使用CSS3布局页面、使用JavaScript制作页面特效、综合实战6个单元。课程优选了20个任务。每个任务都从【提出实际问题】开始，通过【任务分析】和【知识预览】，详细讲述解决问题所需的知识点，并在【任务实施】过程中详细讲解实现步骤，最后通过【任务实训】强化技能的掌握，使学习者能循序渐进地体验前端页面制作过程，学会门户网页、企业网页、电商网页的制作。具体授课内容如下图1所示：   

                                                               图1 授课内容

通过“仿新浪”、“水源安检”、“万维”三个真实的网站项目的开发，使学习者能根据前端开发流程，灵活运用HTML5、CSS3、JavaScript的基本知识制作出各种类型的网站，并通过小组合作等方式培养学习者的沟通能力和团队协作能力，为学习者以后学习jQuery、Vue等各种前端技术打下基础，是学习者迈入前端工程师职业岗位的必修课程。

知识目标：

1.阐述前端页面开发流程；

2.归纳HTML5常用标签；

3.概括HTML5常用标签的使用方法；

4.归纳常用的CSS属性；

5.概括出CSS常用属性的使用场合；

6.描述Javascript的变量、函数、事件、常用方法的语法；

7.分析页面常见特效；

8.总结常见特效制作方法。

能力目标：

1.能够下载、安装并使用前端开发工具开发页面；

2.能够构建出具有语义、代码规范的HTML页面；

3.能使用CSS美化前端页面，使页面界面美观；

4.能使用CSS布局页面，使页面布局正确；

5.能够描述页面特效；

6.能够使用Javascript完成下拉菜单、图片轮换、前进、后退、表单检验等特效。

素质目标：

1.具有良好的知识产权保护意识，自觉抵制各种违反知识产权保护法规的行为；

2.具有积极协助配合同组人员完成开发任务的团队意识；

3.能够与同组人员沟通协调，确定自己的开发任务，理解团队开发任务的沟通素养；

4.具有执行和遵守软件开发所需的方法、时间进度、制度控制等质量意识；

5.具有自觉跟踪前端开发技术发展动态，积极参与各种技术交流的学习意识；

6.具有不断总结、持续改进的精益求精的工作精神。

职业资格证书：1+xWeb前端（初级）

想一起探讨前端技术知识的同学，可加入qq群420286548或扫描下面二维码，大家组成学习共同体，共同交流，共同分享经验。对大家提出的问题，课程组将在24小时内给出回复。

学习本课程需要学习者具有的技能：

1.能够使用在线平台以及下载和安装软件的计算机技能。

2.能够使用百度进行简单信息搜索的能力。

【1】Web前端开发实战 电子工业出版社 盛昀瑶 2019.10 

说明：此书为本课程配套教材，里面有课堂案例所有知识点和源代码，各大电商网都有售卖，建议在视频学习和完成任务实训时使用。

【2】http://www.w3school.com.cn/

说明：此网站上提供了HTML、CSS、Javascript等Web前端开发所需使用技术的参考手册并提供了在线测试工具，大家可以使用该网站快速查阅知识点，建议每单元学完后作为回顾知识点的工具使用。

【3】Web前端开发（初级）（上册）电子工业出版社 工业和信息化部教育与考试中心  2019.8

说明：此书为“Web前端工程师”1+X职业技能证书配套教材，介绍了考试所需知识点，想参加考证的学习者可以查阅。

Q1：谁可以学习本课程？

A1：对Web前端技术感兴趣的学习者均可学习本教程。

Q2：我的编程基础不好，能学好本课程吗？

A2：可以，Web前端工程师代码编写难度要低于程序员，只要肯认真练习，肯定能学好本课程。

Q3：怎样才能做好Web前端开发？

A3：本课程是基础，先把基础打扎实，然后学完本课程后，可以学习HTML5高级编程、Vue，帮助你既快又好地开发出前端界面。

Q4：如何学好本课程？

A4：要想学好本课程必须认真观看视频、完成课程案例、勤记笔记，多参与讨论。

Q5：本课程有什么特色？

A5：本课程以菜鸟Martin的前端成长为线索，在故事情境中介绍Web前端开发核心技术，每次课都通过具体案例展示知识点，有趣又实用。

Q6：在使用MOOC网时遇到技术问题怎么办？

A6：可以进入http://www.icourse163.org/about/contactus.htm#/contactus?type=2，里面提供了MOOC技术支持的联系方式。