零基礎做第一個網站：從一頁需求到上線使用

選自己能判斷對錯的小專案

可以從活動頁、作品頁或報價計算器開始。先不儲存個人資料，會少一些帳號與資料處理問題。

以下用虛構報價計算器示範：輸入數量、單價和運費，顯示總額。只在瀏覽器計算，不收款、不保存訂單。

把這段交給 AI，再依自己的情境修改：

做一個繁體中文報價計算器，讓我估算費用。放數量、單價、運費三個欄位，以及計算按鈕和總額。公式為數量 × 單價 + 運費。數量必須是正整數；單價和運費不得為負。輸入不完整時指出缺哪一項。先做手機和電腦都能開啟的頁面，不加登入、付款和資料庫。請先重述需求、列待確認問題，再開始改檔案。

另外存好需求。想加功能時先補進去，方便判斷是否完成。可以用專案任務範本。

選能正常使用、能操作專案檔案的 AI 程式工具，照當前官方說明建立或開啟專案。先確認版面與欄位，再加計算功能。

請 AI 說明專案怎麼啟動、入口檔案在哪、下次怎麼開。自己執行一次並存好說明。每完成一個能用的功能，就保留版本；使用 Git 時，也請它說明這次保存了哪些變更。

在手機寬度下試輸入、點擊和查看結果。改過計算邏輯，再測同一組例子。如果新改動出問題，先保留錯誤資訊，再找回上一版。

讓 AI 依實際專案列出合適的託管方式、帳號、費用與發布步驟。簡單頁面可從靜態託管開始。網域是否另購、使用地區有沒有註冊或備案要求，須按所選服務核實。

發布後，用新的瀏覽器視窗開網址，再測上面的例子。檢查手機顯示、連結和重新整理，保留可用版本，也弄清更新失敗怎麼復原。依上線前檢查清單選取適合的項目。

請實際會用的人試試，記錄卡住或看不懂的地方。先修最影響使用的問題，再考慮保存報價、匯出或帳號。每加一項功能，就補對應檢查例子。

卡住時，帶上需求、重現步驟、完整錯誤與目前版本求助，才能直接討論問題。也可先免費聊 15 分鐘，確認一對一教學是否適合；預約時請確認溝通語言與時間。

要先學 HTML、CSS 和 JavaScript 嗎？

可以邊做邊學。先理解它們大致負責內容、外觀與互動，再配合自己的專案看修改了什麼。不必學完全部語法才開始。

第一個網站選什麼？

活動介紹、作品展示，或只在瀏覽器計算的報價工具都可以。先用虛構資料，把輸入、操作和結果做清楚，再考慮登入、付款或資料儲存。

上線一定要買伺服器嗎？

簡單靜態頁面可用靜態託管。需要後端、資料庫或特定執行環境，再依專案選服務，確認費用和存取條件。

多久可以完成？

先決定功能與工具條件，再安排時間。帳號、資料庫、付款與外部介面都會增加開發和檢查工作，本路線不保證固定完成時間。