Web前端开发课程项目式教学改革与实践

李娟，李宏博，苏丹，李梓，谭琨，李欣

Web前端开发课程项目式教学改革与实践

李娟，李宏博，苏丹，李梓，谭琨，李欣

（大庆师范学院 计算机科学与信息技术学院，黑龙江 大庆 163712）

项目式教学是一种全方位、立体化应用型人才培养模式的创新和实践．以Web应用开发应用型人才为培养方向，依托网络教学平台，提出“教、学、练、赛”四位一体的项目式教学模式，实现由课堂“教-练”为主的传统课堂教学模式，向课前“学-练”、课中“教-评”与课后“练-赛”结合的项目式教学模式转变．通过项目式训练将理论与工程实践相结合，激发学生的学习内驱力，提升学生的应用技能和创新力，培养高质量专业人才.

项目式教学；OBE理念；融合式教学；自主学习

在疫情防控常态化背景下，高校教师践行OBE教育理念，采用创新教学模式加强高校应用型人才培养是亟待解决的关键问题．为了进一步提高高校工程教育质量，结合企业技术领域和职业岗位需求，采用项目式教学是高校实现全方位、立体化应用型人才培养的创新举措，势在必行．高校的一线教师需要从思想上转变观念，要转变传统课堂教学“重理论、轻实践”和满堂“灌输式”的教学方式，从行动上积极应对后疫情时代线上线下混合式教学．本文对计算机专业Web前端开发基础课程线上线下混合式教学改革进行实践探索，结合教学实践提出“教、学、练、赛”四位一体的项目式教学模式，开展翻转课堂混合式教学[1]，使学生在理解知识的基础上，运用知识、内化知识、掌握技能．一个良好的实践教学体系的实施正是对学生在本科阶段技能应用的一个完整训练，通过对实践类课程教学模式改革，激发学生的学习兴趣，提升学生的编程能力和计算思维、创新能力等方面的综合素质，同时缩短了“学生”向“软件开发工程师”过渡的过程，也能为企业减少培养资金，节约成本[2].

1　Web前端开发基础课程特点

应用型人才的培养需要明确专业目标、调整课程教学体系、转变教学方式和改革评价方式，Web前端开发基础课程具有较强的基础性、综合性、实践性和前沿性特点．

1.1 基础性强

Web应用技术的应用领域非常广泛，信息技术随着“互联网+”时代的到来，与其他专业领域的广泛渗透融合，已经应用在生产生活的方方面面．Web应用技术课程已经成为计算机科学与技术、软件工程等计算机类专业学生必修的重要基础性课程．

1.2 综合性强

Web 前端开发课程涉及内容较为广泛，知识繁杂，有很强的综合性，对学生的综合能力培养具有较高要求．一般教材组织HTML，CSS，JavaScript等教学内容时会出现前后教学内容相互脱节，案例不成体系并缺乏联系的问题，在学习过程中会影响学生的学习兴趣、编程的热情和信心.

1.3 实践性强

本课程也是理论与实践相结合的课程，必须通过大量的实验和实践环节，循序渐进地提升Web应用开发的专业知识和程序设计实操能力．脱离了实践的Web前端开发课程，学习过程就是纸上谈兵[3]．

1.4 前沿性强

随着Web应用开发技术的持续发展，Web前端技术开发工具以及相关设计技术在飞速地更新迭代．现有教材中大都使用旧版本的Web开发工具进行案例教学设计，出现教材使用的Web开发工具滞后于企业流行的开发工具的现象，容易产生教学内容过时，与实际市场需求的编程技术脱节等现象．因此，教学中不能完全依赖教材，需要根据企业技术的更新，不断修正教学计划，才能较好地满足市场对于Web应用人才的需求．

2 构建“教、学、练、赛”四位一体的项目式教学模式

2.1　以项目驱动式为基本教学方法

项目式教学法实质上是一种基于建构主义学习理论的探究性学习模式[4]，学生不适合完全被动地接受知识，学习的实质是不断构建新旧知识间联系的过程．

项目式学习强调真实“情境”下的探索性学习，在完成一个完整的项目过程中通过自主学习直接参与教学全过程，在达成“意义建构”学习过程的终极目标过程中，增强对知识的理解[5]．离散性的知识点融会贯通于项目中，学生的综合能力得到有效锻炼，同时也能够检验学生对知识的理解和掌握程度．学生渴求所学知识在真实项目场景中应用，项目驱动式教学法为学生赋能，学生具有了学习的源动力，潜能得到激发，自主学习能力得到提升，真正意义上激发了学生的学习热情，对课程教学活动起到积极的驱动作用[6]．

2.2 “教、学、练、赛”项目式教学模式

