# 「2025 Rookie Awakening IV」企劃書

:::info
> 課程負責人聯絡資訊：
> 許堃陽 / Email：[e-mail]

- 課程參與講師：
許堃陽、宋安琪、許志齊、李崇瑋
共計 4 人
[name=企劃書撰寫：許堃陽]
:::

> [TOC]
>

---
## 課程資訊
- 課程時間：
[time= 2025/10/13 - 2026/07/31]
[time= 逢週一 19:00 - 21:00]
* 第一季︰[time= 2025/10/13 - 2025/12/22]
* 第二季︰[time= 預計 2026/03 - 2026/05]
* 第三季︰[time= 預計 2026/04 - 2026/06]

- 課程對象：
[name=Abyss 未通過培訓之成員]
[name=對資訊有興趣之學生]

- 課程預估人數：
[name= 7~9 人]

- 課程地點：
* 線上 - Discord - 冒險者大廳

### _預期目標與主旨_
今期的課程內容包括 2 門「程設基礎」課程 以及 1 門「進階應用」課程。
> 這邊正名「基礎資訊技能」為「程設基礎 (Coding Fundation)」、「進階資訊技能」為「進階應用 (Advanced Application)」
> 另外還是有預期要進行一季的「專案實作 (Project Practice)」
> [name=夜貓]
> OK
> [name=薯羊]

**【程設基礎】**
* 網頁開發
* Python 基礎

**【進階應用】**
* Linux 系統操作 **(暫定)**

預期學生能夠過程中，理解網頁開發的基礎知識，以及具體基礎程式開發的能力。
此外，透過學習 Linux 系統的操作，加深了解作業系統的運作。

Abyss 新手勇者在完整參與本次培訓後，視作完成學員部份的訓練，只要配合「授課訓練」及「專案實作」後，即可進昇為正式成員。

---
## 課程規劃
### 第一季 Frontend builder
==課程內容規劃==
> 講師：宋安琪
> 彩排︰已通過

