# 「Frontend Builder」企劃書

:::info
> 課程負責人聯絡資訊：
> 宋安琪 / Email：[e-mail]

- 課程參與講師：
宋安琪
共計 1 人
[name=企劃書撰寫：宋安琪]
:::

> [TOC]
>

---
## 課程資訊
- 課程時間：
[time=2025/9/?~2025/12/?]

- 課程對象：
[name=Project Abyss Rookie]
[name=SIRLA Member]

- 課程預估人數：
[name= 20 人]

- 課程地點：
Discord 冒險者大廳頻道

### _預期目標與主旨_
本課程主要是希望學員能夠掌握基礎的前端開發技能，了解基礎的網站結構與互動功能，並透過專案實作能進一步了解如何製作網站應用。

* 學生預計會學到的內容 :
* 考慮學生的先備知識是無

---
## 課程規劃
### _企劃內容_
==課程內容規劃==
> 講師：宋安琪

| 週次 | 類型 | 課程標題 | 內容 | 備註 |
| ---- | --- | ------- | ---- | ------ |
| 1 | Course | 前端基礎 + HTML | 網站概念、核心技術、瀏覽器解析網頁 + HTML語法 | 開發工具：VScode。60 min |
| 1 | Lab | 建立網頁 | 建立具備最基本結構的網頁 | 20 min |
| 1 | Lab | 資訊搜尋 | 使用開發人員工具觀察 | 20 min |
| 1 | Lab | 標籤使用 | 練習 HTML 標籤 | 20 min |
| 2 | Course | CSS | 10/20 CSS 語法、選擇器、排版與樣式設定 | 開發工具：VScode。 |
| 2 | Lab | CSS 選擇器 | 使用選擇器抓取元素、顯示屬性調整（色彩、字型、位置） | |
| 2 | Lab | 頁面排版 | 修改頁面樣式、Box Model | |
| 2 | Lab | CSS 視覺特效 | 修改漸變屬性、transform 函式 | |
| 3 | Course | JavaScript 基礎| 變數、資料型別、運算子、控制流程、陣列、物件的基本操作、函式 | 開發工具：VScode、Node.js。 |
| 3 | Lab | 閏年判斷 | 條件與計算 | |
| 3 | Lab | 天數計算 | 條件與函式使用 | |
| 3 | Lab | JSON 處理 | JSON 結構資料處理 | |
| 4 | Course | JavaScript 進階 | DOM 操作、事件處理、API、AJAX | 開發工具：VScode。 |
| 4 | Lab | DOM 操作 | 網頁操作方法 | |
| 4 | Lab | 事件處理 | 網頁事件操作 | |
| 4 | Lab | API 資料抓取 | 抓取天氣、地圖資訊 | |
| 5 | Course | Bootstrap | 排版、JavaScript 互動元件 | 開發工具：VScode。 |
| 5 | Lab | Forms | 表單組件設定 | |
| 5 | Lab | Navbar | 導覽列 | |
| 5 | Lab | 互動式 UI | Modal | |
| 6 | Course | Vue.js 基礎 | Vue 的基本概念和工作原理、模板語法、指令、事件處理和資料綁定 | 開發工具：VScode。 |
| 6 | Lab | 天氣查詢器 | 條件綁定 | |
| 6 | Lab | 景點推薦 | 插值綁定、事件綁定 | |
| 6 | Lab | 行程列表 | 插值綁定、屬性綁定、事件綁定 | |
| 7 | Course | Vue.js 進階 | Composition API 和組件通信 | 開發工具：VScode、Node.js。 |
| 7 | Lab | Options API Todolist | 練習 Vue 指令 | |
| 7 | Lab | Composition API Todolist | 練習 Compostion API 寫法 | |
| 7 | Lab | Componented-based Todolist | 將應用拆成元件寫法 | |
| 8 | Course | Vue.js 高階 | 路由管理、狀態管理和使用外部 API | 開發工具：VScode、Node.js。 |
| 8 | Lab | 多頁切換 | Router | |
| 8 | Lab | 行程資料管理 | 狀態管理（Vuex / Pinia）、異步請求（API串接） | |
| 8 | Lab | Vue 與地圖整合 | 整合 Google Maps API / Leaflet | |
| 9 | Course | 旅遊規劃應用 I | 地圖 API、路線規劃 | 開發工具：VScode、Node.js。 |
| 9 | Lab | 地點標記 | 使用地圖 API | |
| 9 | Lab | 路線規劃 | 距離與時間 | |
| 9 | Lab | API 整合 | 獲取即時路線、交通資訊 | |

