選課日期：113/11/12 截止
課程名稱
前端新手村：HTML、CSS與JavaScript學習坊 Frontend Novice Village: HTML, CSS & JavaScript Workshop
*由於課程內容具連貫性，建議可全程出席者報名參與
授課教師
林宏一 老師（虎之呼吸科技有限公司 負責人）
課程概述與目標
- 數位行銷、網站建置流程與網站規劃
- HTML：表單與階層式結構
- CSS：樣式與排版
- 互動/動畫效果
- 響應式框架/切版撰寫出完整網頁
- 運用ChatGPT AI生成網頁程式
課程日期
2024/11/16（六）&11/23（六）
09:00-12:00 & 13:00-18:00
課程總時數
16小時
上課地點
光復校區 工程一館101室
修課人數上限
限40人
（由於教室空間有限，請同學確認該上課時間可以出席後，才進行報名）
先修科目或先備能力
Figma基礎能力：基本快捷鍵、基礎網頁繪製、建立共用元件
學生自備物品
筆電及充電器
預期具體成果或成品
運用AI及前端代碼從0打造網頁，成品製作一個頁面直接上架雲端
課程大綱
| 單元主題 | 內容綱要 | 講授 | 示範 | 習作 | 其他 |
| 概論 | 數位行銷、網站建置流程與網站規劃作業 | 1hr | – | – | – |
| HTML&CSS語法 | HTML&CSS語法 | 2hr | 2hr | 2hr | – |
| Javascript | Javascript互動式網頁元素及動畫 | 1hr | 1hr | 1hr | – |
| RWD網頁框架 | 網頁框架與切版 | 1hr | 0.5hr | 0.5hr | – |
| AI應用 | 透過AI協助產出代碼 | 1hr | – | 1hr | – |
| 綜合應用與產出 | 作品產出 | 0.5hr | – | 1.5hr | – |
課程進度表
| 日期 | 單元主題 | 內容綱要 |
|---|---|---|
| 11/16（六） | 09:00~09:50 | 數位行銷、網站建置流程與網站規劃作業 |
| 10:00~10:50 | VScode編輯器安裝與介紹 | |
| 11:10~12:00 | HTML：head、body、區塊與行內元素介紹與實作 | |
| 13:00~13:50 | HTML：表單與階層式結構介紹與實作 | |
| 14:00~14:50 | CSS：樣式與排版、行內樣式實作 | |
| 15:00~15:50 | CSS：標頭與外聯樣式、類別與id樣式 | |
| 16:10~17:00 | CSS：排版與響應式介紹與實作 | |
| 17:10~18:00 | Javascript：基礎元素操作 | |
| 11/23（六） | 09:00~09:50 | Javascript：jQuery安裝與指定元素互動效果 |
| 10:00~10:50 | Javascript：Animate安裝與動畫互動效果 | |
| 11:10~12:00 | Bootstrap 5：響應式框架介紹與安裝實作 | |
| 13:00~13:50 | Bootstrap 5：格線與模組介紹 | |
| 14:00~14:50 | 綜合應用：切版撰寫出完整網頁 | |
| 15:00~15:50 | 綜合應用：切版撰寫出完整網頁 | |
| 16:10~17:00 | 運用ChatGPT AI生成網頁程式與應用 | |
| 17:10~18:00 | 運用ChatGPT AI生成網頁程式與應用 |
