整個Project & 心得

前言

這裡完整記錄了每一件事情發生的過程和苦難，如果有心你可以看完。這篇蠻長的，先警告。

---

正文

起因

起因是這樣的: 我希望留下些什麼，但是又不是單純的寫信，那可老套了。身為一個資訊工程學系的學生，一定可以搞出些什麼。

腦中有一些想法蹦出來，例如寫一個程式可以搞出一些彈出視窗什麼的，但是我覺得我寫不出來，另外考慮到只有電腦能用，在一個大家人人一台手機的狀況下，我想到了一個好的點子—架一個網站，上面放滿了我們的照片，還有我想對你們說的話。

於是，4/28晚上，我著手開始這個龐大的project，不奢求他好(但還是希望做好)，只求真誠，畢竟也是第一次架網站。

學習

當然，沒有架過網站，其中一個原因一定是因為沒有學過相關的東西。不敢求速成，但是又希望儘早學完，我就找到了大概4小時的網頁基礎課程，開始學。

過程中遇到了一些困難。例如我搞最久的是float定位，雖然我還是沒搞懂，因為我也沒用過，但是我搞懂了，我覺得我還蠻適合架網站的。

萬事起頭難

架網站，除了Code，另一部分是考驗美感。如同畫家一樣，當你預覽你架的網站時，然後啥都沒有，然後又想到他不只是平面設計，同時還要寫Code，那會有多崩潰。當時第一次打開的時候，那些想法直接破滅，腦袋一片空白，不如跑去打遊戲。這太糟了。

我一開始只有搞出這些東西。

更糟的是，四小時的課程根本無法滿足我的要求。這四小時的課程裡面真的太基礎，導致我連用一行指令就能打出來的圓我也不會寫。再說更白一點，以國文比喻，這就像是我學完了國字直接跳文言文；以數學比喻，這就像是我學完了四則運算就要跳到乘法公式。這太跳了，根本不會，只好狂問GPT。

其實我看到一片白的時候，我沒心態了。於是我就有一點開始擺爛，但是我又在想怎麼配色和怎麼安排整個網站，我甚至還有看到一個網站，是幫你選色系的，但是我用了，我仍然沒想法。直到我某天看到這部影片的時候我好像知道了怎麼配色，於是我就照抄。對不起。

讓我對配色有靈感的short

所以，就是這樣，我好像學會了配色，對於整個色系有點靈感，但是我不知道可以加啥。

網站的其他部分

除了原本的一點點想法，我只有想到要寫一點東西，然後就沒想法了。最上面的那個照片欄，是我在YT上看到，才想到喔對欸可以放照片(提個外話，找照片的時候，有一種哇嗚，我們高中三年，經歷了那麼多，就這麼突然就要結束的感覺。心理還是有些懷念)；然後我的最下面的Header和Footer(頁頭和頁底)，是我在YT和其他人的網頁上看到可以這樣放；只有中間那個欄，才是我自己想到的。喔對，輸入欄位也是我自己想到的(雖然說被我拔掉了但我自己的檔案有留著)。

但是，想到歸想到，做出來真的很困難。這些難點還是我對這個的運作沒概念，也不知道語法，所以根本做不出來(當然，YT上看到的都是影片教學，所以做的出來)。做不出來的又是狂問GPT，謝謝GPT。

另外，GPT也是幫我想一點裝飾，像是中間漸層文字框上下的波浪也是他幫我想的。好結局，我順利弄好整個架構，但是他還是花我很多時間。網站的每一部分，都要花我一到兩天做，例如我的頁首就花了我兩天，中間的滑動照片欄就花了我一天，在下面一點的文字欄花了我一兩天等等，所以其實架起來就花了我很多時間。

總而言之，發想這個很困難，因為你不知道別人需要啥。然後又因為我菜，所以又花了我好一大段時間。

移動端(手機、平板)的適配

之所以需要適配，是因為自己從零開始架網站的話，他不是像是一個模版，這個丟進來那個丟進來然後在不同的手機下可以自由的調整大小。也因為他不能自由調整，只能透過寬度、長度、位置這些參數讓他動態填滿手機畫面，所以這部分我真的做了很久。

起初我以為一切安好，並沒有，他狀態很糟，用F12的預覽模式看，沒有一個物件是有對齊手機的右邊，而且字體有待調整，最下面的Code輸入欄位的按鈕和輸入欄也重疊了，如同下面那樣(實際狀況比那張還糟糕，我沒截圖，因為太糟了)。