在深度分析学生学习特点和企业真实需求的基础上，结合本课程特点，采用项目式的教学设计，利用现代化教学手段改进实践类课程的教学．在教学过程中采用教与练结合的基本教学方式，并创设实际应用场景，让学生先观看项目功能演示，再回溯知识点并完善知识体系[7]．然后在教师引导下，加强项目式训练，使学生掌握实操的步骤和要领，达到知识要求和能力要求，同时完善过程性考核标准．“教、学、练、赛”四位一体的项目式教学模式解决了教师如何“教”、学生如何“学”和如何“练”，并通过“以赛促教”形成良性循环的教学闭环，学生在企业应用性的项目中学习，渐进性并且有针对性地在工程训练中获得实践能力的提升[8]．

2.2.1 改进如何“教” 在Web前端开发基础课程的教学过程中，通过课前自主学习、课中互动讨论和课后拓展巩固３个基本教学环节，“教、学、练、赛”融入到这3个教学环节过程中，从而学生能够理解和运用、内化知识，掌握技能．

以项目“说旅游”专题页制作为例，通过项目实践考察学生对制作图文混排页面的相关知识点的熟练程度．课前教师录制项目教学短视频，从项目运行演示、任务模块的知识讲解和项目实操过程3个方面精心进行教学设计．项目实操过程中，根据实际Web前端开发产品的项目开发流程的4个基本步骤组织教学：（1）完成Web页面布局设计；（2）进行页面样式的设计；（3）页面动态效果的设计；（4）相应模块的编写、调试和优化．课堂教学中采用翻转课堂的形式进行项目式教学设计，该项目式教学模式的教学流程中3个基本教学环节和相应教学目标的对应关系见图1．

图1 项目式教学模式的流程

课中对学生的项目实践做评价，积极开展互动讨论，对知识拓展延伸和总结，进行知识内化并引导学生深度学习[9]．这种方式实现了由课中“教”与课后“练”相结合的传统课堂教学模式，向课前“学-练”与课中“教-评”相结合的项目式深层教学模式转变，做到“教有所指”．

2.2.2指导如何“学” 将班级学生分6组，每组6～8人，线上组建QQ讨论组，小组内协作讨论，开展小组交流学习活动，由各组长汇报完成情况．为了帮助学生真正理解掌握每一部分教学内容的若干知识点，不再以提交纸质版实验报告作业这种单一的方式检验学习效果，而是发布项目预习视频，要求学生课前自主学习，通过完成同步实操练习，进行知识和技能的基础训练，并要求学生将独立完成的实操过程录制视频并讲解所应用的知识点．教师通过验收学生的实操讲解视频作业，考核学生实验完成度和学生对知识的理解程度，学生参与度达到100%，学习效果得到教师的有效监督．在这个过程中，学生的知识和技能得到循序渐进的提升，通过学练结合，真正地做到“学有所得”．

2.2.3 改进如何“练” 课前学生预习网络学习平台（学习通）的教学视频，并完成项目实践训练，学生能够模仿完成一个完整的Web前端产品开发的范例，在学习过程中实现其自我满足感．在每一部分教学内容结束后，教师布置拓展训练内容，学生完成知识点测试题，使学生能够准确掌握并巩固知识点．到综合项目设计阶段学生以团队合作方式完成项目“制作一个Web网站”的实战训练，实战训练按照项目开发流程的４个基本步骤进行．“练”融入到教学全过程，并逐步加深强化．在没有应用项目式教学模式时，学生练习的是基础性案例，与实际项目脱节．而项目式教学，项目开发思想内化到项目实操中，使学生逐步建立起项目开发的整体概念．在项目中学以致用，应用技能才能得到强化训练，做到“练有所成”．

2.2.4 指导如何“赛” 通过指导Web编程能力突出的学生参赛，为他们指引专业学习方向和就业方向，在竞赛中拓宽视野，鼓励学生参加课外学科竞赛，如“互联网+大学生创新创业大赛”“蓝桥杯Web应用开发赛”等．作为入选高校教育教学改革和创新人才培养重要竞赛项目，这些赛事为培养信息技术人才做出了突出的贡献．通过以赛促学，学生在教师指导下自主学习，提前做好学习计划并在教师监督下执行，学生不但提高了解决实际问题的能力，而且创新能力和编程能力得到加强．在指导竞赛的过程中，教师的业务能力也不断攀升，回归到以赛促教，做到“赛有所获”．

这种项目式教学模式将知识点巧妙地链接在一起，进而再讲解剖析知识点并系统讲解，最后将知识点放在实际的项目环境中，让学生能够举一反三，加深理解和熟练运用．教师通过对学生的课内外跟踪指导，逐步锻炼和培养学生自主学习和团结协作的能力，解决了学生综合素质的培养问题[10]．

3 课程的考核标准及网络资源建设

3.1 完善项目式课程的考核标准

本课程考核评价方式摒弃了传统试卷考试的考核方式，而采用阶段性过程评价和终结性评价相结合的方式，将过程性考核贯穿于整个教学过程，更加注重考察学生的综合能力和素质．本课程的学习环节包含：观看课程教学视频，完成单元测试和作业，参与课程讨论，完成项目设计实验录制并提交视频，参加期末测评并完成综合项目设计．其中，学生视频作业重点对实操技能考核，期末测评重点对知识点掌握情况考核．期末总成绩由3部分构成：

