线上线下混合式一流课程建设研究与实践

高广银　储久良　成艳　宦臣

摘  要： 为了实现高质量教育，在新的教育改革背景与争创一流课程的形势下，调研“Web前端开发技术”课程的教学现状及Web前端工程师的岗位要求，总结教学中存在的问题并进行分析，探讨了以调动学生自主学习为目标，以建设一流课程为导向，以开发立体化教学资源为载体，以线上线下混合式教学为途径的教学改革。实践表明，学生主动学习行为增加，整体学习效果提升。

关键词： 一流课程; 立体化教学资源; 线上线下混合式教学; 课程思政

中图分类号：G642;TP311          文献标识码：A     文章编号：1006-8228（2022）04-77-03

Research and practice of online and offline blended first-class curriculum construction

——taking the course of web front end development technology as an example

Gao Guangyin Chu Jiuliang Cheng Yan Huan Chen

（1. School of Computer Science and Engineering， Taizhou Institute of Sci.&Tech， Taizhou， Jiangsu 225300， China;

2. Information Construction and Management Office， Taizhou Institute of Sci.&Tech）

Abstract： In order to achieve high-quality education， under the new situation of education reform and striving to build first-class courses， in this paper， the teaching status of the course "Web Front-end Development Technology" and the post requirements of Web front-end engineers are investigated， and the existing problems in teaching are summarized. The teaching reform methods for "mobilizing students' autonomous learning as the goal， building first-class courses as the guide， developing three-dimensional teaching resources as the carrier， and online and offline hybrid teaching as the approach" are discussed. Practice shows that students' active learning behavior is increased， and the overall learning effect is improved.

Key words： first-class courses; three-dimensional teaching resources; online and offline hybrid teaching; ideological and political theory integrated course

0 引言

前端開发主要利用HTML、CSS、JavaScript以及衍生出来的各种技术、框架创建Web页面，实现用户界面交互。随着互联网技术的发展，前端开发核心技术不断发展，各种UI框架、JS类库层出不穷，前端开发难度逐步提升[1]。近年来，在推进高质量教育的形势下，中国高等教育面临革命性调整，全国将有数百所高校向应用型转变[2]，以培养应用型人才。在培养应用型人才的过程中如何实现教学过程与生产过程的对接，使得课程教学更好地适应人才培养要求，本文把理论联系实际，以“Web前端开发技术”课程为例，探讨一流课程的建设思路和具体举措。

1 教学现状及问题

1.1 理论知识掌握不够系统

“Web前端开发技术”课程的知识相对庞杂，学生掌握不够系统性。首先，前端开发技术包括HTML、CSS及JavaScript三个方面，其中HTML包括很多标签和属性，CSS包含各种外观设置属性，JavaScript虽然是弱类型语言，但同样具有程序设计语言相关基本要素。在多次学情调研中发现，学生普遍反映该课程并不难，但就是记不住那些语法、标签和属性，导致一看案例就懂，一练实例就手忙脚乱的局面。究其原因是，没有通过循序渐进的练习将每个知识点消化吸收，再将多个知识点串联起来运用，系统地掌握相关知识。

1.2 实践动手能力偏弱

“Web前端开发技术”是一门理论与实践并重的课程，其教学要求之一是培养学生进行Web页面设计的能力和养成良好程序设计的习惯。对于一个开发需求，要求学生能够通过分析，选择合适的标签、属性等进行布局设计、外观样式设计等，从而提高分析和解决问题的能力，达到学以致用的目的，所以在整个教学过程中，上机实验是个至关重要的环节。但是在实际教学中，一方面课时有限，平均每周一次上机课，每次二学时;另一方面学生缺乏良好的复习习惯，未能充分做好上机实验课的知识准备，使得上机课不是在运用知识，而是在消化知识，上机效率降低且达不到实践效果;此外，在开放性实验环节，学生选题过大，对界面美观的期望过高，而与实际完成度之间形成一定落差，往往带来一些挫折感，这些都反映了动手实践能力偏弱。

2 理论教学改革

针对上述问题，整体教学改革思路是转变思想，以学生为中心，结合社会及用人单位的需求，对标一流课程建设标准[3]，完善教学资源建设，采用线上线下混合式教学方式[4]，加强课程思政教育，充分调动学生积极性，发挥学生主动性，从而强化动手能力，提高知识综合运用能力。

2.1 建设立体教学资源，开展线上线下混合式教学

契合社会及用人单位的需求，重新梳理教学内容，建设立体式教学资源。为了更好地培养应用型人才，首先根据岗位的要求，梳理出相应的知识、能力、素质的要求，进而对教学内容进行重新组织，使得各教学单元主题明确、知识量适中、知识点相关联，每个单元相对独立，从而有利于打造立体式教学资源，即与超星公司、清华大学出版社等企业深度合作，建设线上课程管理平台，提供微课视频、单元测试题、课后作业、试卷等一整套能够与教学计划相适应的教学资源，并可进行教学过程管理及学习数据分析。

