30天做出一個AR網站

html

yuuuun 2025-09-17 23:49:27 ‧ 151 瀏覽

分享至

Day 1 成果報告

主題：環境建置與第一個網頁

一、學習目標

在專案的第一天，主要目標是完成開發環境的建置，並且製作出一個最簡單的 HTML 網頁，作為日後 AR 網頁開發的基礎。具體任務包括：

安裝 Node.js 以便未來管理前端套件與工具。
安裝並設定程式編輯器 VS Code，作為主要開發環境。
註冊 GitHub 帳號，為未來專案版本管理與部署做準備。
建立第一個網頁檔案並成功在瀏覽器中顯示。

二、實際操作步驟

1. 安裝 Node.js

從 Node.js 官方網站下載 LTS 版本並安裝。
安裝完成後，透過終端機輸入以下指令檢查：
```
node -v
npm -v
```
成功顯示版本號碼，代表安裝完成。

2. 安裝 VS Code

從 VS Code 官方網站下載並安裝。
安裝完成後，將顯示語言切換為繁體中文，並安裝以下插件：
- Live Server（用來即時預覽網頁）
- Prettier（自動排版程式碼）

3. 註冊 GitHub 帳號

前往 GitHub 註冊新帳號。
完成信箱驗證與個人資料設定，為日後專案版本管理與部署做準備。

4. 建立第一個網頁

在桌面建立名為 ar-web-project的資料夾，並透過 VS Code 開啟此資料夾。

建立名為 index.html 的檔案，輸入以下內容：

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>我的第一個網頁</title>
</head>
<body>
  <h1>你好，AR 世界！</h1>
  <p>這是我 Day 1 的成果 🎉</p>
</body>
</html>

使用 Live Server 打開後，瀏覽器顯示出正確的標題與文字。

三、成果展示

完成的網頁在瀏覽器中顯示如下：

這代表 HTML 環境設定成功，也驗證了 VS Code 與 Live Server 的正確運作。

四、學習心得

在第一天的學習過程中，我建立了 AR 網頁專案所需的基礎環境。透過安裝 Node.js，我對專案管理有了初步準備；而 VS Code 與插件的使用，讓我的開發效率更高；最後，能夠看到自己撰寫的第一個網頁在瀏覽器中成呈現，給我帶來了實際的成就感。今天的進度為我未來 29 天的 AR 網頁開發奠定了良好基礎。