安裝相關程式 → 下載範本 → 列出功能清單 → 逐一實作

1. 安裝相關程式

VSCode：編輯器

• 下載：https://code.visualstudio.com/download
• 教學：https://code.visualstudio.com/docs/introvideos/basics

Node.js

• 下載：https://nodejs.org/zh-cn/download/package-manager/current
• 教學：目前還不需要學習 Node.js 相關知識，但需安裝此程式來執行範本。

2. 下載範本

• 下載範本並解壓縮：下載連結
• 開啟 VSCode → File → Open Folder → 選擇範本所在的資料夾
  (首次開啟時，會跳出安裝插件提示)
• 開啟 VSCode → Terminal → New Terminal
  1. 輸入 npm install (安裝相關套件，只需在首次開啟時執行)
  2. 輸入 npm run dev
• 開啟瀏覽器 → 輸入網址 http://localhost:5173/

如此開發環境便設定完畢，只要在 VSCode 中修改程式碼，就會看到瀏覽器中的顯示內容也同步刷新。

• HTML：index.html
• CSS：style.css
• JavaScript：main.js

3. 列出功能清單

把想做的 side project 功能列出，以 To Do List 為例：

• 顯示待辦事項
• 新增待辦事項
• 標記為完成
• 標記為未完成
• 排序待辦事項
• 搜尋待辦事項
• 刪除待辦事項
• 還原已刪除待辦事項
• ...

4. 逐一實作

如果已經了解 HTML、CSS、JavaScript 的核心功能：

• HTML：常用的元素（Element）與屬性（Attribute）
• CSS：如何指定元素（Selector）與設定不同樣式
• JavaScript：定義變數與函式、取得與操作 HTML 元素、綁定事件

再搭配文件邊做邊查，應足以實作出基本功能。

• HTML：https://www.w3schools.com/html/
• CSS：https://www.w3schools.com/css/
• JavaScript：https://www.w3schools.com/js/

如果仍不知道從何下手，或是想做複雜一點的功能卡關了，下一篇文章會介紹幾個解決方法。

文章同步發表於部落格中