基于“1+X”证书制度的Web前端开发课程思政探索与实践研究

陆王红

摘要：该文研究了“1+X”证书制度下《Web前端开发》课程的思政教学改革，剖析了当前课程思政改革中的一些问题，阐述了“1+X”证书制度与课程思政的关系，探讨在“1+X”证书背景下课程思政元素的融入和教学案例库的设计，为相关课程的思政研究提供参考。

关键词：“1+X”证书；Web前端开发；课程思政

中图分类号：G642.0   文献标识码：A

文章编号：1009-3044（2022）30-0134-03

开放科学（资源服务）标识码（OSID）：

2016年12月，习近平总书记在全国高校思想政治会议上指出：要用好课堂教学这个主渠道，各门课都要守好一段渠、种好责任田，使各类课程与思想政治理论课同向同行，形成协同效应[1]。2019年4月，教育部启动了1+X证书制度试点工作，鼓励将X证书的内涵与外延融入专业课程中，不仅注重技能的培养，更要培养学生的家国情怀、社会责任和道德规范等软实力[2]。

2020 年教育部教高（2020）3号文《高等学校课程思政建设指导纲要》（下文简称纲要）指出全面推进高校课程思政建设，发挥好每门课程的育人作用，提高高校人才培养质量，确立“育德树人”的根本目标。要想达成目标，则需要将价值塑造、知识传授和能力培养三者融为一体、不可割裂。全面推进课程思政建设，就是要寓价值观引导于知识传授和能力培养之中，帮助学生塑造正确的世界观、人生观、价值观[3]。

在思政教育新形势下，依据“1+X”职业技能等级标准，深度挖掘Web前端开发实训课程中所蕴含的思政元素，编制巧妙融入思政元素的课程教学内容，运用教学技巧和方法进行教学设计，在实训课堂教学中提升思政教育的针对性和时效性，职业技能与职业素养相互渗透，推动软件技术专业学生职业技能与职业素养的同时养成，提升学生了解当前时事政治形势的意识，培养爱国情怀和身为社会一分子的责任担当，为后续的研究提供借鉴，具有一定的现实意义。

1 课程思政现存问题

目前计算机类专业课程思政教学实施中主要存在以下问题：

（1）流于形式。部分教师在授课过程中，不能持续、深入地挖掘与所授课程、所授内容紧密相连的思政元素，与课程目标关联不大，流于表面形式，思政内容基本停留在社会主义核心价值观、八礼四仪等基本内容上，实际授课还是以专业知识的传授为主，未能切实做到将课程思政与专业课程有机融合；

（2）紧跟企业不够。受各种因素影响，不能定期对Web前端开发企业进行调研，及时跟进前端开发技术人员思想动态变化，做到深入掌握岗位职业能力的要求、综合素养的提升要点，缺乏对相关企业专家意见的征求，及时修订课程目标，形成课程思政内容的融入；

（3）与专业、学情结合度不高。同样的课程思政点，面对不同的专业和不同年级的学生时，教师的融入与输出方式大同小异，课程思政改革模式相似，思政点的抓取也相似，体现专业、学情、课程本身的力度不够，缺乏与之相匹配的课程思政实施标准与方案；

（4）同轨教师配合度不高。同一门课程的开设时间可能出现在不同专业和同年级的不同班级间，担任教学的教师在没有统一思政实施标准和方案的基础上，课程思政点的融入方式基本由个人决定，教师之间缺少分工合作，定期教研，共同探讨目前的社会热点、典型行业案例、典型人物故事等方面所蕴藏的思政元素，并将其恰当地融入教学中，以期达到润物细无声的效果；

（5）与“1+X”证书关联度不高。目前大多数的课程思政基本停留在课程理论知识点和操作技能本身的专业教学，而与之相关的技能证书所要求具备的综合能力则涵盖职业技能和职业素养，这就要求专业教学与职业技能等级标准要有效对接；

（6）缺乏有效的课程思政考核机制。目前课程的考核机制还是以知识目标和技能目标的达成为主，教学成效所包含的课程德育目标对应的具体成效，还未达到可观察、可评估、使学生有成就感的水平。

2  课程思政实施研究

2.1 Web前端开发课程地位

Web前端开发课程是高等职业院校软件技术专业的一门专业方向课程，该课程以实践能力为导向，结合HTML、CSS、JavaScript、jQuery等Web前端开发中的核心知识和技术，注重学生对理论基础知识、专业技能的理解、掌握及运用，整个课程通过对实际案例和应用环境进行分析与设计，使学生能够真正掌握Web前端开发的知识和技术在实际场景中的应用，并培养学生建立终身学习的意识，增强学生自主学习的能力，提升學生职业素养和核心竞争力。

2.2 课程思政方向