<details>
<summary>Optional Course</summary>
| 6 | Course | JavaScript 高階應用 | OOP、ES6+、渲染與動畫、jQuery | Optional |
| 6 | Lab | 計時器 | 行程倒數計時器 | Optional |
| 6 | Lab | 篩選 | 地點篩選與行程分類 | Optional |
| 6 | Lab | 動畫 | 行程路線視覺化 | Optional |
| 7 | Course | Node.js | 簡介 Node.js+Express、解釋前端與後端的互動、Postman | Optional |
| 7 | Lab | 建立 HTTP server | 處理請求和回應 | Optional |
| 7 | Lab | AJAX | 與後端互動 | Optional |
| 7 | Lab | 表單儲存 | 用 POST 將表單資料儲存至後端 | Optional |
| 10 | Course | Vue.js 高階 | 路由管理、狀態管理和使用外部 API | Optional |
| 10 | Lab | 多頁切換 | Router | Optional |
| 10 | Lab | 行程資料管理 | 狀態管理（Vuex / Pinia）、異步請求（API串接） | Optional |
| 10 | Lab | Vue 與地圖整合 | 整合 Google Maps API / Leaflet | Optional |
| 12 | Course | 旅遊規劃應用 II | 行程規劃、拖曳功能 | |
| 12 | Lab | 新增區塊 | 綁定與管理行程數據 | |
| 12 | Lab | 板塊拖曳 | 拖放排序、時間調整 | |
| 12 | Lab | API 整合 | 儲存與讀取行程 | |
| 12 | Lab | 顯示行程地點 | 與地圖整合 | |
</details>

==宣傳相關說明==

### _企劃時程_

| 日期 | 企劃項目 | 負責人 | 備註 |
| --- | --- | ------- | ----- |
| 03/1~3/15 | 課程提案 | 宋安琪 | |
| 03/15 ~ 5/31 | 筆記撰寫 | 宋安琪 | |
| 04/05 ~ 6/28 | 簡報製作 | 宋安琪 | |
| 8/1 ~ 9/26 | Rehearsal | |
| 10/13 | 開始上課 | 宋安琪 |

| 日期 | 週次 | 主題 | 備註 |
| --- | --- | --- | --- |
| 10/13 | w1 | 前端基礎 + HTML | [簡報](https://docs.google.com/presentation/d/1JAa5Anfnll7jkB10puVFS3nh6kOYuF77Q_9_L2sT4j8/edit?usp=sharing)、[筆記](https://recondite-cartwheel-d1e.notion.site/W1-HTML-1c55417e7ad18084bbe0f6bdfe1b87b7) |
| 10/20 | w2 | CSS | [簡報](https://docs.google.com/presentation/d/1iAzswqCrDFSKXoLt_HxBz0E_VCrG8hnHLv0iTa93IuY/edit?usp=sharing)、[筆記](https://recondite-cartwheel-d1e.notion.site/W2-CSS-1dd5417e7ad18099be69ddf09e8c6cc9) |
| 10/27 | w3 | JS 基礎 | [簡報](https://docs.google.com/presentation/d/1WnLnldKKMrDHvw3CkDRjQ7gRiR0L5SPUf1FzGzYHlUM/edit?usp=sharing)、[筆記](https://recondite-cartwheel-d1e.notion.site/W3-JavaScript-1dd5417e7ad1804b9fc3c676ca5e534d) |
| 11/03 | - | - | 期中考週 |
| 11/10 | w4 | JS 進階 | [簡報](https://docs.google.com/presentation/d/1p-xMj3M4V-n8NmQBfC8mMROq46fsSbLuRksJH9o4xYc/edit?usp=sharing)、[筆記](https://recondite-cartwheel-d1e.notion.site/W4-JavaScript-1dd5417e7ad18084af5efb2c16cfdaf4) |
| 11/17 | w5 | Bootstrap |[簡報](https://docs.google.com/presentation/d/1lzBROioU87coF379S9TMPNxI94I4WwgQ8SaBhjGnvuM/edit?usp=sharing)、[筆記](https://recondite-cartwheel-d1e.notion.site/W5-Bootstrap-1dd5417e7ad180cc82a2ce159d685ccb) |
| 11/24 | w6 | Vue.js 基礎 |[簡報](https://docs.google.com/presentation/d/1wgPmoGDT1ZEpCDPhGZ-VFyLgcI15NZblrMBQh181CHY/edit?usp=sharing)、[筆記](https://recondite-cartwheel-d1e.notion.site/W6-Vue-js-1dd5417e7ad18044baa2ce93ec32844f) |
| 12/01 | w7 | Vue.js 進階 |[簡報](https://docs.google.com/presentation/d/1Ni9PF8-Cf9zc03T02AfFAPNmy3uqG501BUFhNtTnslo/edit?usp=sharing)、[筆記](https://recondite-cartwheel-d1e.notion.site/W7-Vue-js-1dd5417e7ad180efbfa9cc38b4f90cd3) |
| 12/08 | w8 | 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) |
| 12/15 | - | - | 校慶補假 |
| 12/22 | w9 | 旅遊規劃應用 |[簡報](https://docs.google.com/presentation/d/1KDCsk9Gx4pgkJkS6Uy16XBCkXqFypcVQUA7aB7QsS6I/edit?usp=sharing)、[筆記](https://recondite-cartwheel-d1e.notion.site/W9-1dd5417e7ad180ad8245c2f035bbebf1) |

---
## 備註
### _會議紀錄_
- 3/15
- 專注主題的內容(勿發散 lab)
- lab 要考慮最終做的應用去設計
- 學生會學到什麼 in 這堂課
- 學生的先備知識預估
- 標註開發工具
- 把每一堂課的教學串起來

### _參考來源_
- [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/