| 週次 | 日期 | 類型 | 課程標題 | 內容 | 備註 |
| ---- | --- | --- | ------- | ---- | ------ |
| 1 | 10/13 | Course | 前端基礎 + HTML | 網站概念、核心技術、瀏覽器解析網頁 + HTML語法 | 開發工具：VScode。60 min |
| 1 | 10/13 | Lab | 建立網頁 | 建立具備最基本結構的網頁 | 20 min |
| 1 | 10/13 | Lab | 資訊搜尋 | 使用開發人員工具觀察 | 20 min |
| 1 | 10/13 | Lab | 標籤使用 | 練習 HTML 標籤 | 20 min |
| 1 | 10/13 | Slides & Notes | 前端基礎 + HTML | [簡報](https://docs.google.com/presentation/d/1JAa5Anfnll7jkB10puVFS3nh6kOYuF77Q_9_L2sT4j8/edit?usp=sharing)、[筆記](https://recondite-cartwheel-d1e.notion.site/W1-HTML-1c55417e7ad18084bbe0f6bdfe1b87b7) |
| 2 | 10/20 | Course | CSS | 10/20 CSS 語法、選擇器、排版與樣式設定 | 開發工具：VScode |
| 2 | 10/20 | Lab | CSS 選擇器 | 使用選擇器抓取元素、顯示屬性調整（色彩、字型、位置） | |
| 2 | 10/20 | Lab | 頁面排版 | 修改頁面樣式、Box Model | |
| 2 | 10/20 | Lab | CSS 視覺特效 | 修改漸變屬性、transform 函式 | |
| 2 | 10/20 | Slides & Notes | CSS | [簡報](https://docs.google.com/presentation/d/1iAzswqCrDFSKXoLt_HxBz0E_VCrG8hnHLv0iTa93IuY/edit?usp=sharing)、[筆記](https://recondite-cartwheel-d1e.notion.site/W2-CSS-1dd5417e7ad18099be69ddf09e8c6cc9) |
| 3 | 10/27 | Course | JavaScript 基礎| 變數、資料型別、運算子、控制流程、陣列、物件的基本操作、函式 | 開發工具：VScode、Node.js |
| 3 | 10/27 | Lab | 閏年判斷 | 條件與計算 | |
| 3 | 10/27 | Lab | 天數計算 | 條件與函式使用 | |
| 3 | 10/27 | Lab | JSON 處理 | JSON 結構資料處理 | |
| 3 | 10/27 | Slides & Notes | JavaScript 基礎 | [簡報](https://drive.google.com/drive/folders/1vaZAiT1987o76KvQpu7JKHHqITp4ZYyn)、[筆記](https://recondite-cartwheel-d1e.notion.site/W3-JavaScript-1dd5417e7ad1804b9fc3c676ca5e534d) | |
| - | 11/03 | - | - | 期中考不上課 | - |
| 4 | 11/10 | Course | JavaScript 進階 | DOM 操作、事件處理、API、AJAX | 開發工具：VScode |
| 4 | 11/10 | Lab | DOM 操作 | 網頁操作方法 | |
| 4 | 11/10 | Lab | 事件處理 | 網頁事件操作 | |
| 4 | 11/10 | Lab | API 資料抓取 | 抓取天氣、地圖資訊 | |
| 4 | 11/10 | Slides & Notes | JavaScript 進階 | [簡報](https://docs.google.com/presentation/d/1p-xMj3M4V-n8NmQBfC8mMROq46fsSbLuRksJH9o4xYc/edit?usp=sharing)、[筆記](https://recondite-cartwheel-d1e.notion.site/W4-JavaScript-1dd5417e7ad18084af5efb2c16cfdaf4) | |
| 5 | 11/17 | Course | Bootstrap | 排版、JavaScript 互動元件 | 開發工具：VScode |
| 5 | 11/17 | Lab | Forms | 表單組件設定 | |
| 5 | 11/17 | Lab | Navbar | 導覽列 | |
| 5 | 11/17 | Lab | 互動式 UI | Modal | |
| 5 | 11/17 | Slides & Notes | Bootstrap | [簡報](https://docs.google.com/presentation/d/1lzBROioU87coF379S9TMPNxI94I4WwgQ8SaBhjGnvuM/edit?usp=sharing)、[筆記](https://recondite-cartwheel-d1e.notion.site/W5-Bootstrap-1dd5417e7ad180cc82a2ce159d685ccb) | |
| 6 | 11/24 | Course | Vue.js 基礎 | Vue 的基本概念和工作原理、模板語法、指令、事件處理和資料綁定 | 開發工具：VScode |
| 6 | 11/24 | Lab | 天氣查詢器 | 條件綁定 | |
| 6 | 11/24 | Lab | 景點推薦 | 插值綁定、事件綁定 | |
| 6 | 11/24 | Lab | 行程列表 | 插值綁定、屬性綁定、事件綁定 | |
| 6 | 11/24 | Slides & Notes | Vue.js 基礎 | [簡報](https://docs.google.com/presentation/d/1wgPmoGDT1ZEpCDPhGZ-VFyLgcI15NZblrMBQh181CHY/edit?usp=sharing)、[筆記](https://recondite-cartwheel-d1e.notion.site/W6-Vue-js-1dd5417e7ad18044baa2ce93ec32844f) | |
| 7 | 11/24 | Course | Vue.js 進階 | Composition API 和組件通信 | 開發工具：VScode、Node.js |
| 7 | 11/24 | Lab | Options API Todolist | 練習 Vue 指令 | |
| 7 | 11/24 | Lab | Composition API Todolist | 練習 Compostion API 寫法 | |
| 7 | 11/24 | Lab | Componented-based Todolist | 將應用拆成元件寫法 | |
| 7 | 11/24 | Slides & Notes | Vue.js 進階 | [簡報](https://docs.google.com/presentation/d/1Ni9PF8-Cf9zc03T02AfFAPNmy3uqG501BUFhNtTnslo/edit?usp=sharing)、[筆記](https://recondite-cartwheel-d1e.notion.site/W7-Vue-js-1dd5417e7ad180efbfa9cc38b4f90cd3) | |
| 8 | 12/01 | Course | Vue.js 高階 | 路由管理、狀態管理和使用外部 API | 開發工具：VScode、Node.js |
| 8 | 12/01 | Lab | 多頁切換 | Router | |
| 8 | 12/01 | Lab | 行程資料管理 | 狀態管理（Vuex / Pinia）、異步請求（API串接） | |
| 8 | 12/01 | Lab | Vue 與地圖整合 | 整合 Google Maps API / Leaflet | |
| 8 | 12/01 | Slides & Notes | Vue.js 高階 | [簡報](https://docs.google.com/presentation/d/1AmE1nfDYaz8wf60HNeFozoBZXaMCbVcHN9FjBKyKp0M/edit?slide=id.g383596c3ed8_0_43#slide=id.g383596c3ed8_0_43)、[筆記](https://recondite-cartwheel-d1e.notion.site/W8-Vue-js-1dd5417e7ad180eb8b76d4f4e8e72ee4) | |
| 9 | 12/08 | Course | 旅遊規劃應用 | 地圖 API、路線規劃 | 開發工具：VScode、Node.js |
| 9 | 12/08 | Lab | 地點標記 | 使用地圖 API | |
| 9 | 12/08 | Lab | 路線規劃 | 距離與時間 | |
| 9 | 12/08 | Lab | API 整合 | 獲取即時路線、交通資訊 | |
| 9 | 12/08 | Slides & Notes | 旅遊規劃應用 | [簡報](https://docs.google.com/presentation/d/1KDCsk9Gx4pgkJkS6Uy16XBCkXqFypcVQUA7aB7QsS6I/edit?usp=sharing)、[筆記](https://recondite-cartwheel-d1e.notion.site/W9-1dd5417e7ad180ad8245c2f035bbebf1) | |

#### 學員回饋
* 跟不上
* 不知道程式碼在打在哪

---

### 第二季
> 講師：許志齊
> 彩排︰11/21 (五)開始 每週五 20:00 - 22:00
> 上課時間︰3/13 (五)開始 每週五 19:00 - 21:00
> 上課地點︰ LE503 / LE506 及 Discord - 冒險者大廳
> 課程通知：課前兩天 (每週三)
- Discord 公告 - 任務布告欄 (丰嘉)
>
| 週次 | 類型 | 課程標題 | 內容 | 備註 |
| ---- | --- | ------- | ---- | ------ | --- |
| 1 | Course | [標題] | [內容說明] | [其他說明] |
| 1 | Lab | [標題] | [內容說明] | [其他說明] |

### _企劃時程_
| 日期 | 企劃項目 | 負責人 | 備註 |
| --- | --- | ------- | ----- | --- |
| | [項目] | [姓名] | [其他說明] |

---
## 備註

==宣傳相關說明==
* 上學期初系週會為 9/24 (三)

- 講師 Q & A 跟 臨時狀況更改 -> 迷失檔案 (#Rookie Awakening IV)
- 如果有臨時狀況更改，優先詢問 @SheepOfBlock (薯羊)

### _會議紀錄_
* [「Rookie Awakening」會議紀錄 (20260110)](https://hackmd.io/@4by55/rJmKWVkHbg)

### _參考來源_
- [HTML Tutorial](https://www.w3schools.com/html/default.asp)
- [CSS Tutorial](https://www.w3schools.com/css/default.asp)
- [JavaScript Tutorial]()
- [Bootstrap](https://getbootstrap.com/docs/5.3/getting-started/introduction/)
- [Vue.js](https://vuejs.org/guide/introduction.html)
- 陳惠貞. (2023). HTML5、CSS3、JavaScript、jQuery、Vue.Js、RWD網頁設計 (第八版). 碁峰資訊.
- Sarrion, E. (2024). Master Vue.Js in 6 Days : Become a Vue.Js Expert in under a Week. Apress. https://doi.org/https://doi.org/10.1007/979-8-8688-0364-2
- 聚慕課教育研發中心. (2021). 最輕巧前端框架首選：Vue.Js完整專案開發實作 (初版). 深智數位.
- Hsu, K. (2021, August 2). 重新認識 Vue.Js : 008 天絕對看不完的 Vue.Js 3.0 指南. 重新認識 Vue.Js | Kuro Hsu. https://book.vue.tw/