CHAPTER 01 網站開發的觀念與技術

1-1 網站開發的基礎觀念

1-1-1 網站及網頁

1-1-2 網頁開發的前端與後端

1-1-3 網址的組成

1-2 網站建置流程與技術

1-2-1 擬定網站主題

1-2-2 規劃網站架構與內容

1-2-3 製作網頁工具

1-2-4 上傳雲端

1-3 網頁介面原型建構工具

1-3-1 網站原型架構

1-3-2 介面線框與原型工具

1-3-3 實作網頁介面原型



CHAPTER 02 HTML與CSS基礎

2-1 學習HTML前的準備工作

2-1-1 建立HTML文件

2-1-2 自動生成HTML5架構程式碼

2-2 HTML語法概念與架構

2-2-1 HTML的標記型態

2-2-2 HTML的組成

2-2-3 標記屬性的運用

2-3 HTML5文件結構與語意標記

2-3-1 語意化的HTML標記

2-3-2 HTML5宣告與編碼設定

2-4 認識CSS基本架構

2-4-1 使用CSS樣式表

2-4-2 CSS基本格式

2-4-3 認識CSS選擇器

2-4-4 CSS的度量單位

2-4-5 CSS的顏色表示法



CHAPTER 03 HTML常用標記

3-1 排版相關標記

3-1-1 瀏覽器呈現網頁的過程

3-1-2 標題標記

3-1-3 段落及換行標記

3-2 項目列表清單

3-2-1 有序列表

3-2-2 無序列表清單

3-2-3 定義列表

3-3 表格與表單

3-3-1 表格

3-3-2 表單

3-3-3 表單元件

3-4 插入圖片與超連結

3-4-1 插入圖片

3-4-2 超連結

3-4-3 內置框架（iframe）

3-5 div標記與span標記

3-5-1 認識div標記

3-5-2 認識span標記

3-5-3 替程式碼加上註解

3-5-4 使用特殊符號及Emoji字符集



CHAPTER 04 CSS常用語法

4-1 文字與段落樣式

4-1-1 文字樣式

4-1-2 文字段落樣式

4-1-3 邊框

4-1-4 文繞圖

4-2 掌握CSS定位

4-2-1 網頁元件的定位（position）

4-2-2 立體網頁的定位

4-2-3 好用的calc()函式



CHAPTER 05 CSS Flexbox響應式排版

5-1 Flexbox模型概念

5-1-1 認識CSS盒子模型（Box Model）

5-1-2 認識Flexbox彈性盒子

5-2 Flexbox屬性

5-2-1 fl?ex container屬性

5-2-2 ?flex Items屬性



CHAPTER 06 善用網路資源

6-1 圖庫素材分享平台

6-1-1 認識創用CC授權

6-1-2 搜尋CC授權素材

6-1-3 Icon nder-icon圖庫

6-1-4 替網站加入Logo小圖示

6-2 實用的網頁應用產生器

6-2-1 CSS Layout產生器

6-2-2 按鈕產生器

6-2-3 網站配色



CHAPTER 07 整合練習—詩詞展示網頁設計與實作

7-1 網頁架構說明

7-1-1 網頁架構圖

7-1-2 選擇合適的HTML標記

7-2 建立HTML與CSS程式碼

7-2-1 建立網頁架構的HTML語法

7-2-2 加入超連結

7-2-3 加入CSS語法

7-2-4 加入偽元素

7-2-5 利用Icon Fonts產生社群圖示



CHAPTER 08 JavaScript基礎

8-1 認識JavaScript

8-1-1 JavaScript基本觀念

8-1-2 JavaScript運行環境

8-1-3 瀏覽器主控台console

8-1-4 JavaScript語法架構

8-2 JavaScript基礎語法

8-2-1 JavaScript語法架構

8-2-2 JavaScript註解符號

8-2-3 資料型別（Data Type）

8-3 變數宣告與作用範圍

8-3-1 全域變數與區域變數

8-3-2 使用var關鍵字宣告變數

8-3-3 var宣告的作用域

8-3-4 使用Let關鍵字宣告變數

8-3-5 使用const關鍵字宣告常數

8-3-6 變數名稱的限制



CHAPTER 09 函式與作用域

9-1 自訂函式

9-1-1 函式的定義與呼叫

9-1-2 函式參數

9-1-3 函式回傳值

9-2 函式的多重用法

9-2-1 函式宣告式（Function Declaration）