课程思政是将职业精神和价值观融入课堂知识传授、能力培养之中的有效思政教育方法[4]。《Web前端开发》课程的知识点涵盖HTML、CSS、JavaScript、jQuery等大部分的前端开发技术，而前端开发证书所对应的职业技能等级标准涵盖职业素养、职业技能和理论知识等内容，遵循不同的内容要融入的思政元素不尽相同的原则，在课程思政点的挖掘过程中，力求做到密切贴合课程教学与职业技能等级标准。《Web前端开发》主要选取爱党爱国、民族自豪、工匠精神、人文素养、法律意识、正能量、勇于担当等方面的思政元素进行融合[5]。

2.3课程思政元素融入设计

《Web前端开发》共包含三大模块，分别为基础模块、技术模块和实践模块。每个模块包含的知识点和思政元素的融入如图1所示：

2.3.1基础模块

主要包含实践概述、开发工具以及网站服务器配置。在授课过程中，教师首先带领学生浏览课程总体的实践目标、实践知识地图、实施安排等，培养学生的大局观念和总体意识，帮助学生树立自信，增强为中华民族的伟大复兴而奋斗的信念；接下来介绍网页设计与制作的常用方法与技巧，培养学生耐心、专注、严谨的可贵品质；最后介绍使用的开发工具HBuilder及网站服务器部署。目前前端开发常用的软件有Dreamweaver、sublime、Notepad++、HBuilder等，其中HBuilder是数字天堂推出的一款Web前端开发的国产软件，通过介绍和使用此软件，可激发学生的民族自豪感。

2.3.2技术模块

此模块主要包含核心知识、CSS新特性和移动端三大部分。

（1）核心知识部分由HTML制作静态网页、CSS设计页面样式、JavaScript开发交互效果和jQuery开发交互效果等组成。其中HTML制作静态页面为学生讲解HTML的基本结构，HTML中的多种常用标记的定义、功能及使用方法，通过设计贴合生活、紧贴职业技能要求的多个小案例，引导学生传承和弘扬中华美学精神，树立正确审美观，提升审美水平，陶冶高尚的道德情操、塑造美好的心灵，培养学生勤学、善学的精神品质，通过网页内容的核查，提升学生的法律意识。

（2）CSS新特性部分由CSS3新特性开发页面样式和HTML5新特性制作静态网页两种方法组成。CSS3新特性大概分为选择器（含伪类、伪元素）、背景和边框属性、文本效果和2D/3D转换等，HTML5新特性主要包括语义化标签、增强型表单以及新增表单属性等，通过完成相关的网站页面，帮助学生建立扎实的Web前端开发专业技能基础，引导学生在制作过程中用心体会以人为本的设计理念，并形成良好的操作习惯，努力成为兼具技能与核心素养的双创型人才。

（3）移动端由HTML5制作移动端静态网页、CSS3制作移动端静态网页和JavaScript开发移动交互效果组成。随着智能手机的兴起和大范围的普及，人们越来越习惯和喜欢通过手机端App来完成购物、生活、学习、工作和娱乐，进而越来越多的手机网民开始依赖于手机端App软件，而App的开发同时又能促进了移动电子商务的发展，也有利于企业实现更为精准的营销。通过完成实训案例，启迪学生将思维深入知识的发现和再发现过程中，激发学生创新意识，提高其独立思考能力和逻辑思维能力。

2.3.3实践模块

此模块以企业开发项目——设计制作防疫知识科普网为载体，贯穿Web前端开发的大部分核心技术，融合了相关职业资格证书对知识、技能和态度的要求。项目设计以Web前端项目开发过程为线索来进行，通过分析职业岗位需求，将知识、技能和情感、态度融入具体的项目之中，培养学生的规范性意识和制作前端网页的职业能力和职业素养，为适应以后的工作岗位奠定基础。将爱国教育、工匠精神、劳动教育、职业素养等思政元素融入课堂教学中，使学生在学习过程中提高分析问题、解决问题能力的同时，了解当前时事政治形势，培养学生爱国情怀和积极向上的人生观、价值观。项目的开发流程严格按照企业开发流程进行，学生通过完成网站首页和网站分页的设计与制作，学习过程与工作工程相互渗透，学生的学习能力、综合实践能力、设计创新能力得到提升。

2.4教学案例库设计

《Web前端开发》课程按照“由知到行”“知行结合”的体系结构进行开发，由基础模块、技术模块和实践模块三部分组成，其中前两个模块采用项目任务驱动式教学法，利于激发学生的学习热情，高效理解并掌握相关技能；实践模块以企业开发项目为载体，若想课程教学能够有效开展，建立教学案例库是首选。案例库的选题应在结合学情的基础上，遵循课堂教学的原则，不仅要考虑知识与技能的快速、有效掌握与应用，也要考虑课程思政的恰当融入，同时还要紧密切合Web前端开发技能证书的标准和要求。

