2025年6月26日

30 天體驗軟體工程師生活！從小白到做出完整個人網站的學習紀錄

如果給你 30 天的時間，你能做出一個完整的個人品牌網站嗎？一個月前的我可能會說「不可能！絕對不可能！」，但現在我手上就有一個實實在在的作品。這次參加六角學院的「30 天軟體工程師體驗營」，從零開始學習，到最後做出一個具備部落格系統、數據分析和電子報訂閱的完整網站。今天就來分享這 30 天的學習之旅吧！

為什麼報名體驗營？我的三個動機

報名前其實猶豫了一陣子，市面上程式課程這麼多，到底為什麼選這個？後來促使我按下報名鍵，主要有三個原因：

1. 累積作品集，順便玩玩新技術
雖然已經在寫程式了，但總覺得作品集看起來有點空。體驗營提供香香的設計稿和明確的目標，剛好可以利用這個機會快速做出一個拿得出手的作品。而且體驗營涵蓋的技術範圍蠻廣的，正好可以試試一些平常工作上不一定會用到的東西。

2. 想做一個真正能用的作品
我不想只是跟著教學做一些範例，而是希望能做出一個真正能上線、能給別人看的作品。體驗營強調「實戰導向」，最後要交出一個完整的個人品牌網站，這正是我要的。

3. CP 值超高
60+ 小時的影音課程、5 堂直播課、無限次的助教批改，還有完整的 UI 設計稿，這些加起來居然只要 NT$ 822（基本系統營運費）。算一算，這比外面隨便一堂課都便宜太多了。

我的作品：一個完整的個人品牌網站

先來看看成果吧！這是我在體驗營最後完成的個人品牌網站：

🌐 網站首頁：https://hex2025-mission2.vercel.app/
📝 部落格系統：https://hex2025-mission2.vercel.app/blog
💻 原始碼：https://github.com/happyloa/Hex2025-mission2

這個網站包含了什麼功能呢？

🎯 網站功能一覽

首頁設計

個人簡介與專業定位展示
四種服務方案介紹（履歷健檢、線上諮詢、網頁開發、企業內訓）
部落格文章精選
成功案例展示
Mailchimp 電子報訂閱表單
聯絡表單

部落格系統

使用 Nuxt Content 管理，可以用 Markdown 寫文章
文章列表與單篇文章頁面
完整的 RWD 響應式設計
文章分類與標籤系統

數據追蹤

Google Analytics 分析訪客行為
Microsoft Clarity 記錄使用者互動

🛠️ 技術選擇：挑戰自己的決定

課程本身教的是 HTML + CSS，著重於 Flexbox 排版技巧，這對新手來說是非常紮實的基礎訓練。但我想給自己一點挑戰，所以選擇了：

Nuxt 4.2：Vue 的超級加強版，有更好的 SEO 支援
Tailwind CSS：寫起來超快的 Utility-First CSS 框架
Nuxt Content：讓我可以用 Markdown 寫部落格
Nuxt AOS：做滾動動畫的套件

這個決定有利有弊。好處是學到更貼近業界實務的技術；壞處是遇到問題時不能直接問老師（因為老師教的是不同的技術），只能靠自己 Google。不過解決問題的過程本身就是學習，所以算值得。

30 天的學習節奏：每週都在進步

這個體驗營的課程設計很有節奏感，每週都有一個明確的主題，搭配作業讓你實際動手做。

📅 Week 0：開學典禮（4/23）

開學典禮那天看到線上有很多同學，大家目的都不太一樣——有人想轉職、有人想創業、有人就是對寫程式有興趣。老師分享了一個學習心法：「不要害怕問問題，新手最強的武器就是提問的勇氣。」

📅 Week 1：開發環境設置（4/30）

第一週的主題是「打造最強前端開發環境」。老師介紹了很多 VS Code 套件，像是 Live Server、Prettier、Emmet 等等。一個好的開發環境，學習效率差很多。

📅 Week 2：Flexbox 排版（5/7）

這週終於要開始寫網頁了！主題是 Flexbox 多欄式排版。說真的，一開始看到 justify-content、align-items 這些屬性時，我完全搞不清楚差異。但跟著老師的直播實作了幾個案例後，突然就開竅了。原來 Flexbox 這麼強大，以前那些用 float 做得很醜的排版，用 Flex 幾行就搞定了。

📅 Week 3：RWD 響應式設計（5/14）

現在大家都用手機上網，如果你的網站在手機上看起來很爛，那基本上就沒人要看了。這週學習 RWD（Responsive Web Design），重點是 Media Queries 的用法。我學到了如何規劃斷點（Breakpoint），讓網站在不同裝置上都能有良好的呈現。

📅 Week 4：網頁動畫（5/21）

這週超有成就感！學習用 CSS3 和 JavaScript 做網頁動畫。我在我的專案裡加了 AOS（Animate On Scroll）滾動動畫，讓整個網站看起來生動很多。當我看到元素隨著滾動慢慢出現的效果時，真的覺得「哇，我居然做得出來這種效果！」

📅 Week 5：整合與部署（5/28）

最後一週是整合週，要把前面學到的東西全部串在一起。這週學到了很多實戰技巧：