对标一流课程建设标准，开展线上线下混合式教学。课程教学改革的实施还需依靠课堂教学，国家“双万计划”中一流课程建设标准已经指明了改革的方向，根据本课程特点，采用线上线下混合式教学模式，将一方面可以弥补教学课时的不足，另一方面也是更重要的方面，能够真正地实现“以学生为中心”，通过合理地将教学单元设置为线上与线下两种不同形式，促进学生更自主地学习，课程比例设计如表1所示，其中阴影部分为线上教学单元，比例为32.14%。例如课程中一些简单标记、属性等基本语法内容的学习，可以录制优质视频，在视频中嵌入随堂问题，并配套相应自测题，以任务驱动的方式让学生线上自主学习。而一些较难、相对综合或者比较开放的环节则采用线下翻转[5-6]、分组讨论等形式，促进学生们加强学习交流。

2.2 遴选思政元素，融入专业教育

教学改革须坚持“立德树人是教育的根本任务”[7]，深度挖掘课程蕴含的思想政治教育资源，实现思想和价值的引领，发挥专业课程育人功能。围绕社会主义核心价值观、科技强国精神、专业素养、科研精神、大局观等思政元素，梳理契合的课程知识点，挖掘相关的思政案例，将其融入课堂教学，实现专业思政育人，如表2所示。

3 实验教学改进

“Web前端开发技术”是一门实践性很强的课程，基本概念和语法、技巧与方法必须通过反复练习来掌握，针对学生动手能力偏弱的问题对实验教学进行改进。

3.1 保证上机课的数量

传统的教学模式是理论为主上机为辅，这对于培养科学型人才是受用的，同时对于基础扎实、主动性强的学生也是适用的，但是对于培养应用型人才不太合适，他们更需要加强实践操作。前端开发课程的特点是一些知识多练习、经常运用就能掌握，需要加大动手练习环节。此外，通过线上教学环节设置自主学习任务，通过任务驱动学生完成一定基础训练量，使学生养成勤练习惯。

3.2 提高上机课的质量

要提高上机课的质量，必须精心设计上机实验题。根据应用型人才培养要求，紧扣知识点及实际应用场景，选择有代表性的、难度适中的实例作为实验题。设置不同的难度，包括基础型、验证型、综合型及设计型，并且分为必做题和选做题。基础型、验证型的题目为必做题，以巩固前端开发技术的概念和语法;综合型、设计型的题目为选做题，训练学生综合运用知识、分析并解决问题的能力，在实施时可以根据情况提供辅助，如允许学生分组完成，或为学生提供部分框架性源代码，引导学生完成复杂网页设计。此外，可以允许学生自选综合型、设计型实验题，由教师把关，学生对自选题往往更有责任心;允许学生就某些复杂网页结构或构成元素進行研究。这样，学生通过自身努力，在一定时间内能够看到结果，就产生一种成就感[8]，逐步增强自信心，提高学习兴趣。

4 结束语

为了推进高质量教育，培养好应用型人才，以“Web前端开发技术”课程为例，探讨了线上线下混合式一流课程的建设思路与举措，包括以学生为中心，重构教学内容，建设立体化教学资源，采用线上线下混合式教学模式，在教学过程中融入课程思政理念等，通过实践明显地调动了学生学习主动性，整体学习效果提升，取得一定成效。进一步工作将根据平台积累的教学数据，对教学情况进行多维度量化分析，如学习行为分析、学习诉求分析、课程目标达成度分析等，从而对课程建设进行持续改进。

参考文献（References）：

[1] 储久良.Web前端开发技术——HTML、CSS3、JavaScript（第3版）[M].清华大学出版社，2018.

[2] 韩保清.以新工科建设推动地方高校向应用型转变[J].中国高等教育，2021（2）：10-12

[3] 杨晓宏，郑新，田春雨.线上线下混合式一流本科课程的内涵、建设目标与建设策略[J].现代教育技术，2021，31（9）：104-111

[4] 李慧，施珺等.线上线下混合式一流课程建设的探索与实践[J].计算机教育，2021（7）：183-187

[5] 姜迎春，岳湘，等.工程材料课程混合式教学模式构建及翻转课堂实践研究[J].高教学刊，2021，7（24）：89-92

[6] 王波.翻转课堂教学模式浅析[J].计算机时代，2021（9）：99-102

[7] 孟瑶.“Web前端开发技术”课程思政研究[J].电脑与信息技术，2020，28（3）：83-84

[8] 王肖烨，李春磊，等.新工科背景下人才学习质量提升路径探索与实践[J].科技与创新，2021（17）：151-152，157