9-2-2 函式表達式（Function Expressions）

9-2-3 物件與this關鍵字

9-2-4 立即執行函式（IIFE）



CHAPTER 10 JavaScript操控DOM元素

10-1 DOM物件的方法與屬性

10-1-1 取得物件資訊

10-1-2 處理物件節點

10-1-3 屬性的讀取與設定

10-2 DOM物件的操作

10-2-1 Window物件

10-2-2 DOM集合（Collection）

10-3 DOM風格樣式

10-3-1 查詢元素樣式

10-3-2 設定元件樣式



CHAPTER 11 前端資料儲存

11-1 認識Web Storage

11-1-1 Web Storage概念

11-1-2 偵測瀏覽器是否支援Web Storage

11-2 localStorage及sessionStorage

11-2-1 存取localStorage

11-2-2 刪除localStorage

11-2-3 存取sessionStorage

11-3 IndexedDB資料庫

11-3-1 IndexedDB重要概念

11-3-2 IndexedDB基本操作

11-3-3 讀取資料

11-3-4 刪除資料

11-3-5 清空資料



CHAPTER 12 整合練習—個人通訊錄實作

12-1 網頁架構說明

12-1-1 網頁功能架構圖及線框圖

12-1-2 CSS Image Sprites

12-2 IndexedDB的CURD

12-2-1 建置資料庫物件及開啟交易

12-2-2 設定事件的處理函式

12-2-3 新增會員與新增完成

12-2-4 動態產生資料列表

12-2-5 修改與刪除單筆資料

12-2-6 清空資料與刪除資料庫

12-2-7 阻止事件傳遞與預設行為



CHAPTER 13 響應式網頁框架—Bootstrap

13-1 認識Bootstrap

13-1-1 為什麼要使用Bootstrap

13-1-2 下載Bootstrap

13-1-3 RWD的設計理念

13-2 Bootstrap排版

13-2-1 斷點（Breakpoint）與容器（Container）

13-2-2 了解Grid System

13-2-3 Viewport與Media queries

13-3 Bootstrap的樣式

13-3-1 Bootstrap通用顏色

13-3-2 Bootstrap間距

13-3-3 Bootstrap寬度與高度

13-3-4 Bootstrap文字

13-4 圖片與表格

13-4-1 響應式圖片

13-4-2 邊框圓角

13-4-3 建立Bootstrap表格



CHAPTER 14 Bootstrap擴充元件庫

14-1 導覽與選單

14-1-1 導覽列（Navigation Bar）

14-2 表單與按鈕

14-2-1 表單控制元件

14-2-2 表單排版

14-3 輪播元件（Carousel）

14-3-1 基本的輪播效果

14-3-2 利用JavaScript控制輪播



CHAPTER 15 PWA實作—我的記帳本Web App

15-1 實作「我的記帳本」網頁

15-1-1 「我的記帳本」網頁功能與介面

15-1-2 下拉式選單

15-1-3 按鈕群組

15-1-4 互動視窗

15-1-5 IndexedDB關鍵字查詢

15-1-6 善用Bootstrap Icons製作小圖示

15-2 將網頁轉換成PWA

15-2-1 什麼是PWA

15-2-2 製作各種尺寸的App圖示按鈕

15-2-3 將網頁變成PWA



CHAPTER 16 善用ChatGPT 寫 JavaScript 程式

16-1 AI人工智慧聊天機器人

16-1-1 認識ChatGPT

16-1-2 認識聊天機器人

16-1-3 聊天機器人的種類

16-2 ChatGPT初體驗

16-2-1 寫在使用ChatGPT之前

16-2-2 註冊免費ChatGPT帳號

16-2-3 與ChatGPT文字對談

16-2-4 開啟新的對話與登出ChatGPT

16-3 使用ChatGPT寫JavaScript程式

16-3-1 利用ChatGPT AI撰寫JavaScript程式

16-3-2 複製ChatGPT寫的程式碼

16-4 ChatGPT AI JavaScript程式範例集

16-4-1 實作基本的計算機

16-4-2 模擬大樂透的開獎程式

16-4-3 實作具有時針、分針、秒針的時鐘

16-4-4 製作電子簽名板

16-4-5 實作簡單的貪吃蛇遊戲

16-5 課堂上學不到的ChatGPT使用秘訣

16-5-1 善用ChatGPT指令大全

16-5-2 GPT-3.5與GPT-4