---
# System prepended metadata

title: 「Frontend Builder」企劃書
tags: ['2025', proposal, course, Rookie Awakening]

---

# 「Frontend Builder」企劃書

:::info
> 課程負責人聯絡資訊：
> 宋安琪 / Email：angel112136465969@gmail.com

- 課程參與講師：
    宋安琪
    共計 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/