【114-1微學分課程】前端起手式：從基礎三語到AI製作響應式網頁 From the Big Three Basics to AI-Powered Responsive Web Design

ICT跨領域實作

課程概述與目標

運用AI及前端程式碼從0打造自己的專屬網站上傳至公開網路展現成果

選課日期： 114/ 8 / 11 截止
前往選課系統

授課教師

電機系 劉建男 教授
胡哲維 資深前端工程師

對應總課程名稱

ICT跨領域實作
ICT Interdisciplinary Implementation

課程日期

8/15(五)10:00~17:00實體
8/16(六)10:00~17:00 實體
8/18(一)10:00~15:00 線上

課程總時數

16小時

修課人數

30人 (開放校外）

選課優先順位：NYCU在校學生>校外在學生（臺聯大）>其他校外學生（大學、高中）>校内教職員>社會人士

先修科目或先備能力

否

自備物品

筆電

課程教材

https://www.w3schools.com/
https://chatgpt.com/

作業、考試、評量

出席率40%、作業20%、成果40%

8/18 成果發表時產出一個含有 HTML/CSS/Javascript 的自己的公開網站

課程大綱

單元主題 內容綱要 講授 示範 習作 其他
概論 網站建置與 VsCode 編輯器介紹 1hr – – –
HTML HTML 基本標籤       0.5hr 0.5hr 1hr 1hr
CSS CSS 基本語法 0.5hr 0.5hr 1hr –
RWD網頁 RWD 網頁框架與切版 0.5hr 0.5hr 1hr –
Javascript Javascript 操作 dom 1hr 1hr 1hr –
AI應用 透過 ChatGPT AI 協助產生程式碼 1hr – 1hr –
綜合實作 產出自己的個人網站 – – 2hr –
成果發表 成果發表與更多激盪 – – 2hr –

課程進度表

日期 課程進度、內容、主題
8/15 10:00~10:50 網站建置與 VsCode 編輯器介紹
11:00~11:50 HTML：head、body、主要標籤介紹
13:00~13:50 HTML：結構區塊、更多標籤介紹與實作
14:00~14:50 CSS：樣式排版設計介紹
15:00~15:50 CSS：更多樣式與排版外聯樣式介紹與實作
16:00~16:50 CSS：響應式設計介紹
8/16 10:00~10:50 CSS：響應式設計與實作
11:00~11:50 Javascript：基礎元素操作介紹
13:00~13:50 Javascript：邏輯與互動操作介紹
14:00~14:50 Javascript：綜合設計操作與實作
15:00~15:50 AI應用: 運用 ChatGPT AI 生成網頁程式與應用
16:00~16:50 AI應用: 運用 ChatGPT AI 生成網頁程式與應用
8/18 10:00~10:50 綜合實作：個人網站設計與實作
11:00~11:50 綜合實作：個人網站設計與實作
13:00~13:50 成果發表：成果發表
14:00~14:50 成果發表：成果發表

常見問題