（1）单元测试、讨论、实验作业，占课程成绩的30%．

（2）课程期末测评，学生参加课程的终结性考试，占课程成绩的20%．

（3）综合项目设计，占课程成绩的50%．

3.2 课程的网络资源建设

在Web前端开发基础课程的教学过程中，通过网络教学平台（学习通），发布课程的教学大纲、教学进度表、教学讲稿、授课课件、演示案例和教学实录视频资源，以及阶段案例教学视频、不同阶段的项目实践训练教学视频等，为学生的自学、复习提供了丰富的资源．为实现线上线下融合教学，采用钉钉群直播授课方式，实现线上线下混合式教学的课堂讲授、问题讨论、辅导、答疑等教学环节为师生之间的交流沟通建立了实时和非实时的通道．开设问题讨论区和班级QQ答疑群，更好地实现了学生自主学习的新方式、新方法．多样性的过程性考核方式激发了学生的学习兴趣，增加了教师监管的力度，从而学生参与度提高．今后将不断完善和加强网络平台学习资源建设，优化课程资源，充分利用网络教学平台对课程的教学提供强有力的支撑．

在师生共同努力下，线上实践教学克服了很多现实问题，如学生实操中遇到问题时，教师通过远程控制电脑的方式一对一地答疑；共性问题分享到讨论区，及时做问题反馈；通过实操练习打卡，督促学生完成随堂案例实操练习；教师批改作业量大，课后工作量繁重．通过不断努力和持续改进，在教学实践中，以期达到一个更理想的教学效果．

４ 结语

以Web应用开发应用型人才为培养方向，以计算机科学与技术专业Web前端开发基础线上线下混合式课程体系建设为教学主线，构建“教、学、练、赛”四位一体的教学模式，通过完整的实际项目过程化训练，培养了学生针对Web前端开发解决实际问题的能力和应用能力．这种项目式教学是全方位、立体化培养模式的创新和实践，符合高校应用型人才的培养要求．

[1] 韩兵．基于项目教学的Web程序设计翻转课堂教学模式设计[J]．数字通信世界，2022（3）：38-40．

[2] 刘陶，刘丹．产出导向的项目驱动式混合教学模式研究与实践[J]．计算机教育，2021（10）：179-183．

[3] 高岩，林颖，吴德文，等．项目驱动的线上线下启发式深度学习实践教学探索[J]．计算机教育，2021（9）：51-53，57．

[4] 罗才华．基于构建主义和知识共享的Web前端技术课程“三段式”教学改革[J]．职业教育研究，2020（4）：62-66．

[5] 随婷婷，陈年生，黎明．项目式驱动的Web程序设计教学改革研究[J]．福建电脑，2019，35（12）：53-54．

[6] 李娟，孙涛，李宏博，等．“项目导入式”在线虚拟仿真实验教学的研究与实践[J]．电脑知识与技术，2021，17（9）：169-171．

[7] 刘国芳，邓亚莉．“金课”背景下线上线下混合教学模式研究：以《Web前端设计与开发》课程为例[J]．电脑知识与技术，2021，17（1）：111-112．

[8] 文晓棠，许丽娟，陈艳．“金课”背景下线上线下混合教学模式研究：以Web应用系统开发课程为例[J]．软件，2020，41（7）：292-296．

[9] 李艳华，李伟键．项目式混合式教学法在动态网页制作课程中的探索与实践[J]．计算机教育，2019（9）：138-142．

[10] 周凌云，侯睿．以计算行动提高创新能力培养的Web设计与开发课程改革[J]．教育现代化，2019，6（91）：51-52．

Reform and practice of project-based teaching about Web front-end development

LI Juan，LI Hongbo，SU Dan，LI Zi，TAN Kun，LI Xin

（School of Computer Science and Information Technology，Daqing Normal University，Daqing 163712，China）

The project-based teaching is a kind of all-round，three-dimensional applied talents training mode innovation and practice．It is a training direction that Web application development applied talents. Supported by the network teaching platform，it is proposed that teaching，learning，practice，competition four aspects of hierarchical project-based teaching model．It is realized that the traditional classroom teaching model of teaching and practice transforms to a project-based teaching model of learning and practice before class，teaching and assessment in class and practice and competition after class with the combination．Through project training combining theory with engineering practice，the students are inspired to learn drive，and the students′ application skills and innovation and the high-quality training of professional talents is effectively trained．

project-based teaching； OBE concept； merge-integrated teaching； autonomous learning

1007-9831（2022）10-0078-04

TP319∶G642.0

A

10.3969/j.issn.1007-9831.2022.10.015

2022-04-25

全国高等院校计算机基础教育研究会计算机基础教育教学研究课题（2021-AFCEC-157，2021-AFCEC-160）；大庆师范学院“课程专项”教学改革研究项目；黑龙江省教育科学“十三五”规划重点课题（GJB1319003）

李娟（1979-），女，黑龙江大庆人，副教授，硕士，从事云计算与大数据、传感网信息融合与嵌入式协同研究．E-mail：lijuan_daqing@ yeah.net