基于“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]?！禬eb前端開發》課程的知識點涵蓋HTML、CSS、JavaScript、jQuery等大部分的前端開發技術，而前端開發證書所對應的職業技能等級標準涵蓋職業素養、職業技能和理論知識等內容，遵循不同的內容要融入的思政元素不盡相同的原則，在課程思政點的挖掘過程中，力求做到密切貼合課程教學與職業技能等級標準?！禬eb前端開發》主要選取愛黨愛國、民族自豪、工匠精神、人文素養、法律意識、正能量、勇于擔當等方面的思政元素進行融合[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.

【通聯編輯：朱寶貴】