本课程的授课对象是高职四年级的学生，他们思维活跃，对当前社会热点非常敏感，喜欢头脑风暴，热衷信息技术以及智能移动终端技术，学习有热情，动手实践能力强。因此在项目案例中，选取了能够触动学生的案例，从社会热点到身边日常，涉及多个方面，深入挖掘思政元素，并寻找恰当的融入方式。下面以实践模块中设计制作网站首页为设计案例。

《设计制作“防疫知识科普网”首页》案例设计：

（1）网站整体规划设计

明确网站主题，规划网站目录结构和内容，设计页面风格，页面布局采用三行布局——头部、主体、底部。主体部分分成4行，其中而三行分左右两列。

1）涉及知识点：Web前端项目开发流程、网页设计规范、熟悉常见的网页布局方式，规划设计网站的目录结构、内容结构、页面风格的方法，标签的嵌套、头部标签、Div标签，CSS样式、网页布局属性；

2）对照Web前端开发证书（初级）的知识技能要求：会使用HTML文本标签、头部标签、Div盒模型应用，能使用CSS样式对网页进行布局；

3）融入思政元素：关注时事政治，弘扬学生爱国情怀，培养学生大局观念和总体意识，通过热点事件，增强公民意识，激发学生制作热情。

（2）设计制作首页内容

分别为导航板块、信息板块、防疫知识视频、其他板块添加内容，并完成基本样式设置。

1）涉及知识点：列表标签、Div标签、表单标签、视频标签、超链接标签、CSS盒模型、浮动模型、定位模式。

2）对照Web前端开发证书（初级）的知识技能要求：能熟练运用HTML多种标签、掌握CSS选择器、背景、字体样式、文本样式、颜色、背景功能等。

3）融入思政元素：通过讨论和交流培养学生遵守信息安全相关的法律规范及道德规范观念，提升法律意识。自主设计制作网页模块，培养学生数字化资源的学习能力，提升职业素养，尊重学生的劳动价值，使学生获得学习的成就感和满足感。

（3）优化完善首页效果

使用CSS对首页进行优化、美化。

1）涉及知识点：常用HTML标签的CSS属性含义及其设置方法，网页美化的思路和一般步骤，CSS3新特性、弹性布局、盒模型。

2）对照Web前端开发证书（初级）的知识技能要求：能使用CSS设计页面样式，了解CSS3特性、CSS3动画效果、弹性布局的使用方法，能使用CSS3新特性开发页面样式

3）融入思政元素：头脑风暴的引入，较大地拓宽了学生的逻辑思维，小组协作的方式，为学生创造出和谐友善的学习环境，引导学生自主探究，完成项目，帮助学生树立自我发展的人生观，拓展任务的布置，使学生深刻体会学习的成就感，从而培养推陈出新的大国工匠精神。

（4）添加首页交互效果

为首页导航区的图片添加翻页效果、信息板块添加选项卡切换效果。

1）涉及知识点：JavaScript数据类型、变量、选择器、函数、事件，jQuery中DOM操作、事件和动画。

2）对照Web前端开发证书（初级）的知识技能要求：掌握JavaScript基础语言、函数、事件，掌握jQuery中选择器、事件和动画功能。

3）融入思政元素：良好的网页的交互功能可以为用户提供良好的使用体验，通过“换位”意识，强化学生以人为本的开发理念，自主设计选项卡效果，培养学生数字化资源的学习利用能力，增强学生对已学知识的综合运用能力，提升职业素养。

3 结语

在思政教育的新形势下，积极响应国家职业教育政策，依据“1+X”职业技能等级标准，深度挖掘Web前端开发课程思政元素，将价值塑造、知识传授和能力培养三者融为一体，在实践中开展有效教学，探索，研究获取的成果不仅能够推动专业课程建设与改革，对软件技术专业课程教学改革具有及基地意义，而且也有利于实现专业技术人才“德技兼备”的育人成效。

参考文献

[1] 习近平.把思想政治工作贯穿教育教学全过程 开创我国高等教育事业发展新局面——刘云山講话 王岐山张高丽出席[N].人民日报，2016-12-09（1）.

[2] 秦媚，姚波，李娉霞，等.1+X证书制度背景下课程思政实施现状及对策分析[J].现代职业教育，2021（43）：18-19.

[3] 丁海霞.高职计算机专业课程思政与工匠精神融合研究[J].湖北开放职业学院学报，2021，34（20）：26-27，30.

[4] 曹宁，陈之酉，李友节，等.课程思政视域下职业院校实训课程内容的重构[J].天津中德应用技术大学学报，2021（5）：119-122.

[5] 马秋芳，史宏，潘浩.1+X证书制度下前端开发课程思政研究[J].福建电脑，2021，37（8）：151-153.

【通联编辑：朱宝贵】