AIGC赋能的Web前端开发教学实践
2024/11/04 15:01:12
0 引 言
近年来，以 ChatGPT 为代表的生成式人工智能技术展现了巨大的影响力，国内外众多大语言模型也如雨后春笋般涌现。在教育领域， AIGC 的诞生既是机遇也是挑战，引起了学者们的广泛关注。董艳等人探讨了 AIGC 技术赋能教育对教学的影响，分析了其技术原理、辅助教学的形式和方法、教育风险、伦理问题、局限性，以及对教育生态和系统的影响[1]。在 AIGC 辅助计算机教学方面，有学者实证探讨了利用 AIGC 技术实现计算机基础教学的方式，例如，在 Python 程序设计等编程教学中的应用等[2-4]。然而，目前关于 AIGC 辅助前端开发教学的研究较少，我们需要思考：如何将其融入 Web 前端开发教学？它对 Web 前端开发教学有哪些影响及其在辅助课堂教学方面的能力如何？
1 AIGC 赋能 Web 前端开发教学概述
基于预训练的大语言模型的 AIGC 技术展示出了强大的语言理解能力和语境感知能力，能通过自然语言以聊天的方式与用户交互，高效、便捷地生成用于编程教学的内容。
同是编程学习，程序、算法类课程侧重于编程思维和逻辑分析，而 Web 前端开发类课程则主要涉及 HTML 、 CSS 、 JavaScript 等前端技术，重点在于理解布局、输入、事件驱动、事件处理、输出等概念，以及对前端技术的综合运用，采用的教学方法也更注重项目实践和即时反馈，适合初学者入门并快速看到学习成果，进阶的 Web 前端开发则更是要融入学习者的创意和美学。为 Web 前端开发类课程引入 AIGC 有三大优势：① Web 前端开发内容直观，使用 AIGC 技术能够快速看到效果，提升学生学习的兴趣和效率；② Web 前端开发重复性工作较多，使用 AIGC 技术可以有效减少重复性工作，使学习者将更多时间专注于解决复杂问题和创新上[5]；③相对程序、算法类的课程， Web 前端开发类课程更注重个性化、创意美学设计，而 AIGC 能提供较为成熟的开发方案、完善的设计建议和代码生成支持。然而，使用 AIGC 新技术需要得到正确的引导，否则容易引起学习者思路混乱，还会使学习者产生如过度依赖、技术和道德风险等问题[6]。
2 AIGC 赋能、人机协同的 Web 前端开发教学模式
AIGC 赋能、人机协同的 Web 前端开发教学指在 Web 前端开发课程“师”“生”“机”三元协同的教学中充分引入 AIGC 技术，完成该课程的教学任务。AIGC 技术在课前、课中、课后三个阶段均能提供支持和创新，为 Web 前端开发知识体系的教学、多样化教学方法的设计和丰富实践环节的开展提供新的思路和方法。在这种教学模式下，“师”“生”“机”三者将紧密协作互动，使 AIGC 的优势得以充分体现，因此， AIGC 技术能在多个学习层次中极大地影响并改变 Web 前端开发的教学模式。
3 AIGC 辅助的 Web 前端教学模式设计
AIGC 赋能、人机协同的 Web 前端开发教学模式设计如图 1 所示。
AIGC 的出现促使教师重新审视引导、讲授、教学及考核方式。课前，教师需要思考如何引导学生进行学习，利用大模型精选 Web 前端开发案例，并优化用于教学的提示词模版；课中，教师可实施人机协同教学、进行大模型的提问演示、巩固知识点，也可以对大模型的回复给出反馈，引导学生进行反思；课后，教师可以重构考核内容。例如，在 AIGC 辅助下，课程的学习目标中应加入对提示词的学习，也应在传统考核方式基础上加入对学生提问能力的考核，以便学生提高 AI 素养。教师可以利用大模型生成对应知识点的题目和答案（考虑到大模型幻觉的存在，教师还需要对生成的问答集进行筛选和修改，保证呈现给学生的作业及考试内容无误）。
学习者利用 AIGC 辅助学习可分为被动学习、主动学习、建构学习和交互学习 4 个层次[7]。
被动学习主要体现在课前预习阶段，学生可就基础知识对大模型进行提问，快速理解基本概念和扩展知识。课前学习一般是对知识进行全盘接受并实现浅层记忆的过程，学生无需对大模型回复的内容进行甄别和反思，大模型此时一般表现良好。
课中阶段，学习者可以达到主动学习层次（即根据课程内容对大模型进行主动提问并对信息进行筛选），也可通过多轮对话获得答案并选择性地应用知识，提升学习效率与提问素质。
课后阶段，学习者可以达到建构学习层次，其可以人机协同的方式完成作业和测试。由于学习者在课程学习结束后已经对所学知识达到了初步应用的水平，故其可以对大模型的回复进行加工，进一步整合学过的知识，但面对模型生成的答案，学习者要进行二次确认、及时纠偏。
个人反思可以在课中和课后阶段进行，通过对模型的迭代提问巩固已学到的知识，甚至自行推断新知识、对问答过程进行总结和反思，自如地设计提问模板，从而达到交互学习的层次。
在人机协同 Web 前端开发教学模式下， AIGC 技术贯穿全程。这种教学模式不仅适用于 Web 前端开发课程，还可被推广到其他编程学习课程乃至计算机专业所有课程。Web 前端开发课程的特点决定了 AIGC 赋能的应用尤为直观且效果显著。
4 教学模式应用及 AIGC 应用案例分析
实际教学中， Web 前端开发课程的设计将从 HTML 和 CSS 开始，逐步过渡到更复杂的 JavaScript 编程和框架应用，拆解复杂的应用问题并系统化地解决之。根据已有研究对大模型和人工智能在计算机辅助教学的功能总结[8]和教学应用[2]，本研究收集并整理了 AIGC 赋能、人机协同教学模式中师生在课前、课中、课后使用 AIGC 辅助教学的应用案例。在学习过程中， AIGC 在知识拓展、实例辨析、案例分析、语法练习、代码编写和代码纠错等场景均发挥了有效作用。
4.1 知识拓展
在 Web 前端开发教学中，主流的学习路径是从 HTML 到 CSS 再到 JavaScript 基础，这三者构成了前端开发的基石。大语言模型可以在概念的理解、辨析等方面为学习者提供知识扩展。
对 ChatGPT 的分析能力测评见表 1 ，可见 ChatGPT 对基本概念、语法结构和常见元素等基本问题回答良好，类似传统的搜索引擎，能够提供丰富的学习资源。但因其提供信息的准确性无法得到保证[9]，故建议初学者结合权威的资料学习。
4.2 实例辨析
表 2 是一个 ChatGPT 评测 CSS 实例辨析能力的案例。由该例子可见， ChatGPT 具备解答 CSS 问题的能力，能够简要解释 CSS 的规则，还能说明多个规则作用于同一个标签时各规则的优先级和顺序。初学者可以快速了解 CSS ，并可通过复用或修改代码以确认规则，巩固基础知识。
4.3 案例分析
表 3 是 ChatGPT 分析 JavaScript 变量作用域的案例。在分析该案例时， ChatGPT 详细说明了局部变量和全局变量二者作用域的差异，并解释了案例中最后一行输出空白行的原因。由此可见， ChatGPT 具备了有效展示变量概念的能力，并能通过准确的输出和错误提醒功能助力学习者理解案例。
4.4 语法练习
表 4 给出了由文心一言生成的 JavaScript 语法练习题例子。文心一言能够有效整合变量初始化、事件监听器的添加，以及 DOM 元素的引用和更新，然后给出语法练习题。在该例子中，文心一言对 JavaScript 事件的基本逻辑进行了清晰的描述，学生通过该练习可以学会如何为元素添加事件监听器、编写相应的事件处理函数，并在浏览器中测试自己编写的代码，直观地理解代码的运行逻辑，从而加深对 JavaScript 语法的理解。
4.5 代码编写
在代码编写能力方面， ChatGPT 和 CodeGeeX 各自编写的一个网页代码案例见表 5 。
表 5 中两个案例均源于课程后期的综合实践， ChatGPT 、 CodeGeeX 等大语言模型在案例中展现了成熟的代码编写能力。例如， ChatGPT 在示例中提供的代码能添加英文单词并在网页上显示，实现了对中文解释的可见性控制，同时也实现了单击“清空”按钮后清空所有内容的功能。两段代码综合运用基本的 HTML 、 CSS 和 JavaScript 知识，通过简单的事件处理函数实现了各种功能，代码结构清晰，逻辑清楚，易于理解和修改。AIGC 在前端编程方面展现的能力能够为学习者提供有效的辅助和支持。
值得注意的是这两个案例的提示语步骤清晰，为代码的正确生成打下了基础。学生在综合实践时应提升提示语工程水平，从 AIGC 技术中获得更好的帮助。教师在教学时也应当引导学生做问题拆解，注重培养学生的 AI 素养，以及学生使用 AIGC 提问的能力。
4.6 代码纠错
在前端开发学习中，代码调试极为重要，无论是初学者还是经验丰富的开发者都会遇到逻辑错误、语法错误或页面样式问题等问题。表 6 通过一个案例展示了文心一言在 JavaScript 中如何修复事件处理函数未更新页面的问题。文心一言首先定位了计数器未更新的问题，找出了原因并提供了解决方案和修改后的代码。
综上所述，实践证明 AIGC 在 Web 前端开发中具备了知识拓展、实例辨析、案例分析、语法练习、代码编写和代码纠错等方面的能力，且便捷易用、反馈迅速，有助于教师在课前、课中和课后利用 AIGC 进行引导、讲授、教学和考核方式等的优化，进而提升教学质量[10]。在教师引导下，学生可于课前、课中和课后利用 AIGC 进行持续练习和累积经验，增强代码调试能力，提高开发效率和代码质量。
需要说明的是，本文的案例应用实践源于 Web 前端设计基础课程，所涉及的实践内容尚属于基础的教学阶段。大语言模型对浅层次的、单个知识点的基础教学表现良好，但处于综合性问题还需要使用者提高提问技巧，恰当拆解问题以便更好地运用 AI 。在 AIGC 赋能、人机协同的 Web 前端开发教学模式下，教师应引导学生利用好 AI 、培养 AI 素养，规避风险。
5 结 语
AIGC 技术在 Web 前端开发中具备知识拓展、概念辨析、案例分析、语法练习、代码编写和代码纠错等方面的能力，本研究验证了 AIGC 赋能的可行性和有效性。AIGC 赋能的人机协同 Web 前端开发教学模式设计可以为学生提供更加丰富的学习体验，提升教学效果。
AIGC 赋能的关键在于提问的质量，因此，对提问素养的培养将是教学中的重要目标。进一步地，学者的关注点需要从有效利用 AIGC 赋能 Web 前端开发教学拓展到设计 AIGC 以更好地赋能 Web 前端开发，进而赋能编程学习、其他计算机课程教学，以及各领域教育教学等。AIGC 的诞生既是机遇也是挑战，必将对教育领域产生深远影响。
参考文献
[1] 董艳, 夏亮亮, 李心怡, 等. ChatGPT赋能学生学习的路径探析[J]. 电化教育研究, 2023, 44(12): 14-20, 34.
[2] 汪芳, 赵左, 王毅航, 等. 人工智能在程序设计教学应用中的探索与实践[J]. 计算机教育, 2023(11): 45-50.
[3] 孙丹, 朱城聪, 许作栋, 等. 基于生成式人工智能的大学生编程学习行为分析研究[J]. 电化教育研究, 2024, 45(3): 113-120.
[4] 沙行勉, 王寒, 徐珑珊, 等. ChatGPT对计算机基础教育的挑战分析与应对策略[J]. 计算机教育, 2023(11): 51-54.
[5] 杨尚东, 陈蕾, 陈兴国, 等. 交互式大模型驱动的大数据技术实践课程教学探索[J]. 计算机教育, 2023(11): 55-59.
[6] 徐慧, 鞠小林, 王皓晨. 大模型下编程教学面临的挑战与应对[J]. 计算机教育, 2023(11): 60-64.
[7] 盛群力, 丁旭, 滕梅芳. 参与就是能力:“ICAP学习方式分类学”研究述要与价值分析[J]. 开放教育研究, 2017, 23(2): 46-54.
[8] 刘小丽, 古天龙. ChatGPT对计算机教育的影响及对策[J]. 计算机教育, 2023(11): 38-44.
[9] 王佑镁, 王旦, 梁炜怡, 等.“阿拉丁神灯”还是“潘多拉魔盒”: ChatGPT教育应用的潜能与风险[J]. 现代远程教育研究, 2023, 35(2): 48-56.
[10] 王开军, 刘嘉雯, 郑子怡, 等. 智能知识工具助力和多任务引导的主动学习教学法[J]. 计算机教育, 2023(11): 65-68.
基金项目：全国高等院校计算机基础教育研究会计算机基础教育教学研究项目（2024-AFCEC-189）；中央高校基本科研业务费专项资金资助项目（24QN38）；北京语言大学院级项目“基于人工智能的国际中文教育课堂提质赋能可行性研究”（23YJ080010）。。
作者简介：项若曦，女，北京语言大学讲师，研究方向为智慧教育、自然语言处理等，rxxiang@blcu.edu.cn；赵慧周（通信作者），女，北京语言大学副教授，研究方向为大数据语言教育、计算机教育，zhaohuizhou@blcu.edu.cn。
引用格式：项若曦,赵慧周,王桢廷,等.AIGC赋能的Web前端开发教学实践[J].计算机教育,2024,(10):153-158.
文章头图由“智谱清言”绘制而成。
（完）
更多精彩：
校长专访｜扎根边疆民族地区 聚焦师范教育主业培养高素质应用型人才——丽江师范高等专科学校陈本辉校长专访
言十│计算机系统能力培养的回顾与前瞻
“以学生为中心”教学的理念及落地路径探讨
校长专访｜推动学科交叉融合 培养新时代创新型人才——香港科技大学(广州)创校校长倪明选教授专访
第七届编委会新年寄语
计算学科课程思政教学指南
陈国良院士｜计算机课程思政虚拟教研室文化建设
南大陈道蓄教授｜变与不变：学习过程中的辩证法
言十│关于高校青年教师的“困境”思考及建议
徐晓飞等｜元宇宙教育及其服务生态体系
【目录】《计算机教育》2024年第9期
【目录】《计算机教育》2024年第8期
【编委寄语】北京大学李晓明教授：由“课堂教学改进元年”想到的……
南大陈道蓄教授：教学生提问和教学生答问，哪个更重要？
【言十系列】：计算机学科发展趋势及其对计算机教育的影响
北大李晓明教授：从趣味数学到趣味算法到趣味编程——非专业学习者体会计算思维的一条途径？
一流计算机学科建设的几个问题思考
新工科与大数据专业建设
他山之石可以攻玉——中外计算机教育研究文章汇编
近年来，以 ChatGPT 为代表的生成式人工智能技术展现了巨大的影响力，国内外众多大语言模型也如雨后春笋般涌现。在教育领域， AIGC 的诞生既是机遇也是挑战，引起了学者们的广泛关注。董艳等人探讨了 AIGC 技术赋能教育对教学的影响，分析了其技术原理、辅助教学的形式和方法、教育风险、伦理问题、局限性，以及对教育生态和系统的影响[1]。在 AIGC 辅助计算机教学方面，有学者实证探讨了利用 AIGC 技术实现计算机基础教学的方式，例如，在 Python 程序设计等编程教学中的应用等[2-4]。然而，目前关于 AIGC 辅助前端开发教学的研究较少，我们需要思考：如何将其融入 Web 前端开发教学？它对 Web 前端开发教学有哪些影响及其在辅助课堂教学方面的能力如何？
1 AIGC 赋能 Web 前端开发教学概述
基于预训练的大语言模型的 AIGC 技术展示出了强大的语言理解能力和语境感知能力，能通过自然语言以聊天的方式与用户交互，高效、便捷地生成用于编程教学的内容。
同是编程学习，程序、算法类课程侧重于编程思维和逻辑分析，而 Web 前端开发类课程则主要涉及 HTML 、 CSS 、 JavaScript 等前端技术，重点在于理解布局、输入、事件驱动、事件处理、输出等概念，以及对前端技术的综合运用，采用的教学方法也更注重项目实践和即时反馈，适合初学者入门并快速看到学习成果，进阶的 Web 前端开发则更是要融入学习者的创意和美学。为 Web 前端开发类课程引入 AIGC 有三大优势：① Web 前端开发内容直观，使用 AIGC 技术能够快速看到效果，提升学生学习的兴趣和效率；② Web 前端开发重复性工作较多，使用 AIGC 技术可以有效减少重复性工作，使学习者将更多时间专注于解决复杂问题和创新上[5]；③相对程序、算法类的课程， Web 前端开发类课程更注重个性化、创意美学设计，而 AIGC 能提供较为成熟的开发方案、完善的设计建议和代码生成支持。然而，使用 AIGC 新技术需要得到正确的引导，否则容易引起学习者思路混乱，还会使学习者产生如过度依赖、技术和道德风险等问题[6]。
2 AIGC 赋能、人机协同的 Web 前端开发教学模式
AIGC 赋能、人机协同的 Web 前端开发教学指在 Web 前端开发课程“师”“生”“机”三元协同的教学中充分引入 AIGC 技术，完成该课程的教学任务。AIGC 技术在课前、课中、课后三个阶段均能提供支持和创新，为 Web 前端开发知识体系的教学、多样化教学方法的设计和丰富实践环节的开展提供新的思路和方法。在这种教学模式下，“师”“生”“机”三者将紧密协作互动，使 AIGC 的优势得以充分体现，因此， AIGC 技术能在多个学习层次中极大地影响并改变 Web 前端开发的教学模式。
3 AIGC 辅助的 Web 前端教学模式设计
AIGC 赋能、人机协同的 Web 前端开发教学模式设计如图 1 所示。
AIGC 的出现促使教师重新审视引导、讲授、教学及考核方式。课前，教师需要思考如何引导学生进行学习，利用大模型精选 Web 前端开发案例，并优化用于教学的提示词模版；课中，教师可实施人机协同教学、进行大模型的提问演示、巩固知识点，也可以对大模型的回复给出反馈，引导学生进行反思；课后，教师可以重构考核内容。例如，在 AIGC 辅助下，课程的学习目标中应加入对提示词的学习，也应在传统考核方式基础上加入对学生提问能力的考核，以便学生提高 AI 素养。教师可以利用大模型生成对应知识点的题目和答案（考虑到大模型幻觉的存在，教师还需要对生成的问答集进行筛选和修改，保证呈现给学生的作业及考试内容无误）。
学习者利用 AIGC 辅助学习可分为被动学习、主动学习、建构学习和交互学习 4 个层次[7]。
被动学习主要体现在课前预习阶段，学生可就基础知识对大模型进行提问，快速理解基本概念和扩展知识。课前学习一般是对知识进行全盘接受并实现浅层记忆的过程，学生无需对大模型回复的内容进行甄别和反思，大模型此时一般表现良好。
课中阶段，学习者可以达到主动学习层次（即根据课程内容对大模型进行主动提问并对信息进行筛选），也可通过多轮对话获得答案并选择性地应用知识，提升学习效率与提问素质。
课后阶段，学习者可以达到建构学习层次，其可以人机协同的方式完成作业和测试。由于学习者在课程学习结束后已经对所学知识达到了初步应用的水平，故其可以对大模型的回复进行加工，进一步整合学过的知识，但面对模型生成的答案，学习者要进行二次确认、及时纠偏。
个人反思可以在课中和课后阶段进行，通过对模型的迭代提问巩固已学到的知识，甚至自行推断新知识、对问答过程进行总结和反思，自如地设计提问模板，从而达到交互学习的层次。
在人机协同 Web 前端开发教学模式下， AIGC 技术贯穿全程。这种教学模式不仅适用于 Web 前端开发课程，还可被推广到其他编程学习课程乃至计算机专业所有课程。Web 前端开发课程的特点决定了 AIGC 赋能的应用尤为直观且效果显著。
4 教学模式应用及 AIGC 应用案例分析
实际教学中， Web 前端开发课程的设计将从 HTML 和 CSS 开始，逐步过渡到更复杂的 JavaScript 编程和框架应用，拆解复杂的应用问题并系统化地解决之。根据已有研究对大模型和人工智能在计算机辅助教学的功能总结[8]和教学应用[2]，本研究收集并整理了 AIGC 赋能、人机协同教学模式中师生在课前、课中、课后使用 AIGC 辅助教学的应用案例。在学习过程中， AIGC 在知识拓展、实例辨析、案例分析、语法练习、代码编写和代码纠错等场景均发挥了有效作用。
4.1 知识拓展
在 Web 前端开发教学中，主流的学习路径是从 HTML 到 CSS 再到 JavaScript 基础，这三者构成了前端开发的基石。大语言模型可以在概念的理解、辨析等方面为学习者提供知识扩展。
对 ChatGPT 的分析能力测评见表 1 ，可见 ChatGPT 对基本概念、语法结构和常见元素等基本问题回答良好，类似传统的搜索引擎，能够提供丰富的学习资源。但因其提供信息的准确性无法得到保证[9]，故建议初学者结合权威的资料学习。
4.2 实例辨析
表 2 是一个 ChatGPT 评测 CSS 实例辨析能力的案例。由该例子可见， ChatGPT 具备解答 CSS 问题的能力，能够简要解释 CSS 的规则，还能说明多个规则作用于同一个标签时各规则的优先级和顺序。初学者可以快速了解 CSS ，并可通过复用或修改代码以确认规则，巩固基础知识。
4.3 案例分析
表 3 是 ChatGPT 分析 JavaScript 变量作用域的案例。在分析该案例时， ChatGPT 详细说明了局部变量和全局变量二者作用域的差异，并解释了案例中最后一行输出空白行的原因。由此可见， ChatGPT 具备了有效展示变量概念的能力，并能通过准确的输出和错误提醒功能助力学习者理解案例。
4.4 语法练习
表 4 给出了由文心一言生成的 JavaScript 语法练习题例子。文心一言能够有效整合变量初始化、事件监听器的添加，以及 DOM 元素的引用和更新，然后给出语法练习题。在该例子中，文心一言对 JavaScript 事件的基本逻辑进行了清晰的描述，学生通过该练习可以学会如何为元素添加事件监听器、编写相应的事件处理函数，并在浏览器中测试自己编写的代码，直观地理解代码的运行逻辑，从而加深对 JavaScript 语法的理解。
4.5 代码编写
在代码编写能力方面， ChatGPT 和 CodeGeeX 各自编写的一个网页代码案例见表 5 。
表 5 中两个案例均源于课程后期的综合实践， ChatGPT 、 CodeGeeX 等大语言模型在案例中展现了成熟的代码编写能力。例如， ChatGPT 在示例中提供的代码能添加英文单词并在网页上显示，实现了对中文解释的可见性控制，同时也实现了单击“清空”按钮后清空所有内容的功能。两段代码综合运用基本的 HTML 、 CSS 和 JavaScript 知识，通过简单的事件处理函数实现了各种功能，代码结构清晰，逻辑清楚，易于理解和修改。AIGC 在前端编程方面展现的能力能够为学习者提供有效的辅助和支持。
值得注意的是这两个案例的提示语步骤清晰，为代码的正确生成打下了基础。学生在综合实践时应提升提示语工程水平，从 AIGC 技术中获得更好的帮助。教师在教学时也应当引导学生做问题拆解，注重培养学生的 AI 素养，以及学生使用 AIGC 提问的能力。
4.6 代码纠错
在前端开发学习中，代码调试极为重要，无论是初学者还是经验丰富的开发者都会遇到逻辑错误、语法错误或页面样式问题等问题。表 6 通过一个案例展示了文心一言在 JavaScript 中如何修复事件处理函数未更新页面的问题。文心一言首先定位了计数器未更新的问题，找出了原因并提供了解决方案和修改后的代码。
综上所述，实践证明 AIGC 在 Web 前端开发中具备了知识拓展、实例辨析、案例分析、语法练习、代码编写和代码纠错等方面的能力，且便捷易用、反馈迅速，有助于教师在课前、课中和课后利用 AIGC 进行引导、讲授、教学和考核方式等的优化，进而提升教学质量[10]。在教师引导下，学生可于课前、课中和课后利用 AIGC 进行持续练习和累积经验，增强代码调试能力，提高开发效率和代码质量。
需要说明的是，本文的案例应用实践源于 Web 前端设计基础课程，所涉及的实践内容尚属于基础的教学阶段。大语言模型对浅层次的、单个知识点的基础教学表现良好，但处于综合性问题还需要使用者提高提问技巧，恰当拆解问题以便更好地运用 AI 。在 AIGC 赋能、人机协同的 Web 前端开发教学模式下，教师应引导学生利用好 AI 、培养 AI 素养，规避风险。
5 结 语
AIGC 技术在 Web 前端开发中具备知识拓展、概念辨析、案例分析、语法练习、代码编写和代码纠错等方面的能力，本研究验证了 AIGC 赋能的可行性和有效性。AIGC 赋能的人机协同 Web 前端开发教学模式设计可以为学生提供更加丰富的学习体验，提升教学效果。
AIGC 赋能的关键在于提问的质量，因此，对提问素养的培养将是教学中的重要目标。进一步地，学者的关注点需要从有效利用 AIGC 赋能 Web 前端开发教学拓展到设计 AIGC 以更好地赋能 Web 前端开发，进而赋能编程学习、其他计算机课程教学，以及各领域教育教学等。AIGC 的诞生既是机遇也是挑战，必将对教育领域产生深远影响。
参考文献
[1] 董艳, 夏亮亮, 李心怡, 等. ChatGPT赋能学生学习的路径探析[J]. 电化教育研究, 2023, 44(12): 14-20, 34.
[2] 汪芳, 赵左, 王毅航, 等. 人工智能在程序设计教学应用中的探索与实践[J]. 计算机教育, 2023(11): 45-50.
[3] 孙丹, 朱城聪, 许作栋, 等. 基于生成式人工智能的大学生编程学习行为分析研究[J]. 电化教育研究, 2024, 45(3): 113-120.
[4] 沙行勉, 王寒, 徐珑珊, 等. ChatGPT对计算机基础教育的挑战分析与应对策略[J]. 计算机教育, 2023(11): 51-54.
[5] 杨尚东, 陈蕾, 陈兴国, 等. 交互式大模型驱动的大数据技术实践课程教学探索[J]. 计算机教育, 2023(11): 55-59.
[6] 徐慧, 鞠小林, 王皓晨. 大模型下编程教学面临的挑战与应对[J]. 计算机教育, 2023(11): 60-64.
[7] 盛群力, 丁旭, 滕梅芳. 参与就是能力:“ICAP学习方式分类学”研究述要与价值分析[J]. 开放教育研究, 2017, 23(2): 46-54.
[8] 刘小丽, 古天龙. ChatGPT对计算机教育的影响及对策[J]. 计算机教育, 2023(11): 38-44.
[9] 王佑镁, 王旦, 梁炜怡, 等.“阿拉丁神灯”还是“潘多拉魔盒”: ChatGPT教育应用的潜能与风险[J]. 现代远程教育研究, 2023, 35(2): 48-56.
[10] 王开军, 刘嘉雯, 郑子怡, 等. 智能知识工具助力和多任务引导的主动学习教学法[J]. 计算机教育, 2023(11): 65-68.
基金项目：全国高等院校计算机基础教育研究会计算机基础教育教学研究项目（2024-AFCEC-189）；中央高校基本科研业务费专项资金资助项目（24QN38）；北京语言大学院级项目“基于人工智能的国际中文教育课堂提质赋能可行性研究”（23YJ080010）。。
作者简介：项若曦，女，北京语言大学讲师，研究方向为智慧教育、自然语言处理等，rxxiang@blcu.edu.cn；赵慧周（通信作者），女，北京语言大学副教授，研究方向为大数据语言教育、计算机教育，zhaohuizhou@blcu.edu.cn。
引用格式：项若曦,赵慧周,王桢廷,等.AIGC赋能的Web前端开发教学实践[J].计算机教育,2024,(10):153-158.
文章头图由“智谱清言”绘制而成。
（完）
更多精彩：
校长专访｜扎根边疆民族地区 聚焦师范教育主业培养高素质应用型人才——丽江师范高等专科学校陈本辉校长专访
言十│计算机系统能力培养的回顾与前瞻
“以学生为中心”教学的理念及落地路径探讨
校长专访｜推动学科交叉融合 培养新时代创新型人才——香港科技大学(广州)创校校长倪明选教授专访
第七届编委会新年寄语
计算学科课程思政教学指南
陈国良院士｜计算机课程思政虚拟教研室文化建设
南大陈道蓄教授｜变与不变：学习过程中的辩证法
言十│关于高校青年教师的“困境”思考及建议
徐晓飞等｜元宇宙教育及其服务生态体系
【目录】《计算机教育》2024年第9期
【目录】《计算机教育》2024年第8期
【编委寄语】北京大学李晓明教授：由“课堂教学改进元年”想到的……
南大陈道蓄教授：教学生提问和教学生答问，哪个更重要？
【言十系列】：计算机学科发展趋势及其对计算机教育的影响
北大李晓明教授：从趣味数学到趣味算法到趣味编程——非专业学习者体会计算思维的一条途径？
一流计算机学科建设的几个问题思考
新工科与大数据专业建设
他山之石可以攻玉——中外计算机教育研究文章汇编