昨天我們確認了「大學生記帳與消費分析網站」的完整構想與基本的技術藍圖。今天的核心任務是把開發環境架設好,並建立專案的第一個網頁骨架。
今天下載了什麼?
- VS Code (Visual Studio Code):地表最強且免費的程式碼編輯器,用來編寫我們的網頁與後端程式碼。
- Node.js (LTS 長期支援版):前往官方網站下載安裝後,讓我們的電腦具備執行 JavaScript 相關環境與套件的能力。
今日實際做了什麼?
- 建立專案資料夾與 Git 初始化:
• 在電腦中建立一個名為 college-expense-tracker 的專案資料夾。
• 開啟Terminal,輸入 git init 初始化版本控制,為這 30 天的程式碼做好準備。
- 建立專案的第一支網頁檔案:
• 打開 VS Code,在資料夾的最外層根目錄底下新增一個名為 index.html 的檔案。
• 輸入基本的 HTML 網頁結構
- 即時預覽與測試:
• 透過瀏覽器打開 index.html,順利在畫面上看到文字,確認網頁能夠正常運作。

明天我們將進入設計首頁與主控台的部分,準備把記帳網站的介面雛形與輸入表單刻出來。我們明天見!