完結篇！我的第一個網站誕生了(Day 30)

2025 iThome 鐵人賽

DAY 30

佛心分享-IT 人自學之術

30 天體驗：從程式菜鳥到前端新手工程師系列第 30 篇

17th鐵人賽

tingisgood

2025-10-14 22:04:58

28 瀏覽

分享至

恭喜你！

你真的完成了整整 30 天的前端入門學習
從一開始的 HTML 架構，到 CSS 美化，再到 JavaScript 互動、Tailwind 快速開發，
最後還親手部署到 GitHub Pages，讓網站正式上線！

這不是簡單的事，
你從「零」開始，靠著每天一小步，
完成了許多人卡關數月甚至放棄的目標。
給自己一個超大的掌聲吧！

這 30 天你學會了什麼？
HTML：網站的骨架

認識標籤（< h1 >、< p >、< u l>...）
學會結構化內容（header、main、footer）
建立第一個「我的名片」網頁

CSS：網站的外觀

改變顏色、字型、排版、間距
使用 Flexbox、Grid 排版
RWD 響應式設計
做出按鈕、卡片、動畫、過渡效果

JavaScript：網站的靈魂

使用變數、條件、迴圈、函式
綁定事件（click、input、mouseover）
操作 DOM 改變畫面
製作待辦清單、互動按鈕、主題切換

Tailwind CSS：現代化開發

使用 CDN 快速導入
實作 Utility Class 開發風格
讓待辦清單變成現代 UI
學會 dark mode / hover 效果

GitHub Pages：讓網站上線

建立 Repository
上傳專案
設定 Pages → main / root
成功發布屬於自己的第一個網站！

成果展示

現在，你擁有一個能實際運作、可上網瀏覽的網站作品：
👉 https://你的帳號.github.io/專案名稱/
這代表你已經不只是「會寫程式」，
而是完成了整個「網站製作流程」：
規劃 → 設計 → 撰寫 → 美化 → 部署
一氣呵成！

小任務：「畢業證明頁」挑戰

做一個屬於你的「畢業網頁」吧

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>🎓 我完成了 30 天前端挑戰！</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Tailwind CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-gradient-to-b from-blue-50 to-white text-gray-800 font-sans min-h-screen flex flex-col items-center justify-center p-6">

  <!-- 卡片 -->
  <div class="bg-white shadow-xl rounded-2xl p-8 max-w-lg text-center">
    <h1 class="text-3xl font-bold text-blue-600 mb-3">🎉 我完成了 30 天前端挑戰！</h1>
    <p class="text-gray-600 leading-relaxed mb-4">
      從 <strong>HTML</strong> 到 <strong>CSS</strong>，<br>
      從 <strong>JavaScript</strong> 到 <strong>Tailwind</strong>，<br>
      我成功打造了自己的第一個網站 🚀
    </p>

    <div class="border-t border-gray-200 my-4"></div>

    <p class="text-gray-700 mb-6">
      這 30 天，我學會了不只是語法，<br>
      更學會了堅持、邏輯與創造力。<br>
      未來我會持續學習，讓作品越來越棒！💪
    </p>

    <a href="https://github.com/你的帳號" 
       target="_blank" 
       class="inline-block bg-blue-500 text-white px-6 py-2 rounded-lg shadow hover:bg-blue-600 transition">
      查看我的 GitHub
    </a>

    <div class="mt-6">
      <p class="text-sm text-gray-400">by Ting × 30 Days Frontend Challenge</p>
    </div>
  </div>

  <!-- 浮動動畫 -->
  <div class="absolute bottom-5 text-sm text-gray-500 animate-bounce">🌟 持續學習，讓網頁更有生命力！</div>

</body>
</html>