我看完之後，我徹底迷失方向，我知道把這塊弄好會是一個大工程，會耗掉我很多時間。確實，他真的耗掉我很多時間，和上面一樣，每多一個東西，例如頁首頁尾我就要花好一大段時間在找問題，一兩天解決一個部分，很困難，但解決完我真的是很高興，我覺得我自己超強。

當然，這部分也是盡可能問GPT，因為一切都是第一次，我沒有手機適配的經驗。最難的是頁首，其次是輸入Code欄位，他們花了我很多時間。

寫信

再次道歉。我沒有用手寫。

起因是這樣的，我原本覺得我的字真的很醜，然後一小部分是懶得寫，所以我就想說電子化我的信件，反正這也是趨勢。殊不知我疏忽了「手寫的溫度」，更直白的說就是網路這樣直接用文字打出來太冰冷。我意識到這件事情，是畢業前一個禮拜的禮拜一，意思就是我只有一個禮拜的時間改手寫。一天五封信，每篇都那樣的篇幅，這會寫到死吧。所以我打算就不改了，但除了信之外，也多了一張小小的祝福卡，雖然字不多，但是我希望這有彌補到手寫沒有帶來的溫暖。

至於瓶子，這是GPT想的，不知道多了這個小瓶子有沒有比較有價值。

這些小瓶子寄送過來的時候，有一個瓶子是破掉的，我打算破掉的這個用信封取代送給班導。就當我送他六塊錢吧，然後自費花個可能二三十塊買一個信封。

我還要量尺寸，不然紙張塞不進去。所以我就印雙面，QR Code在背面，前面就固定寫一些祝福的話。這樣就不會浪費空間，畢竟每一張紙也只有9.9*7cm(長寬各被三等分的A4)。

然後我還意識到一個問題，就是我怕你們拿不出來，我想說，你們應該有鑷子可以拿出來吧。不過我今天(剛到的時候)確實有用手把一張測試用的紙拿出來，用手確實可以，但有點困難。為了減少你們的困難，我有用家裡不用的迴紋針，這樣就很好弄出來。

問題解決了，接下來就是坐牢了。兩天內重複寫34張一樣的東西，貼標籤，封裝。我已經變成社畜了。這些東西大概加一加有五六個小時，在寫的時候還在懷疑人生，一直想到底真的有人吃這套嗎，會不會覺得我用A4很沒誠意，網站架了真的有人看嗎之類的問題。

至於電子信，寫程式的寫信和一般打字不一樣，寫程式的寫信是類似這種架構，所以會麻煩一點。當然我也不期望你們看懂些啥，這解釋起來要解釋太多東西了。

電子信這個也蠻坐牢的。每天晚上都要花大概20分鐘寫出對你們想說的話。有些有蠻多印象所以就有很多話，但是有些就真的少少。不過這也是我很努力想出來的(不是GPT或者隨便唬爛)，希望你們會覺得我是真心的。

架網站

這個網站在心得寫完後就架了。也沒什麼，就把網站丟上去Netlify或Github Pages就好。我選Netlify，因為我朋友也用那個。

架網站上去之後，有一種一切都結束了，雖然說不用再被做這個Project催進度，卻又有一種高中三年的回憶就在此的感覺。

結論

因為是自己一個人做這個Project的關係，我學到很多網頁的知識，包括更多語法和更多的手機適配的技巧。除此之外，我也知道一個網站架起來需要有很多的知識儲備量。要用到的語法太多了，尤其是你要用的東西越炫炮，東西就越複雜。像是我的頁首就花了可能二三十行設定他的的顏色還有字的排版方式吧。

不過我還差蠻多沒學的，例如Flexbox Grid、後端處理等等，在上基礎課程原本有看到但是我忘記去補這塊。在做的過程中，我也意識到我的不足，我很清楚一切都問GPT不好，但是我也真的沒有基礎，我沒辦法單幹。

這個Project歷時一個月多，總計花的時間沒有一百小時也有五十小時，好多次的爆肝到兩點，沒有咖啡支持。不過做出來還真的很有成就感。做這個時，我幾乎放棄競程(競技程式，簡單來講就是刷題目和打比賽)，最長有兩個禮拜沒上去CodeForce(線上刷題平台)，因為當我以為有時間的時候那一天就會debug到兩點。

整個程式，不包括34封信沒有個五百行也有個三四百行吧，光是頁首就有個快一百行，因為要設定那些參數，在手機的時候還要特別處理把他寫成菜單的形式，光是這些就要花掉好幾行。所以，雖然網頁相對好入門，但是也是有難度在。

最後，感謝有GPT，GPT我老爸，沒有他我做不起來。