如何把網站部署到 Vercel 上線
如何串接 Mailchimp 收集電子報訂閱
如何設置 Google Analytics 和 Microsoft Clarity 追蹤數據
如何檢查網站在不同瀏覽器的相容性

印象最深刻的三個學習時刻

💡 時刻一：第一次把網站部署上線

第一次把網站部署到 Vercel 上線時，我盯著瀏覽器網址列看了很久。雖然只是一個簡單的頁面，但那種感覺很奇妙，從此之後學習就更有動力了。

💡 搞懂元件化開發的邏輯

以前看到「元件化」這個詞總是似懂非懂，等到實際用 Nuxt 拆分元件時才理解。原來把一個大頁面拆成很多小元件，不只是為了程式碼好看，更重要的是可以重複使用。比如做了一個卡片元件，之後在不同地方都可以用，改起來也只要改一個地方就好。

💡 時刻三：第一次成功串接 API

雖然課程主要是前端，但也有教一些後端的概念。當我成功用 JavaScript 呼叫 Mailchimp 的 API，讓訂閱表單真的能收集名單時，突然理解了前後端是怎麼溝通的。

獲得結業證書：一個里程碑

經過一個多月的努力，很開心拿到了六角學院頒發的結業證書！這張證書不只是一個獎勵，更是對自己學習成果的肯定。

六角學院 30 天軟體工程師體驗營結業證書

拿到證書的那一刻，我想起開學典禮時老師說的話：「證書不是終點，而是起點。」確實，這 30 天只是打開了一扇門，真正的學習之路才剛開始。

我學到的不只是技術

參加完這個體驗營，我覺得收穫最大的不只是技術本身，還有一些更重要的東西。

🎯 學會拆解問題

以前看到一個大專案，我會覺得「天啊這怎麼做得出來」，現在我會先想「這個專案可以拆成哪些小部分」。學會拆解問題後，再複雜的任務都能一步一步完成。

🎯 培養解決問題的能力

寫程式一定會遇到 bug，這是無法避免的。重要的是遇到問題時不要慌，要系統性地找出問題所在。我學會了善用開發者工具、閱讀錯誤訊息、Google 搜尋解法，這些技能比記住語法還重要。

🎯 建立學習的自信

最大的收穫是建立了「我也做得到」的信心。從程式小白到能做出一個完整的網站並部署上線，這個過程讓我相信：只要願意學，沒有什麼是做不到的。

🎯 在社群中成長，體驗教學相長的喜悅

這次體驗營讓我印象深刻的，還有 Discord 社群裡的互動。剛開始我只是潛水，看大家討論問題、分享心得。但漸漸地，我發現自己也能回答一些問題，幫到遇到困難的同學。

每次幫同學解決問題時，其實還滿開心的。有時候是幫同學 debug，有時候是分享自己踩過的坑，有時候只是給予一些鼓勵。當你試著向別人解釋一個概念時，會發現自己對這個知識理解得更深了。

而且在幫助別人的過程中，我也接觸到很多不同的解題思路。這種交流和互動，是光看課程影片無法獲得的。

給想參加的人一些建議

如果你也在考慮要不要參加這個體驗營，以下是我的一些建議：

✅ 適合這些人

完全新手：課程從零開始教，不需要任何基礎
想轉職的人：能快速了解工程師的工作內容，判斷這條路適不適合自己
想做個人品牌的人：學完就能做出自己的個人網站
想驗證學習能力的人：透過 30 天的密集學習，測試自己是否適合這種學習模式

⚠️ 需要注意的事

時間投入：每週至少要花 10-15 小時，包括看影音課程、寫作業、複習等
主動學習：老師會教核心觀念，但要真正學會需要自己多練習
遇到挫折很正常：寫程式一定會卡關，重點是不要放棄
善用社群資源：Discord 社群裡有很多同學和助教，遇到問題一定要問

接下來我想學什麼？

完成體驗營只是一個開始，我已經規劃好接下來的學習方向：

深入 Vue 生態系：學習 Pinia 狀態管理、Vue Router 進階應用
TypeScript：讓程式碼更安全、更好維護
後端開發：深入學習 Node.js、Express，了解 API 設計
資料庫操作：學習 SQL 和 NoSQL 資料庫
測試：學習單元測試、整合測試，寫出更穩健的程式碼

這 30 天值得嗎？絕對值得！

如果問我這 30 天值不值得，我的答案是：絕對值得！

NT$ 822 的投資，換來的是 60+ 小時的系統化課程、5 堂直播課、一個完整的作品，以及無價的學習經驗。更重要的是，我找到了學習程式的方法，也建立了繼續學習的自信。

對於還在觀望的人，我想說：30 天不長，但足以讓你知道自己適不適合走這條路。 如果發現不適合，至少你嘗試過了；如果發現適合，那就找到了一個值得投入的方向。

感謝六角學院的洧杰老師和助教團隊，也謝謝一起學習的同學們，在 Discord 上的交流讓我學到很多。

如果你看完這篇文章也想試試看，歡迎到我的 GitHub 看看專案原始碼，或是直接 clone 下來玩玩看這個網站。有任何問題都歡迎交流討論！